{"info":{"_postman_id":"157245c2-fc5d-48c6-a242-83d0673ed93c","name":"Visualizer Template: Map","description":"A collection of API requests to demonstrate the data visualization feature through a density map, 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\nThis global density map allows us to visualize any form of quantitative variable, such as population, temperature, or number of occurrences, against longitude and latitude coordinates.\n\n<br>\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/map/map_earthquakes.png \"[Map]\")\n\n<br>\n\nThis collection contains three sample usages for the map visualizer.\n\n1. Earthquakes\n2. Unemployment Rate\n3. UFO Sightings\n\n<br>\n\nFor detailed explanation on a request, check its description. \n\n<br>\n\n**Data Parsing**\n\nAt the bottom of the test script, the data is formatted into the following data structure.\n\n`[{ lat: 75.0, long: 36.0, circleSize: 8, color: '#FFFFFF' }]`\n\n<br>\n\n**Custom Tooltip** \n\nThe default tooltip description is the latitude and longitude of the point. If you wish to edit the tooltip description, add the desired fields to `parsedData` and edit the tooltip section of the template. See the \"Unemployment Rate\" example for reference.\n\n<br>\n\n**Map Use**\n\nDrag to select an area to zoom into, single click to zoom out, and hover to view ToolTip tags.","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json"},"item":[{"name":"Earthquakes","event":[{"listen":"test","script":{"id":"bf700921-4680-4723-8e55-76cf2c2681f9","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<script src=\"https://unpkg.com/topojson@3\"></script>","<style>","body { ","    background-color: white;","}",".title { ","    font-size: 30px;","    font-family: \"Roboto\", sans-serif;","    text-align: center;","}",".container {","    display: flex;","    flex-direction: row;","    justify-content: center;","    align-items: center;","}",".directions {","    font-size: 18px;","    font-family: \"Roboto\", sans-serif;","    padding-left: 20px;","}","#backgroundRectangle {","    width: 100%;","    height: 100%;","    fill: #f5f5f5;","}",".projectionOutline{","    fill: #2f434a;","    stroke: #4e5f66","}",".tooltip {","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","}","","</style>","<h1 class=\"title\"></h1>","<div class=\"container\">","<div id=\"map\"></div>","<p class=\"directions\">Draw mouse to zoom in onto section. Double click to zoom out</p>","</div>","<script>","","    pm.getData( function(err, value) {","        d3.select(\".title\").html(value.title);","        initVisualization(value.data);","    });","","    // Function call that contains our visualization, necessary because we are loading an external map file","    async function initVisualization(pmInput){","        const response = await fetch(\"https://unpkg.com/world-atlas@1.1.4/world/110m.json\");","        response.json().then( data => {","            generateVisualization(pmInput, data);","        });","    }","    ","    // Generates d3 map visualization using an external map file and user-inputed data","    // Utilizes d3.zoom and d3.brush","    function generateVisualization(pmInput, mapData){","        // Set the dimensions and margins of the graph","        const margins = {top: 20, left: 10, right: 20, bottom: 20};","        const width = 800 - margins.top - margins.bottom;","        const height = 500 - margins.left - margins.right;","        ","        // Initializes d3.zoom to cover entire map SVG","        const zoom = d3.zoom()","            .scaleExtent([1,40])","            .translateExtent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"zoom\", () =>{","                d3.select(\"#map-group\").attr(\"transform\", d3.event.transform)","            })","        ","        // Initiaizes d3.brush to cover entire map SVG and zoom in on the selected window","        let brush = d3.brush()","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"end\", () => {","                let extent = d3.event.selection;","                if(extent){","                    d3.select(\"#map-group\").call(brush.move, null);","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( (width + margins.left + margins.right)/ (extent[1][0]-extent[0][0]) )","                        .translate( -extent[0][0], -extent[0][1] ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => { return 2 * d.circleSize * (extent[1][0]-extent[0][0])/(width + margins.left + margins.right);} )","                        .attr(\"stroke-width\", (extent[1][0]-extent[0][0])/(width + margins.left + margins.right));","                    ","                }","                else{","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( 1 )","                        .translate( 0,0 ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => d.circleSize)","                        .attr(\"stroke-width\", 1);","                }","            });","        ","        // Set the dimensions and margins of the graph","        let svg = d3.select(\"#map\")","          .append(\"svg\")  ","            .attr(\"width\", width + margins.left + margins.right)","            .attr(\"height\", height + margins.top + margins.bottom)","        svg.append(\"rect\")","            .attr(\"id\", \"backgroundRectangle\");","        svg = svg.append(\"g\")","            .attr(\"id\", \"map-group\")","            .call(brush);","        ","        // Draws Mercator projection of map onto SVG using the inputted map file","        let projection = d3.geoMercator().translate([400, 350]).scale(125);","        var mapGroup = svg.append(\"g\");","        let mapPath = d3.geoPath().projection(projection);","        mapGroup.selectAll(\"path\")","            .data(topojson.feature(mapData, mapData.objects.countries).features)","            .enter()","          .append(\"path\")","            .attr(\"d\", mapPath)","            .attr(\"class\", \"projectionOutline\");","        ","        // Calculate offset for tooltip","        const rect = document.getElementById(\"map\").getBoundingClientRect();","        const offset = {top: rect.top, left: rect.left};","        ","        // Create hover tooltip","        let tooltip = d3.select(\"#map\").append(\"div\")","            .attr(\"class\", \"tooltip\");","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(\"Longitude: <b>\" + d.long + \"</b><br/>Latitude: <b>\" + d.lat + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15 - offset.left) + \"px\")","                .style(\"top\", (d3.event.pageY - 20 - offset.top) + \"px\")","              .transition()","                .duration(200)      // ms","                .style(\"opacity\", 0.9)","            d3.select(this)","                .style(\"stroke\", \"white\")","                .style(\"opacity\", 1);","        };","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","            d3.select(this)","                .style(\"stroke\", \"none\")","                .style(\"opacity\", 0.6);","        };","        ","        // Appends points from user-inputted data onto map","        svg.selectAll(\"circle\")","            .data(pmInput)","            .enter()","          .append(\"circle\")","            .attr(\"r\", 0)","            .style(\"fill\", d => d.color)","            .attr(\"cx\", d => projection([d.long, d.lat])[0])","            .attr(\"cy\",  d => projection([d.long, d.lat])[1])","            .style(\"opacity\", 0.6)","            .on(\"mouseover\", tipMouseover)","            .on(\"mouseout\", tipMouseout)","          .transition(d3.transition().duration(1000).ease(d3.easeQuadOut))","            .attr(\"r\", d => d.circleSize)","    }","</script>","`;","","var response = pm.response.json();","let parsedData = [];","","//data parsing","for (let earthquake of response.features){","    let tempEntry = {};","    tempEntry.lat = earthquake.geometry.coordinates[1];","    tempEntry.long = earthquake.geometry.coordinates[0];","    tempEntry.circleSize = Math.abs(Math.ceil(earthquake.properties.mag));","    tempEntry.color = \"#F09D51\";","    parsedData.push(tempEntry);","}","","pm.visualizer.set(template, {","    data: parsedData,","    title: \"Map of Earthquake Occurances over Three Days\"","} );","",""],"type":"text/javascript"}}],"id":"f700abe7-fcc6-4423-9046-0e5807874af1","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":{"raw":"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-10-13&endtime=2019-10-16","protocol":"https","host":["earthquake","usgs","gov"],"path":["fdsnws","event","1","query"],"query":[{"key":"format","value":"geojson"},{"key":"starttime","value":"2019-10-13"},{"key":"endtime","value":"2019-10-16"}]},"description":"Visualizes earthquakes on a zoomable map as circles at the epicenter's coordinates with a radius corresponding to each earthquake's magnitude and hoverable tags over each circle\n\n<br>\n\n_Sample JSON response_\n```\n{\n    \"type\": \"FeatureCollection\",\n    \"metadata\": {\n        \"generated\": 1574451555000,\n        \"url\": \"https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-10-13&endtime=2019-10-16\",\n        \"title\": \"USGS Earthquakes\",\n        \"status\": 200,\n        \"api\": \"1.8.1\",\n        \"count\": 1470\n    },\n    \"features\": [\n        {\n            \"type\": \"Feature\",\n            \"properties\": {\n                \"mag\": 1.3,\n                \"place\": \"58km SSW of Redoubt Volcano, Alaska\",\n                \"time\": 1571183323829,\n                \"updated\": 1573176454895,\n                \"tz\": -540,\n                \"url\": \"https://earthquake.usgs.gov/earthquakes/eventpage/ak019d8oraxu\",\n                \"detail\": \"https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=ak019d8oraxu&format=geojson\",\n                \"felt\": null,\n                \"cdi\": null,\n                \"mmi\": null,\n                \"alert\": null,\n                \"status\": \"reviewed\",\n                \"tsunami\": 0,\n                \"sig\": 26,\n                \"net\": \"ak\",\n                \"code\": \"019d8oraxu\",\n                \"ids\": \",av62093936,ak019d8oraxu,\",\n                \"sources\": \",av,ak,\",\n                \"types\": \",geoserve,origin,phase-data,\",\n                \"nst\": null,\n                \"dmin\": null,\n                \"rms\": 0.5,\n                \"gap\": null,\n                \"magType\": \"ml\",\n                \"type\": \"earthquake\",\n                \"title\": \"M 1.3 - 58km SSW of Redoubt Volcano, Alaska\"\n            },\n            \"geometry\": {\n                \"type\": \"Point\",\n                \"coordinates\": [\n                    -153.08629999999999,\n                    59.991799999999998,\n                    1.3999999999999999\n                ]\n            },\n            \"id\": \"ak019d8oraxu\"\n        },\n        {\n            \"type\": \"Feature\",\n            \"properties\": {\n                \"mag\": 0.76000000000000001,\n                \"place\": \"14km SSW of Searles Valley, CA\",\n                \"time\": 1571183187360,\n                \"updated\": 1571183397202,\n                \"tz\": -480,\n                \"url\": \"https://earthquake.usgs.gov/earthquakes/eventpage/ci39134488\",\n                \"detail\": \"https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=ci39134488&format=geojson\",\n                \"felt\": null,\n                \"cdi\": null,\n                \"mmi\": null,\n                \"alert\": null,\n                \"status\": \"automatic\",\n                \"tsunami\": 0,\n                \"sig\": 9,\n                \"net\": \"ci\",\n                \"code\": \"39134488\",\n                \"ids\": \",ci39134488,\",\n                \"sources\": \",ci,\",\n                \"types\": \",geoserve,nearby-cities,origin,phase-data,scitech-link,\",\n                \"nst\": 11,\n                \"dmin\": 0.043630000000000002,\n                \"rms\": 0.11,\n                \"gap\": 96,\n                \"magType\": \"ml\",\n                \"type\": \"earthquake\",\n                \"title\": \"M 0.8 - 14km SSW of Searles Valley, CA\"\n            },\n            \"geometry\": {\n                \"type\": \"Point\",\n                \"coordinates\": [\n                    -117.4746667,\n                    35.6516667,\n                    8.6899999999999995\n                ]\n            },\n            \"id\": \"ci39134488\"\n        },\n        ...\n```\n\n<br>\n\n_Sample Map_\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/map/map_earthquakes.png \"[Map]\")"},"response":[],"_postman_id":"f700abe7-fcc6-4423-9046-0e5807874af1"},{"name":"Unemployment Rate","event":[{"listen":"test","script":{"id":"75e67737-d0f1-44e8-9cd4-a6073b7ea514","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<script src=\"https://unpkg.com/topojson@3\"></script>","<style>","body { ","    background-color: white;","}",".title { ","    font-size: 30px;","    font-family: \"Roboto\", sans-serif;","    text-align: center;","}",".container {","    display: flex;","    flex-direction: row;","    justify-content: center;","    align-items: center;","}",".directions {","    font-size: 18px;","    font-family: \"Roboto\", sans-serif;","    padding-left: 20px;","}","#backgroundRectangle {","    width: 100%;","    height: 100%;","    fill: #f5f5f5;","}",".projectionOutline{","    fill: #2f434a;","    stroke: #4e5f66","}",".tooltip {","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","}","","</style>","<h1 class=\"title\"></h1>","<div class=\"container\">","<div id=\"map\"></div>","<p class=\"directions\">Draw mouse to zoom in onto section. Double click to zoom out</p>","</div>","<script>","","    pm.getData( function(err, value) {","        d3.select(\".title\").html(value.title);","        initVisualization(value.data);","    });","","    // Function call that contains our visualization, necessary because we are loading an external map file","    async function initVisualization(pmInput){","        const response = await fetch(\"https://unpkg.com/world-atlas@1.1.4/world/110m.json\");","        response.json().then( data => {","            generateVisualization(pmInput, data);","        });","    }","    ","    // Generates d3 map visualization using an external map file and user-inputed data","    // Utilizes d3.zoom and d3.brush","    function generateVisualization(pmInput, mapData){","        // Set the dimensions and margins of the graph","        const margins = {top: 20, left: 10, right: 20, bottom: 20};","        const width = 800 - margins.top - margins.bottom;","        const height = 500 - margins.left - margins.right;","        ","        // Initializes d3.zoom to cover entire map SVG","        const zoom = d3.zoom()","            .scaleExtent([1,40])","            .translateExtent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"zoom\", () =>{","                d3.select(\"#map-group\").attr(\"transform\", d3.event.transform)","            })","        ","        // Initiaizes d3.brush to cover entire map SVG and zoom in on the selected window","        let brush = d3.brush()","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"end\", () => {","                let extent = d3.event.selection;","                if(extent){","                    d3.select(\"#map-group\").call(brush.move, null);","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( (width + margins.left + margins.right)/ (extent[1][0]-extent[0][0]) )","                        .translate( -extent[0][0], -extent[0][1] ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => { return 2 * d.circleSize * (extent[1][0]-extent[0][0])/(width + margins.left + margins.right);} )","                        .attr(\"stroke-width\", (extent[1][0]-extent[0][0])/(width + margins.left + margins.right));","                    ","                }","                else{","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( 1 )","                        .translate( 0,0 ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => d.circleSize)","                        .attr(\"stroke-width\", 1);","                }","            });","        ","        // Set the dimensions and margins of the graph","        let svg = d3.select(\"#map\")","          .append(\"svg\")  ","            .attr(\"width\", width + margins.left + margins.right)","            .attr(\"height\", height + margins.top + margins.bottom)","        svg.append(\"rect\")","            .attr(\"id\", \"backgroundRectangle\");","        svg = svg.append(\"g\")","            .attr(\"id\", \"map-group\")","            .call(brush);","        ","        // Draws Mercator projection of map onto SVG using the inputted map file","        let projection = d3.geoMercator().translate([400, 350]).scale(125);","        var mapGroup = svg.append(\"g\");","        let mapPath = d3.geoPath().projection(projection);","        mapGroup.selectAll(\"path\")","            .data(topojson.feature(mapData, mapData.objects.countries).features)","            .enter()","          .append(\"path\")","            .attr(\"d\", mapPath)","            .attr(\"class\", \"projectionOutline\");","        ","        // Calculate offset for tooltip","        const rect = document.getElementById(\"map\").getBoundingClientRect();","        const offset = {top: rect.top, left: rect.left};","        ","        // Create hover tooltip","        let tooltip = d3.select(\"#map\").append(\"div\")","            .attr(\"class\", \"tooltip\");","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(\"Longitude: <b>\" + d.long + \"</b><br/>Latitude: <b>\" + d.lat + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15 - offset.left) + \"px\")","                .style(\"top\", (d3.event.pageY - 20 - offset.top) + \"px\")","              .transition()","                .duration(200)      // ms","                .style(\"opacity\", 0.9)","            d3.select(this)","                .style(\"stroke\", \"white\")","                .style(\"opacity\", 1);","        };","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","            d3.select(this)","                .style(\"stroke\", \"none\")","                .style(\"opacity\", 0.6);","        };","        ","        // Appends points from user-inputted data onto map","        svg.selectAll(\"circle\")","            .data(pmInput)","            .enter()","          .append(\"circle\")","            .attr(\"r\", 0)","            .style(\"fill\", d => d.color)","            .attr(\"cx\", d => projection([d.long, d.lat])[0])","            .attr(\"cy\",  d => projection([d.long, d.lat])[1])","            .style(\"opacity\", 0.6)","            .on(\"mouseover\", tipMouseover)","            .on(\"mouseout\", tipMouseout)","          .transition(d3.transition().duration(1000).ease(d3.easeQuadOut))","            .attr(\"r\", d => d.circleSize)","    }","</script>","`;","","","const rawData = pm.response.text()","","// Static data of state latitudes and longitudes","const latlng = {\"AL\": {\"latitude\": \"32.806671\", \"longitude\": \"-86.791130\"}, \"AK\": {\"latitude\": \"61.370716\", \"longitude\": \"-152.404419\"}, \"AZ\": {\"latitude\": \"33.729759\", \"longitude\": \"-111.431221\"}, \"AR\": {\"latitude\": \"34.969704\", \"longitude\": \"-92.373123\"}, \"CA\": {\"latitude\": \"36.116203\", \"longitude\": \"-119.681564\"}, \"CO\": {\"latitude\": \"39.059811\", \"longitude\": \"-105.311104\"}, \"CT\": {\"latitude\": \"41.597782\", \"longitude\": \"-72.755371\"}, \"DE\": {\"latitude\": \"39.318523\", \"longitude\": \"-75.507141\"}, \"null\": {\"latitude\": \"38.897438\", \"longitude\": \"-77.026817\"}, \"FL\": {\"latitude\": \"27.766279\", \"longitude\": \"-81.686783\"}, \"GA\": {\"latitude\": \"33.040619\", \"longitude\": \"-83.643074\"}, \"HI\": {\"latitude\": \"21.094318\", \"longitude\": \"-157.498337\"}, \"ID\": {\"latitude\": \"44.240459\", \"longitude\": \"-114.478828\"}, \"IL\": {\"latitude\": \"40.349457\", \"longitude\": \"-88.986137\"}, \"IN\": {\"latitude\": \"39.849426\", \"longitude\": \"-86.258278\"}, \"IA\": {\"latitude\": \"42.011539\", \"longitude\": \"-93.210526\"}, \"KS\": {\"latitude\": \"38.526600\", \"longitude\": \"-96.726486\"}, \"KY\": {\"latitude\": \"37.668140\", \"longitude\": \"-84.670067\"}, \"LA\": {\"latitude\": \"31.169546\", \"longitude\": \"-91.867805\"}, \"ME\": {\"latitude\": \"44.693947\", \"longitude\": \"-69.381927\"}, \"MD\": {\"latitude\": \"39.063946\", \"longitude\": \"-76.802101\"}, \"MA\": {\"latitude\": \"42.230171\", \"longitude\": \"-71.530106\"}, \"MI\": {\"latitude\": \"43.326618\", \"longitude\": \"-84.536095\"}, \"MN\": {\"latitude\": \"45.694454\", \"longitude\": \"-93.900192\"}, \"MS\": {\"latitude\": \"32.741646\", \"longitude\": \"-89.678696\"}, \"MO\": {\"latitude\": \"38.456085\", \"longitude\": \"-92.288368\"}, \"MT\": {\"latitude\": \"46.921925\", \"longitude\": \"-110.454353\"}, \"NE\": {\"latitude\": \"41.125370\", \"longitude\": \"-98.268082\"}, \"NV\": {\"latitude\": \"38.313515\", \"longitude\": \"-117.055374\"}, \"NH\": {\"latitude\": \"43.452492\", \"longitude\": \"-71.563896\"}, \"NJ\": {\"latitude\": \"40.298904\", \"longitude\": \"-74.521011\"}, \"NM\": {\"latitude\": \"34.840515\", \"longitude\": \"-106.248482\"}, \"NY\": {\"latitude\": \"42.165726\", \"longitude\": \"-74.948051\"}, \"NC\": {\"latitude\": \"35.630066\", \"longitude\": \"-79.806419\"}, \"ND\": {\"latitude\": \"47.528912\", \"longitude\": \"-99.784012\"}, \"OH\": {\"latitude\": \"40.388783\", \"longitude\": \"-82.764915\"}, \"OK\": {\"latitude\": \"35.565342\", \"longitude\": \"-96.928917\"}, \"OR\": {\"latitude\": \"44.572021\", \"longitude\": \"-122.070938\"}, \"PA\": {\"latitude\": \"40.590752\", \"longitude\": \"-77.209755\"}, \"RI\": {\"latitude\": \"41.680893\", \"longitude\": \"-71.511780\"}, \"SC\": {\"latitude\": \"33.856892\", \"longitude\": \"-80.945007\"}, \"SD\": {\"latitude\": \"44.299782\", \"longitude\": \"-99.438828\"}, \"TN\": {\"latitude\": \"35.747845\", \"longitude\": \"-86.692345\"}, \"TX\": {\"latitude\": \"31.054487\", \"longitude\": \"-97.563461\"}, \"UT\": {\"latitude\": \"40.150032\", \"longitude\": \"-111.862434\"}, \"VT\": {\"latitude\": \"44.045876\", \"longitude\": \"-72.710686\"}, \"VA\": {\"latitude\": \"37.769337\", \"longitude\": \"-78.169968\"}, \"WA\": {\"latitude\": \"47.400902\", \"longitude\": \"-121.490494\"}, \"WV\": {\"latitude\": \"38.491226\", \"longitude\": \"-80.954453\"}, \"WI\": {\"latitude\": \"44.268543\", \"longitude\": \"-89.616508\"}, \"WY\": {\"latitude\": \"42.755966\", \"longitude\": \"-107.302490\"}}","","const parseCommaInt = (str) => Number.parseInt(str.replace(',','')) // Turns strings like \"10,000\" into 10000","","// Parsing a text file","const unemployment = rawData.split('\\n')","    .filter(line => line.slice(0,2) === 'CN')","    .map(line => line.match(/(\\S.*\\S)\\s{2,}(\\S.*\\S)\\s{2,}(\\S.*\\S)\\s{2,}(\\S.*\\S)\\s{2,}(\\S.*\\S)\\s{2,}(\\S.*\\S)\\s{2,}(\\S.*\\S)\\s{2,}(\\S.*\\S)\\s{2,}(\\S.*\\S)/)) // Regex for multi-space separated fields","    .filter(line => line) // Filter out lines that do not match","    .map(line => ({","        state: line[4].substring(line[4].length - 2).toUpperCase(), // State's 2 letter abbreviation","        total: parseCommaInt(line[6]),","        employed: parseCommaInt(line[7])","    }))","    .reduce((acc, cur) => { // Sum up employment and total counts for each state","        if (latlng[cur.state]){","            if (!acc[cur.state]){","                acc[cur.state] = {","                    total: cur.total,","                    employed: cur.employed,","                    lat: parseFloat(latlng[cur.state].latitude),","                    long: parseFloat(latlng[cur.state].longitude),","                }","            }","            else {","                acc[cur.state].total += cur.total","                acc[cur.state].employed += cur.employed","            }","        }","        return acc","    }, {})","","const parsedData = Object.entries(unemployment)","    .map(kv => {","        const [state, {lat, long, employed, total}] = kv","        return {","            state, lat, long,","            circleSize: (1 - employed/total) * 100,","            color: \"#F09D51\"","        }","    })","","pm.visualizer.set(template, {","    data: parsedData,","    title: \"Unemployment Rates\"","} );",""],"type":"text/javascript"}}],"id":"3d7cceb6-6986-41d7-a117-7eb5898cf599","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":"https://www.bls.gov/lau/laucnty18.txt","description":"Visualizes unemployment rate for the different states in the U.S.A with a radius corresponding to the percentage of unemployment and hoverable tags over each circle.\n\n_Sample .txt Response_\n\n```\n                               Labor Force Data by County, 2018 Annual Averages\n\n                 State  County                                                                                              \n                 FIPS   FIPS                                                                  Labor                     Unemployed    \n   LAUS Code     Code   Code   County Name/State Abbreviation                    Year         Force     Employed      Level     Rate\n\nCN0100100000000   01     001   Autauga County, AL                                2018        25,957       25,015        942      3.6\nCN0100300000000   01     003   Baldwin County, AL                                2018        93,849       90,456      3,393      3.6\n...\nCN7215300000000   72     153   Yauco Municipio, PR                               2018         9,770        8,329      1,441     14.7\n\nSOURCE:  BLS, LAUS\nApril 19, 2019\n```\n\n_Sample Map_\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/map/map_unemployment.png \"[Map]\")"},"response":[],"_postman_id":"3d7cceb6-6986-41d7-a117-7eb5898cf599"},{"name":"Air Quality","event":[{"listen":"test","script":{"id":"8946bf5a-ac5c-4b32-8ecd-ed339a964c2d","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<script src=\"https://unpkg.com/topojson@3\"></script>","<style>","body { ","    background-color: white;","}",".title { ","    font-size: 30px;","    font-family: \"Roboto\", sans-serif;","    text-align: center;","}",".container {","    display: flex;","    flex-direction: row;","    justify-content: center;","    align-items: center;","}",".directions {","    font-size: 18px;","    font-family: \"Roboto\", sans-serif;","    padding-left: 20px;","}","#backgroundRectangle {","    width: 100%;","    height: 100%;","    fill: #f5f5f5;","}",".projectionOutline{","    fill: #2f434a;","    stroke: #4e5f66","}",".tooltip {","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","}","","</style>","<h1 class=\"title\"></h1>","<div class=\"container\">","<div id=\"map\"></div>","<p class=\"directions\">Draw mouse to zoom in onto section. Double click to zoom out</p>","</div>","<script>","","    pm.getData( function(err, value) {","        d3.select(\".title\").html(value.title);","        initVisualization(value.data);","    });","","    // Function call that contains our visualization, necessary because we are loading an external map file","    async function initVisualization(pmInput){","        const response = await fetch(\"https://unpkg.com/world-atlas@1.1.4/world/110m.json\");","        response.json().then( data => {","            generateVisualization(pmInput, data);","        });","    }","    ","    // Generates d3 map visualization using an external map file and user-inputed data","    // Utilizes d3.zoom and d3.brush","    function generateVisualization(pmInput, mapData){","        // Set the dimensions and margins of the graph","        const margins = {top: 20, left: 10, right: 20, bottom: 20};","        const width = 800 - margins.top - margins.bottom;","        const height = 500 - margins.left - margins.right;","        ","        // Initializes d3.zoom to cover entire map SVG","        const zoom = d3.zoom()","            .scaleExtent([1,40])","            .translateExtent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"zoom\", () =>{","                d3.select(\"#map-group\").attr(\"transform\", d3.event.transform)","            })","        ","        // Initiaizes d3.brush to cover entire map SVG and zoom in on the selected window","        let brush = d3.brush()","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"end\", () => {","                let extent = d3.event.selection;","                if(extent){","                    d3.select(\"#map-group\").call(brush.move, null);","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( (width + margins.left + margins.right)/ (extent[1][0]-extent[0][0]) )","                        .translate( -extent[0][0], -extent[0][1] ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => { return 2 * d.circleSize * (extent[1][0]-extent[0][0])/(width + margins.left + margins.right);} )","                        .attr(\"stroke-width\", (extent[1][0]-extent[0][0])/(width + margins.left + margins.right));","                    ","                }","                else{","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( 1 )","                        .translate( 0,0 ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => d.circleSize)","                        .attr(\"stroke-width\", 1);","                }","            });","        ","        // Set the dimensions and margins of the graph","        let svg = d3.select(\"#map\")","          .append(\"svg\")  ","            .attr(\"width\", width + margins.left + margins.right)","            .attr(\"height\", height + margins.top + margins.bottom)","        svg.append(\"rect\")","            .attr(\"id\", \"backgroundRectangle\");","        svg = svg.append(\"g\")","            .attr(\"id\", \"map-group\")","            .call(brush);","        ","        // Draws Mercator projection of map onto SVG using the inputted map file","        let projection = d3.geoMercator().translate([400, 350]).scale(125);","        var mapGroup = svg.append(\"g\");","        let mapPath = d3.geoPath().projection(projection);","        mapGroup.selectAll(\"path\")","            .data(topojson.feature(mapData, mapData.objects.countries).features)","            .enter()","          .append(\"path\")","            .attr(\"d\", mapPath)","            .attr(\"class\", \"projectionOutline\");","        ","        // Calculate offset for tooltip","        const rect = document.getElementById(\"map\").getBoundingClientRect();","        const offset = {top: rect.top, left: rect.left};","        ","        // Create hover tooltip","        let tooltip = d3.select(\"#map\").append(\"div\")","            .attr(\"class\", \"tooltip\");","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(\"Longitude: <b>\" + d.long + \"</b><br/>Latitude: <b>\" + d.lat + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15 - offset.left) + \"px\")","                .style(\"top\", (d3.event.pageY - 20 - offset.top) + \"px\")","              .transition()","                .duration(200)      // ms","                .style(\"opacity\", 0.9)","            d3.select(this)","                .style(\"stroke\", \"white\")","                .style(\"opacity\", 1);","        };","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","            d3.select(this)","                .style(\"stroke\", \"none\")","                .style(\"opacity\", 0.6);","        };","        ","        // Appends points from user-inputted data onto map","        svg.selectAll(\"circle\")","            .data(pmInput)","            .enter()","          .append(\"circle\")","            .attr(\"r\", 0)","            .style(\"fill\", d => d.color)","            .attr(\"cx\", d => projection([d.long, d.lat])[0])","            .attr(\"cy\",  d => projection([d.long, d.lat])[1])","            .style(\"opacity\", 0.6)","            .on(\"mouseover\", tipMouseover)","            .on(\"mouseout\", tipMouseout)","          .transition(d3.transition().duration(1000).ease(d3.easeQuadOut))","            .attr(\"r\", d => d.circleSize)","    }","</script>","`;","","var response = pm.response.json();","let parsedData = [];","","//data parsing","for (const d of response.data){","    let tempEntry = {};","    tempEntry.lat = d.lat;","    tempEntry.long = d.lon;","    tempEntry.circleSize = 3;","    tempEntry.color = \"#F09D51\";","    parsedData.push(tempEntry);","}","","pm.visualizer.set(template, {","    data: parsedData,","    title: \"Air Quality\"","} );",""],"type":"text/javascript"}}],"id":"248d8f87-4599-446c-bac2-508559a41465","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":{"raw":"https://api.waqi.info/map/bounds/?latlng=39.379436,116.091230,40.235643,116.784382&token=demo","protocol":"https","host":["api","waqi","info"],"path":["map","bounds",""],"query":[{"key":"latlng","value":"39.379436,116.091230,40.235643,116.784382"},{"key":"token","value":"demo"}]},"description":"Visualizes air quality on a zoomable map as circles with a radius corresponding to each station's air quality and hoverable tags over each circle"},"response":[],"_postman_id":"248d8f87-4599-446c-bac2-508559a41465"},{"name":"UFO Sightings","event":[{"listen":"test","script":{"id":"a4a2d814-501f-42b7-b206-5fdb0a811658","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<script src=\"https://unpkg.com/topojson@3\"></script>","<style>","body { ","    background-color: white;","}",".title { ","    font-size: 30px;","    font-family: \"Roboto\", sans-serif;","    text-align: center;","}",".container {","    display: flex;","    flex-direction: row;","    justify-content: center;","    align-items: center;","}",".directions {","    font-size: 18px;","    font-family: \"Roboto\", sans-serif;","    padding-left: 20px;","}","#backgroundRectangle {","    width: 100%;","    height: 100%;","    fill: #f5f5f5;","}",".projectionOutline{","    fill: #2f434a;","    stroke: #4e5f66","}",".tooltip {","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","}","","</style>","<h1 class=\"title\"></h1>","<div class=\"container\">","<div id=\"map\"></div>","<p class=\"directions\">Draw mouse to zoom in onto section. Double click to zoom out</p>","</div>","<script>","","    pm.getData( function(err, value) {","        d3.select(\".title\").html(value.title);","        initVisualization(value.data);","    });","","    // Function call that contains our visualization, necessary because we are loading an external map file","    async function initVisualization(pmInput){","        const response = await fetch(\"https://unpkg.com/world-atlas@1.1.4/world/110m.json\");","        response.json().then( data => {","            generateVisualization(pmInput, data);","        });","    }","    ","    // Generates d3 map visualization using an external map file and user-inputed data","    // Utilizes d3.zoom and d3.brush","    function generateVisualization(pmInput, mapData){","        // Set the dimensions and margins of the graph","        const margins = {top: 20, left: 10, right: 20, bottom: 20};","        const width = 800 - margins.top - margins.bottom;","        const height = 500 - margins.left - margins.right;","        ","        // Initializes d3.zoom to cover entire map SVG","        const zoom = d3.zoom()","            .scaleExtent([1,40])","            .translateExtent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"zoom\", () =>{","                d3.select(\"#map-group\").attr(\"transform\", d3.event.transform)","            })","        ","        // Initiaizes d3.brush to cover entire map SVG and zoom in on the selected window","        let brush = d3.brush()","            .extent([[0,0],[width + margins.left + margins.right, height + margins.top + margins.bottom]])","            .on(\"end\", () => {","                let extent = d3.event.selection;","                if(extent){","                    d3.select(\"#map-group\").call(brush.move, null);","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( (width + margins.left + margins.right)/ (extent[1][0]-extent[0][0]) )","                        .translate( -extent[0][0], -extent[0][1] ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => { return 2 * d.circleSize * (extent[1][0]-extent[0][0])/(width + margins.left + margins.right);} )","                        .attr(\"stroke-width\", (extent[1][0]-extent[0][0])/(width + margins.left + margins.right));","                    ","                }","                else{","                    d3.select(\"#map-group\").transition().duration(1500).call(zoom.transform, d3.zoomIdentity","                        .scale( 1 )","                        .translate( 0,0 ));","                    d3.selectAll(\"circle\").transition().delay(750).duration(1000)","                        .attr(\"r\", d => d.circleSize)","                        .attr(\"stroke-width\", 1);","                }","            });","        ","        // Set the dimensions and margins of the graph","        let svg = d3.select(\"#map\")","          .append(\"svg\")  ","            .attr(\"width\", width + margins.left + margins.right)","            .attr(\"height\", height + margins.top + margins.bottom)","        svg.append(\"rect\")","            .attr(\"id\", \"backgroundRectangle\");","        svg = svg.append(\"g\")","            .attr(\"id\", \"map-group\")","            .call(brush);","        ","        // Draws Mercator projection of map onto SVG using the inputted map file","        let projection = d3.geoMercator().translate([400, 350]).scale(125);","        var mapGroup = svg.append(\"g\");","        let mapPath = d3.geoPath().projection(projection);","        mapGroup.selectAll(\"path\")","            .data(topojson.feature(mapData, mapData.objects.countries).features)","            .enter()","          .append(\"path\")","            .attr(\"d\", mapPath)","            .attr(\"class\", \"projectionOutline\");","        ","        // Calculate offset for tooltip","        const rect = document.getElementById(\"map\").getBoundingClientRect();","        const offset = {top: rect.top, left: rect.left};","        ","        // Create hover tooltip","        let tooltip = d3.select(\"#map\").append(\"div\")","            .attr(\"class\", \"tooltip\");","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(\"Longitude: <b>\" + d.long + \"</b><br/>Latitude: <b>\" + d.lat + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15 - offset.left) + \"px\")","                .style(\"top\", (d3.event.pageY - 20 - offset.top) + \"px\")","              .transition()","                .duration(200)      // ms","                .style(\"opacity\", 0.9)","            d3.select(this)","                .style(\"stroke\", \"white\")","                .style(\"opacity\", 1);","        };","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","            d3.select(this)","                .style(\"stroke\", \"none\")","                .style(\"opacity\", 0.6);","        };","        ","        // Appends points from user-inputted data onto map","        svg.selectAll(\"circle\")","            .data(pmInput)","            .enter()","          .append(\"circle\")","            .attr(\"r\", 0)","            .style(\"fill\", d => d.color)","            .attr(\"cx\", d => projection([d.long, d.lat])[0])","            .attr(\"cy\",  d => projection([d.long, d.lat])[1])","            .style(\"opacity\", 0.6)","            .on(\"mouseover\", tipMouseover)","            .on(\"mouseout\", tipMouseout)","          .transition(d3.transition().duration(1000).ease(d3.easeQuadOut))","            .attr(\"r\", d => d.circleSize)","    }","</script>","`;","","var response = pm.response.json();","let parsedData = [];","","//data parsing","for (let sighting of response.sightings){","    let tempEntry = {};","    tempEntry.lat = sighting.loc[1];","    tempEntry.long = sighting.loc[0];","    tempEntry.circleSize = 3;","    tempEntry.color = \"#F09D51\";","    parsedData.push(tempEntry);","}","","pm.visualizer.set(template, {","    data: parsedData,","    title: \"UFO Sightings\"","} );"],"type":"text/javascript"}}],"id":"bf10fc76-565a-4be6-b2c0-137dc370b9f5","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 reported UFO sightings with hoverable tags over each circle\n\n<br>\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\n<br>\n\n_Sample Map_\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/map/map_ufo_sightings.png \"[Map]\")"},"response":[],"_postman_id":"bf10fc76-565a-4be6-b2c0-137dc370b9f5"}]}