{"info":{"_postman_id":"815ef75c-2be0-44b2-8278-c4a9f62f766e","name":"Visualizer Template: Scatter Plot","description":"A collection of API requests to demonstrate the data visualization feature through a scatter plot, created by student developers at Berkeley CodeBase.\n\nFor the full list of visualizer templates we have created, click [here](https://explore.postman.com/templates/4424).\n\n<br>\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/scatter-plot/WorldTradingData.PNG \"[Scatter Plot]\")\n\n<br>\n\nThis collection contains three sample templates for the scatter plot visualizer using requests from different API endpoints:\n\n1. SchoolDigger\n2. World Trading Data \n3. UFO \n\nFor detailed explanation on a request, check its description.\n<br>\n<br>\n**Visualization Data Parsing**\n<br>\nData should be passed in as an array of datasets, where each dataset is a list containing points in the form [x,y]\n\nExample:\n```\n[ \n\t[ [x,y],[x,y],[x,y] ],\n\t[ [x,y],[x,y],[x,y],[x,y],[x,y] ]\n]\n```","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json"},"item":[{"name":"School Test Scores","event":[{"listen":"test","script":{"id":"20e57f95-5d5b-413a-8805-78c6b302848d","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<div id=\"scatter-plot\"></div>","<style>",".tooltip{","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","    opacity: 0;","}","#xAxis{","    text-anchor: middle;","}","#yAxis{","    text-anchor: middle;","}","#legendTitle{","    font-size: 18px;","}",".legendItem{","    font-size: 14px;","}","#graphTitle{","    text-anchor: middle;","    font-size: 20px;","    font-weight: bold;","    ","}","</style>","<script>","    ","    pm.getData( function(err, value){","        let graphTitle;","        let xAxisLabel;","        let yAxisLabel;","        let data;","        let colors;","        let datasetLabels;","","        ","        xAxisLabel = value.xAxisLabel;","        yAxisLabel = value.yAxisLabel;","        data = value.data;","        colors = value.colors;","        datasetLabels = value.datasetLabels;","        graphTitle = value.graphTitle;","","    ","        //set the dimensions and margins of the graph","        let legendWidth = 170;","        let legendItemSpacing = 20;","        ","        let margins = {top: 60, right: 30 + legendWidth, bottom: 60, left: 75};","        let width = 800 - margins.left - margins.right;","        let height = 500 - margins.top - margins.bottom;","        ","        //add svg object to the page","        let svg = d3.select(\"#scatter-plot\")","          .append(\"svg\")","            .attr(\"width\", width + margins.left + margins.right)","            .attr(\"height\", height + margins.top + margins.bottom)","        svg.append(\"rect\")","            .attr(\"width\", \"100%\")","            .attr(\"height\", \"100%\")","            .attr(\"fill\", \"#F5F5F5\")    ","        //create title","        svg.append(\"text\")","            .attr(\"id\", \"graphTitle\")","            .attr(\"transform\", \"translate(\" + ((width + margins.left + margins.right)/2) + \" ,\" + margins.top/2 + \")\")","            .text(graphTitle);","        svg = svg.append(\"g\")","            .attr(\"transform\", \"translate(\" + margins.left + \",\" + margins.top + \")\");","            ","            ","        //add up axis","        let xMin = data[0][0][0];","        let xMax = data[0][0][0];","        let yMin = data[0][0][1];","        let yMax = data[0][0][1];","        ","        for (let dataset of data){","            for (let datapoint of dataset){","                if (datapoint[0] < xMin){","                    xMin = datapoint[0];","                }","                if (datapoint[0] > xMax){","                    xMax = datapoint[0];","                }","                if (datapoint[1] < yMin){","                    yMin = datapoint[1];","                }","                if (datapoint[1] > yMax){","                    yMax = datapoint[1];","                }","            }","        }","        ","        let x = d3.scaleLinear()","            .domain([xMin, xMax])","            .range([0,width]);","        svg.append(\"g\")","            .attr(\"transform\", \"translate(0,\" + height + \")\")","            .call(d3.axisBottom(x));","        ","        let y = d3.scaleLinear()","            .domain([yMin, yMax])","            .range([height, 0]);","        svg.append(\"g\")","            .call(d3.axisLeft(y));","        ","        svg.append(\"g\")","            .attr(\"class\", \"grid\")","            .attr(\"transform\", \"translate(0,\" + height + \")\")","            .call(","              d3","                .axisBottom(x)","                .ticks(5)","                .tickSize(-height)","                .tickFormat(\"\")","            );    ","        svg.append(\"g\")","            .attr(\"class\", \"grid\")","            .call(","              d3","                .axisLeft(y)","                .ticks(5)","                .tickSize(-width)","                .tickFormat(\"\")","            );","            ","        svg.selectAll(\".grid .tick line\")","            .attr(\"stroke\", \"#C4C4C4\")","            .attr(\"stroke-width\", 1);","        svg.selectAll(\".grid path\").remove();","        ","        //create hover tooltip","        let tooltip = d3.select(\"#scatter-plot\").append(\"div\")","            .attr(\"class\", \"tooltip\")","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(xAxisLabel + \": <b>\" + d[0] + \"</b><br/>\" + yAxisLabel + \": <b>\" + d[1] + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15) + \"px\")","                .style(\"top\", (d3.event.pageY - 20) + \"px\")","              .transition()","                .duration(200)      // ms","                .style(\"opacity\", 0.9)","        };","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","        };","            ","        //add datapoints","        let dotSize = 3;","        for (let i = 0; i < data.length; i++){","            svg.append(\"g\")","                .selectAll(\"point\")","                .data(data[i])","                .enter()","              .append(\"circle\")","                .attr(\"r\", dotSize)","                .style(\"fill\", colors[i])","                .attr(\"cx\", 0)","                .attr(\"cy\", height)","                .on(\"mouseover\", tipMouseover)","                .on(\"mouseout\", tipMouseout)","              .transition(d3.transition().duration(1000).ease(d3.easeQuadOut))      ","                .attr(\"cx\", d => x(d[0]))","                .attr(\"cy\", d => y(d[1]));","            ","            // above code initializes each data point to (0,0) and then transitions them to their correct position","        }","        ","        //create axises","        svg.append(\"text\")","            .attr(\"id\", \"xAxis\")","            .attr(\"transform\", \"translate(\" + (width/2) + \" ,\" + (height + margins.bottom*2/3) + \")\")","            .text(xAxisLabel);","            ","        svg.append(\"text\")","            .attr(\"id\", \"yAxis\")","            .attr(\"transform\", \"rotate(-90)\")","            .attr(\"y\", 10 - margins.left)","            .attr(\"x\", 0 - (height/2))","            .attr(\"dy\", \"1em\")","            .text(yAxisLabel);","        ","        //create legend","        var legend = svg.append('g')","            .attr(\"class\", \"legend\")","            .attr(\"transform\", \"translate(\" + (margins.left/2 + width) + \", \" + height/4 + \")\" );","        legend.append(\"text\")","            .attr(\"id\", \"legendTitle\")","            .attr(\"fill\", \"#000000\")","            .text(\"Datasets\");","        var legendItems = legend.selectAll(\"g\")","            .data(datasetLabels)","            .enter()","          .append(\"g\")","            .attr(\"class\", \"item\")","            .attr(\"transform\", function(d,i){ return \"translate(0, \" + ((i+1)*legendItemSpacing) + \")\"; });","        legendItems.append(\"circle\")","            .attr(\"r\", 5)","            .attr(\"fill\", (d, i) => colors[i]);","        legendItems.append(\"text\")","            .attr(\"class\", \"legendItem\")","            .attr(\"transform\", \"translate(\" + legendItemSpacing + \", 0)\")","            .attr(\"fill\", \"#000000\")","            .attr(\"alignment-baseline\", \"middle\")","            .text( function(d, i){ return d } );","        ","    })","","</script>","`;","","var response = pm.response.json();","","","let northernCalSchools = [];","let southernCalSchools = [];","let northSouthDividerLatitude = 36;","","let listOfSchools = response.schoolList;","for (let school of listOfSchools){","    let yearlySchoolDetails = school.schoolYearlyDetails;","    for (let yearlyInfo of yearlySchoolDetails){","        let percentFreeReducedLunch = yearlyInfo.percentFreeDiscLunch;","        let sizeOfSchool = yearlyInfo.numberOfStudents;","        if (percentFreeReducedLunch !== null && sizeOfSchool !== null){","            if (school.address.latLong.latitude > northSouthDividerLatitude){","                northernCalSchools.push([sizeOfSchool, percentFreeReducedLunch]);","            }","            else{","                southernCalSchools.push([sizeOfSchool, percentFreeReducedLunch]);","            }","        }","    }","}","","let title = \"School Size vs. Free/Reduced Lunch Ratio in California\";","let xAxis = \"Size of School (# Kids)\";","let yAxis = \"% Free/Reduced Lunch\";","let schoolData = [northernCalSchools, southernCalSchools];","let graphColors = [\"#F09D51\", \"#CC2529\"];","let dataLabels = [\"Northern California\", \"Southern California\"];","","","","pm.visualizer.set(template, {","    graphTitle: title,","    xAxisLabel: xAxis,","    yAxisLabel: yAxis,","    data: schoolData,","    colors: graphColors,","    datasetLabels: dataLabels","} );","",""],"type":"text/javascript"}}],"id":"2c28db0a-d81b-4eb7-b9f0-f1f07bfc7a8e","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":{"raw":"https://api.schooldigger.com/v1.2/schools?st=CA&perPage=50&level=high&appID=demo-id&appKey=demo-key","protocol":"https","host":["api","schooldigger","com"],"path":["v1.2","schools"],"query":[{"key":"st","value":"CA"},{"key":"perPage","value":"50"},{"key":"level","value":"high"},{"key":"appID","value":"demo-id"},{"key":"appKey","value":"demo-key"}]},"description":"Visualizes the correlation between the number of students at a school and the percentage of students on free/reduced lunch using two datasets: Northern California and Southern California.\n\n_Sample JSON response_\n```\n{\n  \"numberOfSchools\": 2250,\n  \"numberOfPages\": 45,\n  \"schoolList\": [\n    {\n      \"schoolid\": \"060162010232\",\n      \"schoolName\": \"ABC Secondary (Alternative)\",\n      \"phone\": \"(562) 229-7768\",\n      \"url\": \"https://www.schooldigger.com/go/CA/schools/0162010232/school.aspx\",\n      \"urlCompare\": \"https://www.schooldigger.com/go/CA/schools/0162010232/search.aspx\",\n      \"address\": {\n        \"latLong\": {\n          \"latitude\": 33.881046,\n          \"longitude\": -118.045455\n        },\n        \"street\": \"16534 S. Carmenita Rd.\",\n        \"city\": \"Cerritos\",\n        \"state\": \"CA\",\n        \"stateFull\": \"California\",\n        \"zip\": \"90703\",\n        \"zip4\": \"2301\",\n        \"cityURL\": \"https://www.schooldigger.com/go/CA/city/Cerritos/search.aspx\",\n        \"zipURL\": \"https://www.schooldigger.com/go/CA/zip/90703/search.aspx\",\n        \"html\": \"16534 S. Carmenita Rd.<br />Cerritos, CA 90703-2301\"\n      },\n      \"lowGrade\": \"7\",\n      \"highGrade\": \"12\",\n      \"schoolLevel\": \"High\",\n      \"isCharterSchool\": \"No\",\n      \"isMagnetSchool\": \"No\",\n      \"isVirtualSchool\": \"No\",\n      \"isTitleISchool\": \"No\",\n      \"isTitleISchoolwideSchool\": \"No\",\n      \"district\": {\n        \"districtID\": \"0601620\",\n        \"districtName\": \"ABC Unified\",\n        \"url\": \"https://www.schooldigger.com/go/CA/district/01620/search.aspx\",\n        \"rankURL\": \"https://www.schooldigger.com/go/CA/districtrank.aspx?finddistrict=01620\"\n      },\n      \"county\": {\n        \"countyName\": \"Los Angeles\",\n        \"countyURL\": \"https://www.schooldigger.com/go/CA/county/Los+Angeles/search.aspx\"\n      },\n      \"rankHistory\": [\n        {\n          \"year\": 2019,\n          \"rank\": 1591,\n          \"rankOf\": 2125,\n          \"rankStars\": 1,\n          \"rankLevel\": \"High\",\n          \"rankStatewidePercentage\": 25.13,\n          \"averageStandardScore\": 20.09294\n        }\n      ],\n      \"rankMovement\": null,\n      \"locationIsWithinBoundary\": null,\n      \"schoolYearlyDetails\": [\n        {\n          \"year\": 2017,\n          \"numberOfStudents\": 69,\n          \"percentFreeDiscLunch\": 53.62,\n          \"percentofAfricanAmericanStudents\": 4.35,\n          \"percentofAsianStudents\": 7.25,\n          \"percentofHispanicStudents\": 78.26,\n          \"percentofIndianStudents\": 0.0,\n          \"percentofPacificIslanderStudents\": 0.0,\n          \"percentofWhiteStudents\": 8.70,\n          \"percentofTwoOrMoreRaceStudents\": 1.45,\n          \"percentofUnspecifiedRaceStudents\": null,\n          \"teachersFulltime\": 1.3,\n          \"pupilTeacherRatio\": 52.2,\n          \"numberofAfricanAmericanStudents\": 3,\n          \"numberofAsianStudents\": 5,\n          \"numberofHispanicStudents\": 54,\n          \"numberofIndianStudents\": 0,\n          \"numberofPacificIslanderStudents\": 0,\n          \"numberofWhiteStudents\": 6,\n          \"numberofTwoOrMoreRaceStudents\": 1,\n          \"numberofUnspecifiedRaceStudents\": null\n        },\n        {\n          \"year\": 2016,\n          \"numberOfStudents\": 64,\n          \"percentFreeDiscLunch\": 37.50,\n          \"percentofAfricanAmericanStudents\": 6.25,\n          \"percentofAsianStudents\": 9.38,\n          \"percentofHispanicStudents\": 67.19,\n          \"percentofIndianStudents\": 0.0,\n          \"percentofPacificIslanderStudents\": 0.0,\n          \"percentofWhiteStudents\": 14.06,\n          \"percentofTwoOrMoreRaceStudents\": 3.12,\n          \"percentofUnspecifiedRaceStudents\": null,\n          \"teachersFulltime\": 2.0,\n          \"pupilTeacherRatio\": 32.0,\n          \"numberofAfricanAmericanStudents\": 4,\n          \"numberofAsianStudents\": 6,\n          \"numberofHispanicStudents\": 43,\n          \"numberofIndianStudents\": 0,\n          \"numberofPacificIslanderStudents\": 0,\n          \"numberofWhiteStudents\": 9,\n          \"numberofTwoOrMoreRaceStudents\": 2,\n          \"numberofUnspecifiedRaceStudents\": null\n        }\n      ],\n      \"isPrivate\": false,\n      \"privateDays\": null,\n      \"privateHours\": null,\n      \"privateHasLibrary\": null,\n      \"privateCoed\": null,\n      \"privateOrientation\": null,\n      \"hasBoundary\": false\n    },\n    \n    . . .\n  ]\n}\n```\n\n_Sample Scatter Plot_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/scatter-plot/SchoolDigger.PNG \"[Scatter Plot]\")"},"response":[],"_postman_id":"2c28db0a-d81b-4eb7-b9f0-f1f07bfc7a8e"},{"name":"World Trading Data","event":[{"listen":"test","script":{"id":"f44094cd-5d30-4898-901c-a0b151470717","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<div id=\"scatter-plot\"></div>","<style>",".tooltip{","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","    opacity: 0;","}","#xAxis{","    text-anchor: middle;","}","#yAxis{","    text-anchor: middle;","}","#legendTitle{","    font-size: 18px;","}",".legendItem{","    font-size: 14px;","}","#graphTitle{","    text-anchor: middle;","    font-size: 20px;","    font-weight: bold;","    ","}","</style>","<script>","    ","    pm.getData( function(err, value){","        let graphTitle;","        let xAxisLabel;","        let yAxisLabel;","        let data;","        let colors;","        let datasetLabels;","","        ","        xAxisLabel = value.xAxisLabel;","        yAxisLabel = value.yAxisLabel;","        data = value.data;","        colors = value.colors;","        datasetLabels = value.datasetLabels;","        graphTitle = value.graphTitle;","","    ","        //set the dimensions and margins of the graph","        let legendWidth = 170;","        let legendItemSpacing = 20;","        ","        let margins = {top: 60, right: 30 + legendWidth, bottom: 60, left: 75};","        let width = 800 - margins.left - margins.right;","        let height = 500 - margins.top - margins.bottom;","        ","        //add svg object to the page","        let svg = d3.select(\"#scatter-plot\")","          .append(\"svg\")","            .attr(\"width\", width + margins.left + margins.right)","            .attr(\"height\", height + margins.top + margins.bottom)","        svg.append(\"rect\")","            .attr(\"width\", \"100%\")","            .attr(\"height\", \"100%\")","            .attr(\"fill\", \"#F5F5F5\")    ","        //create title","        svg.append(\"text\")","            .attr(\"id\", \"graphTitle\")","            .attr(\"transform\", \"translate(\" + ((width + margins.left + margins.right)/2) + \" ,\" + margins.top/2 + \")\")","            .text(graphTitle);","        svg = svg.append(\"g\")","            .attr(\"transform\", \"translate(\" + margins.left + \",\" + margins.top + \")\");","            ","            ","        //add up axis","        let xMin = data[0][0][0];","        let xMax = data[0][0][0];","        let yMin = data[0][0][1];","        let yMax = data[0][0][1];","        ","        for (let dataset of data){","            for (let datapoint of dataset){","                if (Date.parse(datapoint[0]) < Date.parse(xMin)){","                    xMin = datapoint[0];","                }","                if (Date.parse(datapoint[0]) > Date.parse(xMax)){","                    xMax = datapoint[0];","                }","                if (datapoint[1] < yMin){","                    yMin = datapoint[1];","                }","                if (datapoint[1] > yMax){","                    yMax = datapoint[1];","                }","            }","        }","        ","        let x = d3.scaleUtc()","            .domain([Date.parse(xMin), Date.parse(xMax)])","            .range([0,width]);","        svg.append(\"g\")","            .attr(\"transform\", \"translate(0,\" + height + \")\")","            .call(d3.axisBottom(x));","        ","        let y = d3.scaleLinear()","            .domain([yMin, yMax])","            .range([height, 0]);","        svg.append(\"g\")","            .call(d3.axisLeft(y));","        ","        svg.append(\"g\")","            .attr(\"class\", \"grid\")","            .attr(\"transform\", \"translate(0,\" + height + \")\")","            .call(","              d3","                .axisBottom(x)","                .ticks(5)","                .tickSize(-height)","                .tickFormat(\"\")","            );    ","        svg.append(\"g\")","            .attr(\"class\", \"grid\")","            .call(","              d3","                .axisLeft(y)","                .ticks(5)","                .tickSize(-width)","                .tickFormat(\"\")","            );","            ","        svg.selectAll(\".grid .tick line\")","            .attr(\"stroke\", \"#C4C4C4\")","            .attr(\"stroke-width\", 1);","        svg.selectAll(\".grid path\").remove();","        ","        //create hover tooltip","        let tooltip = d3.select(\"#scatter-plot\").append(\"div\")","            .attr(\"class\", \"tooltip\")","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(xAxisLabel + \": <b>\" + d[0] + \"</b><br/>\" + yAxisLabel + \": <b>\" + d[1] + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15) + \"px\")","                .style(\"top\", (d3.event.pageY - 20) + \"px\")","              .transition()","                .duration(200)      // ms","                .style(\"opacity\", 0.9)","        };","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","        };","            ","        //add datapoints","        let dotSize = 3;","        for (let i = 0; i < data.length; i++){","            svg.append(\"g\")","                .selectAll(\"point\")","                .data(data[i])","                .enter()","              .append(\"circle\")","                .attr(\"r\", dotSize)","                .style(\"fill\", colors[i])","                .attr(\"cx\", 0)","                .attr(\"cy\", height)","                .on(\"mouseover\", tipMouseover)","                .on(\"mouseout\", tipMouseout)","              .transition(d3.transition().duration(1000).ease(d3.easeQuadOut))      ","                .attr(\"cx\", d => x(Date.parse(d[0])))","                .attr(\"cy\", d => y(d[1]));","            ","            // above code initializes each data point to (0,0) and then transitions them to their correct position","        }","        ","        //create axises","        svg.append(\"text\")","            .attr(\"id\", \"xAxis\")","            .attr(\"transform\", \"translate(\" + (width/2) + \" ,\" + (height + margins.bottom*2/3) + \")\")","            .text(xAxisLabel);","            ","        svg.append(\"text\")","            .attr(\"id\", \"yAxis\")","            .attr(\"transform\", \"rotate(-90)\")","            .attr(\"y\", 10 - margins.left)","            .attr(\"x\", 0 - (height/2))","            .attr(\"dy\", \"1em\")","            .text(yAxisLabel);","        ","        //create legend","        var legend = svg.append('g')","            .attr(\"class\", \"legend\")","            .attr(\"transform\", \"translate(\" + (margins.left/2 + width) + \", \" + height/4 + \")\" );","        legend.append(\"text\")","            .attr(\"id\", \"legendTitle\")","            .attr(\"fill\", \"#000000\")","            .text(\"Datasets\");","        var legendItems = legend.selectAll(\"g\")","            .data(datasetLabels)","            .enter()","          .append(\"g\")","            .attr(\"class\", \"item\")","            .attr(\"transform\", function(d,i){ return \"translate(0, \" + ((i+1)*legendItemSpacing) + \")\"; });","        legendItems.append(\"circle\")","            .attr(\"r\", 5)","            .attr(\"fill\", (d, i) => colors[i]);","        legendItems.append(\"text\")","            .attr(\"class\", \"legendItem\")","            .attr(\"transform\", \"translate(\" + legendItemSpacing + \", 0)\")","            .attr(\"fill\", \"#000000\")","            .attr(\"alignment-baseline\", \"middle\")","            .text( function(d, i){ return d } );","        ","    })","","</script>","`;","","var response = pm.response.json();","","","let lows = [];","let highs = [];","","for (let [date, value] of Object.entries(response.intraday)) {","    lows.push([new Date(date), value.low]);","    highs.push([new Date(date), value.high]);","}","","","let title = \"Intraday Highs/Lows of AAPL Stock\";","let xAxis = \"Date\";","let yAxis = \"Points\";","let stockData = [lows, highs];","let graphColors = [\"#F09D51\", \"#CC2529\"];","let dataLabels = [\"Lows\", \"Highs\"];","","pm.visualizer.set(template, {","    graphTitle: title,","    xAxisLabel: xAxis,","    yAxisLabel: yAxis,","    data: stockData,","    colors: graphColors,","    datasetLabels: dataLabels","} );","",""],"type":"text/javascript"}}],"id":"38fc965c-aa11-4363-b629-75fc2b830797","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"body":{"mode":"raw","raw":""},"url":{"raw":"https://intraday.worldtradingdata.com/api/v1/intraday?symbol=AAPL&range=1&interval=1&api_token=demo-token","protocol":"https","host":["intraday","worldtradingdata","com"],"path":["api","v1","intraday"],"query":[{"key":"symbol","value":"AAPL"},{"key":"range","value":"1"},{"key":"interval","value":"1"},{"key":"api_token","value":"demo-token"}]},"description":"Visualizes the intraday highs and lows of a company's stock, where each point is a moment in time. This template string uses time as the x-axis.\n\nThe data here is from [https://worldtradingdata.com](https://worldtradingdata.com). Sign up for a free 250 daily requests to get access to a plethora of stock data, current and historical!\n\n_Sample JSON response_\n```\n{\n    \"symbol\": \"AAPL\",\n    \"stock_exchange_short\": \"NASDAQ\",\n    \"timezone_name\": \"America/New_York\",\n    \"intraday\": {\n        \"2019-11-15 15:59:00\": {\n            \"open\": \"265.53\",\n            \"close\": \"265.75\",\n            \"high\": \"265.78\",\n            \"low\": \"265.40\",\n            \"volume\": \"625349\"\n        },\n        \"2019-11-15 15:58:00\": {\n            \"open\": \"265.42\",\n            \"close\": \"265.54\",\n            \"high\": \"265.55\",\n            \"low\": \"265.39\",\n            \"volume\": \"212103\"\n        },\n        \"2019-11-15 15:57:00\": {\n            \"open\": \"265.37\",\n            \"close\": \"265.42\",\n            \"high\": \"265.48\",\n            \"low\": \"265.30\",\n            \"volume\": \"181425\"\n        },\n        \"2019-11-15 15:56:00\": {\n            \"open\": \"265.41\",\n            \"close\": \"265.36\",\n            \"high\": \"265.43\",\n            \"low\": \"265.30\",\n            \"volume\": \"167222\"\n        },\n        \"2019-11-15 15:55:00\": {\n            \"open\": \"265.21\",\n            \"close\": \"265.41\",\n            \"high\": \"265.48\",\n            \"low\": \"265.19\",\n            \"volume\": \"285696\"\n        },\n        \"2019-11-15 15:54:00\": {\n            \"open\": \"265.14\",\n            \"close\": \"265.20\",\n            \"high\": \"265.25\",\n            \"low\": \"265.09\",\n            \"volume\": \"244894\"\n        },\n        \"2019-11-15 15:53:00\": {\n            \"open\": \"265.13\",\n            \"close\": \"265.16\",\n            \"high\": \"265.20\",\n            \"low\": \"265.11\",\n            \"volume\": \"92420\"\n        },\n        \"2019-11-15 15:52:00\": {\n            \"open\": \"265.18\",\n            \"close\": \"265.13\",\n            \"high\": \"265.20\",\n            \"low\": \"265.09\",\n            \"volume\": \"73052\"\n        },\n        \"2019-11-15 15:51:00\": {\n            \"open\": \"265.16\",\n            \"close\": \"265.18\",\n            \"high\": \"265.20\",\n            \"low\": \"265.13\",\n            \"volume\": \"93647\"\n        },\n        \"2019-11-15 15:50:00\": {\n            \"open\": \"265.09\",\n            \"close\": \"265.16\",\n            \"high\": \"265.20\",\n            \"low\": \"265.08\",\n            \"volume\": \"160208\"\n        },\n        \"2019-11-15 15:49:00\": {\n            \"open\": \"265.06\",\n            \"close\": \"265.08\",\n            \"high\": \"265.12\",\n            \"low\": \"265.05\",\n            \"volume\": \"77952\"\n        },\n        \"2019-11-15 15:48:00\": {\n            \"open\": \"265.04\",\n            \"close\": \"265.07\",\n            \"high\": \"265.10\",\n            \"low\": \"265.03\",\n            \"volume\": \"56481\"\n        },\n        \"2019-11-15 15:47:00\": {\n            \"open\": \"265.02\",\n            \"close\": \"265.04\",\n            \"high\": \"265.10\",\n            \"low\": \"264.99\",\n            \"volume\": \"53141\"\n        }\n        . . .\n    }\n}\n```\n\n_Sample Scatter Plot_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/scatter-plot/WorldTradingData.PNG \"[Scatter Plot]\")"},"response":[],"_postman_id":"38fc965c-aa11-4363-b629-75fc2b830797"},{"name":"UFO Sightings","event":[{"listen":"test","script":{"id":"ca72eb21-dd86-4a60-874a-6c921877c0ef","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<div id=\"scatter-plot\"></div>","<style>",".tooltip{","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","    opacity: 0;","}","#xAxis{","    text-anchor: middle;","}","#yAxis{","    text-anchor: middle;","}","#legendTitle{","    font-size: 18px;","}",".legendItem{","    font-size: 14px;","}","#graphTitle{","    text-anchor: middle;","    font-size: 20px;","    font-weight: bold;","    ","}","</style>","<script>","    ","    pm.getData( function(err, value){","        let graphTitle;","        let xAxisLabel;","        let yAxisLabel;","        let data;","        let colors;","        let datasetLabels;","","        ","        xAxisLabel = value.xAxisLabel;","        yAxisLabel = value.yAxisLabel;","        data = value.data;","        colors = value.colors;","        datasetLabels = value.datasetLabels;","        graphTitle = value.graphTitle;","","    ","        //set the dimensions and margins of the graph","        let legendWidth = 170;","        let legendItemSpacing = 20;","        ","        let margins = {top: 60, right: 30 + legendWidth, bottom: 60, left: 75};","        let width = 800 - margins.left - margins.right;","        let height = 500 - margins.top - margins.bottom;","        ","        //add svg object to the page","        let svg = d3.select(\"#scatter-plot\")","          .append(\"svg\")","            .attr(\"width\", width + margins.left + margins.right)","            .attr(\"height\", height + margins.top + margins.bottom)","        svg.append(\"rect\")","            .attr(\"width\", \"100%\")","            .attr(\"height\", \"100%\")","            .attr(\"fill\", \"#F5F5F5\")    ","        //create title","        svg.append(\"text\")","            .attr(\"id\", \"graphTitle\")","            .attr(\"transform\", \"translate(\" + ((width + margins.left + margins.right)/2) + \" ,\" + margins.top/2 + \")\")","            .text(graphTitle);","        svg = svg.append(\"g\")","            .attr(\"transform\", \"translate(\" + margins.left + \",\" + margins.top + \")\");","            ","            ","        //add up axis","        let xMin = data[0][0][0];","        let xMax = data[0][0][0];","        let yMin = data[0][0][1];","        let yMax = data[0][0][1];","        ","        for (let dataset of data){","            for (let datapoint of dataset){","                if (datapoint[0] < xMin){","                    xMin = datapoint[0];","                }","                if (datapoint[0] > xMax){","                    xMax = datapoint[0];","                }","                if (datapoint[1] < yMin){","                    yMin = datapoint[1];","                }","                if (datapoint[1] > yMax){","                    yMax = datapoint[1];","                }","            }","        }","        ","        let x = d3.scaleLinear()","            .domain([xMin, xMax])","            .range([0,width]);","        svg.append(\"g\")","            .attr(\"transform\", \"translate(0,\" + height + \")\")","            .call(d3.axisBottom(x));","        ","        let y = d3.scaleLinear()","            .domain([yMin, yMax])","            .range([height, 0]);","        svg.append(\"g\")","            .call(d3.axisLeft(y));","        ","        svg.append(\"g\")","            .attr(\"class\", \"grid\")","            .attr(\"transform\", \"translate(0,\" + height + \")\")","            .call(","              d3","                .axisBottom(x)","                .ticks(5)","                .tickSize(-height)","                .tickFormat(\"\")","            );    ","        svg.append(\"g\")","            .attr(\"class\", \"grid\")","            .call(","              d3","                .axisLeft(y)","                .ticks(5)","                .tickSize(-width)","                .tickFormat(\"\")","            );","            ","        svg.selectAll(\".grid .tick line\")","            .attr(\"stroke\", \"#C4C4C4\")","            .attr(\"stroke-width\", 1);","        svg.selectAll(\".grid path\").remove();","        ","        //create hover tooltip","        let tooltip = d3.select(\"#scatter-plot\").append(\"div\")","            .attr(\"class\", \"tooltip\")","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(xAxisLabel + \": <b>\" + d[0] + \"</b><br/>\" + yAxisLabel + \": <b>\" + d[1] + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15) + \"px\")","                .style(\"top\", (d3.event.pageY - 20) + \"px\")","              .transition()","                .duration(200)      // ms","                .style(\"opacity\", 0.9)","        };","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","        };","            ","        //add datapoints","        let dotSize = 3;","        for (let i = 0; i < data.length; i++){","            svg.append(\"g\")","                .selectAll(\"point\")","                .data(data[i])","                .enter()","              .append(\"circle\")","                .attr(\"r\", dotSize)","                .style(\"fill\", colors[i])","                .attr(\"cx\", 0)","                .attr(\"cy\", height)","                .on(\"mouseover\", tipMouseover)","                .on(\"mouseout\", tipMouseout)","              .transition(d3.transition().duration(1000).ease(d3.easeQuadOut))      ","                .attr(\"cx\", d => x(d[0]))","                .attr(\"cy\", d => y(d[1]));","            ","            // above code initializes each data point to (0,0) and then transitions them to their correct position","        }","        ","        //create axises","        svg.append(\"text\")","            .attr(\"id\", \"xAxis\")","            .attr(\"transform\", \"translate(\" + (width/2) + \" ,\" + (height + margins.bottom*2/3) + \")\")","            .text(xAxisLabel);","            ","        svg.append(\"text\")","            .attr(\"id\", \"yAxis\")","            .attr(\"transform\", \"rotate(-90)\")","            .attr(\"y\", 10 - margins.left)","            .attr(\"x\", 0 - (height/2))","            .attr(\"dy\", \"1em\")","            .text(yAxisLabel);","        ","        //create legend","        var legend = svg.append('g')","            .attr(\"class\", \"legend\")","            .attr(\"transform\", \"translate(\" + (margins.left/2 + width) + \", \" + height/4 + \")\" );","        legend.append(\"text\")","            .attr(\"id\", \"legendTitle\")","            .attr(\"fill\", \"#000000\")","            .text(\"Datasets\");","        var legendItems = legend.selectAll(\"g\")","            .data(datasetLabels)","            .enter()","          .append(\"g\")","            .attr(\"class\", \"item\")","            .attr(\"transform\", function(d,i){ return \"translate(0, \" + ((i+1)*legendItemSpacing) + \")\"; });","        legendItems.append(\"circle\")","            .attr(\"r\", 5)","            .attr(\"fill\", (d, i) => colors[i]);","        legendItems.append(\"text\")","            .attr(\"class\", \"legendItem\")","            .attr(\"transform\", \"translate(\" + legendItemSpacing + \", 0)\")","            .attr(\"fill\", \"#000000\")","            .attr(\"alignment-baseline\", \"middle\")","            .text( function(d, i){ return d } );","        ","    })","","</script>","`;","","var response = pm.response.json();","","","let sightingLocs = [];","","let listOfSightings = response.sightings;","for (let sighting of listOfSightings){","    let location = sighting.loc;","    sightingLocs.push([location[0], location[1]]);","}","","","let title = \"Location of UFO Sightings in Latitude/Longitude\";","let xAxis = \"Latitude\";","let yAxis = \"Longitude\";","let schoolData = [sightingLocs];","let graphColors = [\"#F09D51\"];","let dataLabels = [\"Sightings\"];","","","","pm.visualizer.set(template, {","    graphTitle: title,","    xAxisLabel: xAxis,","    yAxisLabel: yAxis,","    data: schoolData,","    colors: graphColors,","    datasetLabels: dataLabels","} );","",""],"type":"text/javascript"}}],"id":"079b8f9c-862f-4943-af18-852ef08b0538","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":{"raw":"http://ufo-api.herokuapp.com/api/sightings/search?limit=200","protocol":"http","host":["ufo-api","herokuapp","com"],"path":["api","sightings","search"],"query":[{"key":"limit","value":"200"}]},"description":"Visualizes the locations of recent UFO sightings according to latitude and longitude.\n\n_Sample JSON response_\n```\n{\n    \"status\": \"OK\",\n    \"sightingsReturned\": 200,\n    \"sightings\": [\n        {\n            \"_id\": \"583e43ac7250d6988d3b33b4\",\n            \"city\": \"Sanborn\",\n            \"date\": \"2016-09-29T23:30:00.000Z\",\n            \"url\": \"http://www.nuforc.org/webreports/130/S130329.html\",\n            \"state\": \"NY\",\n            \"summary\": \"3 orbs dancing/chasing each other in circles in Sanborn, NY.  ((anonymous report))\",\n            \"duration\": \"10 minutes\",\n            \"shape\": \"Oval\",\n            \"loc\": [\n                -78.884761,\n                43.136723\n            ],\n            \"__v\": 0,\n            \"dateAdded\": \"2016-11-30T03:12:44.101Z\"\n        },\n        {\n            \"_id\": \"583e43ac7250d6988d3b33b5\",\n            \"city\": \"Logan\",\n            \"date\": \"2016-09-29T22:00:00.000Z\",\n            \"url\": \"http://www.nuforc.org/webreports/130/S130331.html\",\n            \"state\": \"KS\",\n            \"summary\": \"As we were walking from our RV to the house I noticed a bright light. I thought it was a shooting star at first, as it was a perfect fa\",\n            \"duration\": \"45 seconds\",\n            \"shape\": \"Light\",\n            \"loc\": [\n                -101.155238,\n                38.9058216\n            ],\n            \"__v\": 0,\n            \"dateAdded\": \"2016-11-30T03:12:44.128Z\"\n        },\n        {\n            \"_id\": \"583e43ac7250d6988d3b33b6\",\n            \"city\": \"Kennewick\",\n            \"date\": \"2016-09-29T21:00:00.000Z\",\n            \"url\": \"http://www.nuforc.org/webreports/130/S130338.html\",\n            \"state\": \"WA\",\n            \"summary\": \"Southern sky lit up in bright flash.\",\n            \"duration\": \"1 second\",\n            \"shape\": \"\",\n            \"loc\": [\n                -119.1372337,\n                46.2112458\n            ],\n            \"__v\": 0,\n            \"dateAdded\": \"2016-11-30T03:12:44.134Z\"\n        }\n    ]\n}\n```\n\n_Sample Scatter Plot_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/scatter-plot/UFO.PNG \"[Scatter Plot]\")"},"response":[],"_postman_id":"079b8f9c-862f-4943-af18-852ef08b0538"}],"event":[{"listen":"prerequest","script":{"id":"22b7acc2-2b72-4d1c-8bc3-6e695379fc8d","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"ac4faf0c-9213-4d2e-be7c-c1a7a98a48f0","type":"text/javascript","exec":[""]}}]}