{"info":{"_postman_id":"d2486b17-0fc6-4ff3-8045-800623e5c02b","name":"Visualizer Feature Templates","description":"A collection of various API requests to demonstrate the data visualization feature, created by student developers at Berkeley CodeBase. If you'd like to import any particular visualization separately, they are individually published and linked in the two subfolders below.\n\n<br>\n\nCurrently, it contains 3 requests for bar chart, 3 requests for scatter plot, and 3 requests for table. They utilize various public APIs ranging from Spotify to the New York Times to UFO sightings, and are based on the JavaScript D3 visualization framework. \n\n<br>\n\nEach template is versatility tested and standardized to minimize changes to the code outside of custom data parsing. Feel free to use these as templates for your own visualizations!\n\n<br>\n\nHere are some examples of a scatter plot and tree!\n\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/tree/Twitter.png \"[Tree]\")\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/scatter-plot/WorldTradingData.PNG \"[Scatter Plot]\")","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json"},"item":[{"name":"Basic Templates","item":[{"name":"Bar Chart","item":[{"name":"Open Brewery DB","event":[{"listen":"test","script":{"id":"d501f269-f85c-4fbc-9095-be8fa6567046","exec":["/* VISUALIZATION TEMPLATE */","var template = `","<script src=\"https://d3js.org/d3.v5.js\"></script>","<div id=\"barChart\"></div>","<style>","    #barChart {","        width:700px;","        background-color: #F5F5F5;","    }","    .grid line {","        stroke: lightgrey;","        shape-rendering: crispEdges","    }","</style>","<script>","","    pm.getData( function(err, value){ ","        const xAxisLabel = value.xAxisLabel;","        const yAxisLabel = value.yAxisLabel;","        const title = value.title;","        const data = value.data;","        ","        var margin = {top: 75, right: 200, bottom: 60, left: 90},","            width = 650 - margin.left - margin.right,","            height = 450 - margin.top - margin.bottom;","        ","        // set the ranges","        var x = d3.scaleBand()","            .domain(data.map(function(d){return d.key;}))","            .range([0, width])","            .padding(0.1);","        var y = d3.scaleLinear()","            .domain([0, d3.max(data, function(d){return d.frequency;})])","            .range([height, 0]);","        const colorScale = d3.scaleOrdinal(d3.schemeCategory10);","        ","        // append the svg object to the body of the page","        // append a 'group' element to 'svg'","        // moves the 'group' element to the top left margin","        var svg = d3.select(\"#barChart\").append(\"svg\")","            .attr(\"width\", width + margin.left + margin.right)","            .attr(\"height\", height + margin.top + margin.bottom)","            .append(\"g\")","            .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","        ","        function make_y_gridlines() {","            return d3.axisLeft(y)","        // \t    .ticks(d3.max(data, function(d){return d.frequency;}));","                .ticks(10);","        }","      ","        svg.append(\"g\")","            .attr(\"class\",\"grid\")","      \t\t.call(make_y_gridlines()","                .tickSize(-width)","                .tickFormat(\"\")","            );","        ","        // create hover tooltip","        let tooltip = d3.select(\"#barChart\").append(\"div\")","            .attr(\"class\", \"tooltip\")","            .style(\"position\", \"absolute\")","            .style(\"font-size\", \"12px\")","            .style(\"width\", \"auto\")","            .style(\"height\", \"auto\")","            .style(\"pointer-events\", \"none\")","            .style(\"background-color\", \"white\")","            .style(\"padding\", \"3px\")","            .style(\"opacity\", 0);","        ","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(xAxisLabel + \": <b>\" + d.key + \"</b><br/>\" + yAxisLabel + \": <b>\" + d.frequency + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15) + \"px\")","                .style(\"top\", (d3.event.pageY - 20) + \"px\")","            .transition()","                .duration(200)  // in ms","                .style(\"opacity\", 0.9)","        };","        ","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","        };","            ","        // append the rectangles for the bar chart","        svg.selectAll(\".bar\")","        .data(data)","        .enter().append(\"rect\")","            .on(\"mouseover\", tipMouseover)","            .on(\"mouseout\", tipMouseout)","        .attr(\"class\", \"bar\")","        .attr(\"x\", (function(d) { return x(d.key); }))","        .attr(\"width\", x.bandwidth())","        .attr(\"y\", (function(d) { return y(d.frequency); }))","        .attr(\"height\", (function(d) { return height - y(d.frequency); }))","        .style('fill', (d, i) => colorScale(i));","        ","        // add the x Axis","        svg.append(\"g\")","        .attr(\"transform\", \"translate(0,\" + height + \")\");","    ","        // add the y-axis","        svg.append(\"g\")","        .call(d3.axisLeft(y));","        var fontSize = 24;","        var legendSpace = 25;","        var legendX = 475;","        var legendY = 30;","        var legendTitle = xAxisLabel;","        var legend = svg.append('g')","    \t\t.attr('class', 'legend')","    \t\t.attr('transform', function(d, i) { return \"translate(\" + legendX + \", \" + legendY + \")\"; });","    ","        // add legend title","    \tlegend.append(\"text\")","            .attr(\"fill\", d =>\"#00000\")","            .style(\"font-size\", \"18px\")","    \t\t.text(legendTitle);","    \t\t","    \tvar legendItems = legend.selectAll(\"g\")","    \t\t.data(data).enter()","    \t\t\t.append(\"g\")","    \t\t\t\t.attr(\"class\", \"item\")","    \t\t\t\t.attr(\"transform\", function(d, i){ return \"translate(-30, \" + (i*legendSpace + fontSize) + \")\"; });","    \t","    \tlegendItems.append(\"circle\")","    \t\t.attr(\"r\", 5)","    \t\t.attr(\"fill\", (d, i) => colorScale(i))","    \t","    \tlegendItems.append(\"text\")","            .attr(\"transform\", function(d){ return \"translate(\" + legendSpace + \", 0)\"; })","            .attr(\"fill\", d =>\"#00000\")","            .attr(\"alignment-baseline\",\"middle\")","    \t\t.text(function(d) { return d.key; });","    \t","    \t// create axes","    \tsvg.append(\"text\")","                .attr(\"transform\", \"translate(\" + (width/2) + \" ,\" + (height + 32) + \")\")","                .style(\"text-anchor\", \"middle\")","                .text(xAxisLabel);","                ","        svg.append(\"text\")","            .attr(\"transform\", \"rotate(-90)\")","            .attr(\"y\", 15 - margin.left)","            .attr(\"x\", 0 - (height/2))","            .attr(\"dy\", \"1em\")","            .style(\"text-anchor\", \"middle\")","            .text(yAxisLabel);","        ","        // create graph title","        svg.append(\"text\")","            .attr(\"transform\", \"translate(\" + (width/2) +\" ,\" + -30 + \")\")","            .attr(\"font-weight\", 600)","            .text(title);","    });","","</script>`;","","var response = pm.response.json();","","/* DATA PARSING */","","// Construct a map from each city to the number of occurrences","let cityFrequency = {};","let city = \"\";","for (let brewery of response) {","    city = brewery.city;","    if (city in cityFrequency) {","        cityFrequency[city] += 1;","    } else {","        cityFrequency[city] = 1;","    }","}","","// Number of bars to be displayed in bar chart","const numBars = 8;","","// Function to return the name of the city with the maximum value","findMax = array => array.reduce((a, b) => cityFrequency[a] > cityFrequency[b] ? a : b, cities[0]);","","// Find the numBars cities with the most occurrences","let cities = Object.keys(cityFrequency);","let maxCities = {};","if (cities.length < numBars) {","    maxCities = cityFrequency;","} else {","    let maxCity = \"\";","    for (let i = 0; i < numBars; i++) {","        cities = Object.keys(cityFrequency);","        maxCity = findMax(cities);","        maxCities[maxCity] = cityFrequency[maxCity];","        delete cityFrequency[maxCity];","    }","}","","","// Format into the final structure, an array of {key: string, frequency: int} objects","const resList = [];","for (let [c, f] of Object.entries(maxCities)) {","    resList.push({","   \"key\": c,","   \"frequency\": f","    });","}","","/* SET LABELS */","const xAxis = \"Cities\";","const yAxis = \"Number of Bars\";","const title = \"Number of Bars per City\";","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","    xAxisLabel: xAxis,","    yAxisLabel: yAxis,","    title: title,","    data: resList","} );","",""],"type":"text/javascript"}}],"id":"884ee004-6c81-4500-b413-ab7d7099b2b9","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"auth":{"type":"basic","basic":{}},"method":"GET","header":[],"url":{"raw":"https://api.openbrewerydb.org/breweries?by_state=california","protocol":"https","host":["api","openbrewerydb","org"],"path":["breweries"],"query":[{"key":"by_state","value":"california"}]},"description":"Displays the `n` cities with the largest number of bars (breweries) as a bar chart. `n` is specified by the user, and counted from the JSON response. \n\n_Sample JSON response_\n```\n[\n    {\n        \"id\": 281,\n        \"name\": \"7 Sisters Brewing Co\",\n        \"brewery_type\": \"brewpub\",\n        \"street\": \"181 Tank Farm Rd Ste 110\",\n        \"city\": \"San Luis Obispo\",\n        \"state\": \"California\",\n        \"postal_code\": \"93401-7082\",\n        \"country\": \"United States\",\n        \"longitude\": \"-120.670637530612\",\n        \"latitude\": \"35.2467277959184\",\n        \"phone\": \"8058687133\",\n        \"website_url\": \"http://www.7sistersbrewing.com\",\n        \"updated_at\": \"2018-08-23T23:23:55.334Z\",\n        \"tag_list\": []\n    },\n    {\n        \"id\": 286,\n        \"name\": \"Abnormal Beer Company\",\n        \"brewery_type\": \"micro\",\n        \"street\": \"16990 Via Tazon Ste 123\",\n        \"city\": \"San Diego\",\n        \"state\": \"California\",\n        \"postal_code\": \"92127-1649\",\n        \"country\": \"United States\",\n        \"longitude\": \"-117.08575\",\n        \"latitude\": \"33.02391\",\n        \"phone\": \"8586182463\",\n        \"website_url\": \"http://abnormalbeer.co\",\n        \"updated_at\": \"2018-08-23T23:24:00.025Z\",\n        \"tag_list\": []\n    },\n    ...\n]\n```\n\n_Sample Bar Chart_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/bar-chart/OpenBrewery.PNG \"[Bar Chart]\")"},"response":[],"_postman_id":"884ee004-6c81-4500-b413-ab7d7099b2b9"},{"name":"Yelp","event":[{"listen":"test","script":{"id":"c42486b0-3a5e-4c1e-a038-893f731cc5c9","exec":["/* VISUALIZATION TEMPLATE */","var template = `","<script src=\"https://d3js.org/d3.v5.js\"></script>","<div id=\"barChart\"></div>","<style>","    #barChart {","        width:700px;","        background-color: #F5F5F5;","    }","    .grid line {","        stroke: lightgrey;","        shape-rendering: crispEdges","    }","</style>","<script>","","    pm.getData( function(err, value){ ","        const xAxisLabel = value.xAxisLabel;","        const yAxisLabel = value.yAxisLabel;","        const title = value.title;","        const data = value.data;","        ","        var margin = {top: 75, right: 200, bottom: 60, left: 90},","            width = 650 - margin.left - margin.right,","            height = 450 - margin.top - margin.bottom;","        ","        // set the ranges","        var x = d3.scaleBand()","            .domain(data.map(function(d){return d.key;}))","            .range([0, width])","            .padding(0.1);","        var y = d3.scaleLinear()","            .domain([0, d3.max(data, function(d){return d.frequency;})])","            .range([height, 0]);","        const colorScale = d3.scaleOrdinal(d3.schemeCategory10);","        ","        // append the svg object to the body of the page","        // append a 'group' element to 'svg'","        // moves the 'group' element to the top left margin","        var svg = d3.select(\"#barChart\").append(\"svg\")","            .attr(\"width\", width + margin.left + margin.right)","            .attr(\"height\", height + margin.top + margin.bottom)","            .append(\"g\")","            .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","        ","        function make_y_gridlines() {","            return d3.axisLeft(y)","        // \t    .ticks(d3.max(data, function(d){return d.frequency;}));","                .ticks(10);","        }","      ","        svg.append(\"g\")","            .attr(\"class\",\"grid\")","      \t\t.call(make_y_gridlines()","                .tickSize(-width)","                .tickFormat(\"\")","            );","        ","        // create hover tooltip","        let tooltip = d3.select(\"#barChart\").append(\"div\")","            .attr(\"class\", \"tooltip\")","            .style(\"position\", \"absolute\")","            .style(\"font-size\", \"12px\")","            .style(\"width\", \"auto\")","            .style(\"height\", \"auto\")","            .style(\"pointer-events\", \"none\")","            .style(\"background-color\", \"white\")","            .style(\"padding\", \"3px\")","            .style(\"opacity\", 0);","        ","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(xAxisLabel + \": <b>\" + d.key + \"</b><br/>\" + yAxisLabel + \": <b>\" + d.frequency + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15) + \"px\")","                .style(\"top\", (d3.event.pageY - 20) + \"px\")","            .transition()","                .duration(200)  // in ms","                .style(\"opacity\", 0.9)","        };","        ","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","        };","            ","        // append the rectangles for the bar chart","        svg.selectAll(\".bar\")","        .data(data)","        .enter().append(\"rect\")","            .on(\"mouseover\", tipMouseover)","            .on(\"mouseout\", tipMouseout)","        .attr(\"class\", \"bar\")","        .attr(\"x\", (function(d) { return x(d.key); }))","        .attr(\"width\", x.bandwidth())","        .attr(\"y\", (function(d) { return y(d.frequency); }))","        .attr(\"height\", (function(d) { return height - y(d.frequency); }))","        .style('fill', (d, i) => colorScale(i));","        ","        // add the x Axis","        svg.append(\"g\")","        .attr(\"transform\", \"translate(0,\" + height + \")\");","    ","        // add the y-axis","        svg.append(\"g\")","        .call(d3.axisLeft(y));","        var fontSize = 24;","        var legendSpace = 25;","        var legendX = 475;","        var legendY = 30;","        var legendTitle = xAxisLabel;","        var legend = svg.append('g')","    \t\t.attr('class', 'legend')","    \t\t.attr('transform', function(d, i) { return \"translate(\" + legendX + \", \" + legendY + \")\"; });","    ","        // add legend title","    \tlegend.append(\"text\")","            .attr(\"fill\", d =>\"#00000\")","            .style(\"font-size\", \"18px\")","    \t\t.text(legendTitle);","    \t\t","    \tvar legendItems = legend.selectAll(\"g\")","    \t\t.data(data).enter()","    \t\t\t.append(\"g\")","    \t\t\t\t.attr(\"class\", \"item\")","    \t\t\t\t.attr(\"transform\", function(d, i){ return \"translate(-30, \" + (i*legendSpace + fontSize) + \")\"; });","    \t","    \tlegendItems.append(\"circle\")","    \t\t.attr(\"r\", 5)","    \t\t.attr(\"fill\", (d, i) => colorScale(i))","    \t","    \tlegendItems.append(\"text\")","            .attr(\"transform\", function(d){ return \"translate(\" + legendSpace + \", 0)\"; })","            .attr(\"fill\", d =>\"#00000\")","            .attr(\"alignment-baseline\",\"middle\")","    \t\t.text(function(d) { return d.key; });","    \t","    \t// create axes","    \tsvg.append(\"text\")","                .attr(\"transform\", \"translate(\" + (width/2) + \" ,\" + (height + 32) + \")\")","                .style(\"text-anchor\", \"middle\")","                .text(xAxisLabel);","                ","        svg.append(\"text\")","            .attr(\"transform\", \"rotate(-90)\")","            .attr(\"y\", 15 - margin.left)","            .attr(\"x\", 0 - (height/2))","            .attr(\"dy\", \"1em\")","            .style(\"text-anchor\", \"middle\")","            .text(yAxisLabel);","        ","        // create graph title","        svg.append(\"text\")","            .attr(\"transform\", \"translate(\" + (width/2) +\" ,\" + -30 + \")\")","            .attr(\"font-weight\", 600)","            .text(title);","    });","","</script>`;","","var response = pm.response.json();","","/* DATA PARSING */","","// Construct a map from each price range to the number of occurrences","const priceFrequency = response.businesses","    .reduce((acc, cur) => {","        if (!acc[cur.price]){","            acc[cur.price] = 0;","        }","        acc[cur.price]++;","        return acc;","    },{}",");","","// Number of bars to be displayed in bar chart","const numBars = 5;","","// Format into the final structure, an array of {key: string, frequency: int} objects","const resList = [];","for (let [c, f] of Object.entries(priceFrequency)) {","    resList.push({","       \"key\": c,","       \"frequency\": f","    });","}","","resList.sort((a,b) => a.key.length - b.key.length);","","/* SET LABELS */","const xAxis = \"Price\";","const yAxis = \"Number of Businesses\";","const title = \"Prices of Businesses in SF\";","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","    xAxisLabel: xAxis,","    yAxisLabel: yAxis,","    title: title,","    data: resList","});",""],"type":"text/javascript"}}],"id":"01b295ae-cea1-498d-9e75-d45bbe2f9a04","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"auth":{"type":"bearer","bearer":{"token":"{{YELP_API_KEY}}"}},"method":"GET","header":[],"url":{"raw":"https://api.yelp.com/v3/businesses/search?location=San Francisco","protocol":"https","host":["api","yelp","com"],"path":["v3","businesses","search"],"query":[{"key":"location","value":"San Francisco"}]},"description":"Displays the number of businesses at four price points in San Francisco in a bar chart. More \"$\" signs indicates a pricier business, as determined by Yelp.\n\n_Obtaining API Keys_\n- Sign up for an account on [https://www.yelp.com/developers](https://www.yelp.com/developers).\n- Follow instructions in [this link](https://www.yelp.com/developers/documentation/v3/authentication) to get an API key\n- Create an environment and add the YELP_API_KEY environment variable\n\n_Sample JSON response_\n```\n{\n    \"businesses\": [\n        {\n            \"id\": \"wGl_DyNxSv8KUtYgiuLhmA\",\n            \"alias\": \"bi-rite-creamery-san-francisco\",\n            \"name\": \"Bi-Rite Creamery\",\n            \"image_url\": \"https://s3-media2.fl.yelpcdn.com/bphoto/iPNJKlOQ7-eyqa4Yv2r2BA/o.jpg\",\n            \"is_closed\": false,\n            \"url\": \"https://www.yelp.com/biz/bi-rite-creamery-san-francisco?adjust_creative=5WKfXTzNXnjF2gWR8ZWgyg&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=5WKfXTzNXnjF2gWR8ZWgyg\",\n            \"review_count\": 9537,\n            \"categories\": [\n                {\n                    \"alias\": \"icecream\",\n                    \"title\": \"Ice Cream & Frozen Yogurt\"\n                },\n                {\n                    \"alias\": \"bakeries\",\n                    \"title\": \"Bakeries\"\n                }\n            ],\n            \"rating\": 4.5,\n            \"coordinates\": {\n                \"latitude\": 37.761591,\n                \"longitude\": -122.425717\n            },\n            \"transactions\": [],\n            \"price\": \"$\",\n            \"location\": {\n                \"address1\": \"3692 18th St\",\n                \"address2\": null,\n                \"address3\": \"\",\n                \"city\": \"San Francisco\",\n                \"zip_code\": \"94110\",\n                \"country\": \"US\",\n                \"state\": \"CA\",\n                \"display_address\": [\n                    \"3692 18th St\",\n                    \"San Francisco, CA 94110\"\n                ]\n            },\n            \"phone\": \"+14156265600\",\n            \"display_phone\": \"(415) 626-5600\",\n            \"distance\": 946.3867385272524\n        },\n        {\n            \"id\": \"lJAGnYzku5zSaLnQ_T6_GQ\",\n            \"alias\": \"brendas-french-soul-food-san-francisco-5\",\n            \"name\": \"Brenda's French Soul Food\",\n            \"image_url\": \"https://s3-media3.fl.yelpcdn.com/bphoto/sNIJnePGDenUOyewsD8tLg/o.jpg\",\n            \"is_closed\": false,\n            \"url\": \"https://www.yelp.com/biz/brendas-french-soul-food-san-francisco-5?adjust_creative=5WKfXTzNXnjF2gWR8ZWgyg&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=5WKfXTzNXnjF2gWR8ZWgyg\",\n            \"review_count\": 10819,\n            \"categories\": [\n                {\n                    \"alias\": \"breakfast_brunch\",\n                    \"title\": \"Breakfast & Brunch\"\n                },\n                {\n                    \"alias\": \"southern\",\n                    \"title\": \"Southern\"\n                },\n                {\n                    \"alias\": \"cajun\",\n                    \"title\": \"Cajun/Creole\"\n                }\n            ],\n            \"rating\": 4.0,\n            \"coordinates\": {\n                \"latitude\": 37.7829016035273,\n                \"longitude\": -122.419043442957\n            },\n            \"transactions\": [],\n            \"price\": \"$$\",\n            \"location\": {\n                \"address1\": \"652 Polk St\",\n                \"address2\": \"\",\n                \"address3\": \"\",\n                \"city\": \"San Francisco\",\n                \"zip_code\": \"94102\",\n                \"country\": \"US\",\n                \"state\": \"CA\",\n                \"display_address\": [\n                    \"652 Polk St\",\n                    \"San Francisco, CA 94102\"\n                ]\n            },\n            \"phone\": \"+14153458100\",\n            \"display_phone\": \"(415) 345-8100\",\n            \"distance\": 2885.38913097158\n        },\n    ...\n    ]\n}\n```\n\n_Sample Bar Chart_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/bar-chart/Yelp.PNG \"[Bar Chart]\")"},"response":[],"_postman_id":"01b295ae-cea1-498d-9e75-d45bbe2f9a04"},{"name":"School Digger","event":[{"listen":"test","script":{"id":"2d2525b1-53d4-4c8f-81d9-0b00bb948462","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.js\"></script>","<div id=\"barChart\"></div>","<style>","    #barChart {","        width:700px;","        background-color: #F5F5F5;","    }","    .grid line {","        stroke: lightgrey;","        shape-rendering: crispEdges","    }","</style>","<script>","","    pm.getData( function(err, value){ ","        const xAxisLabel = value.xAxisLabel;","        const yAxisLabel = value.yAxisLabel;","        const title = value.title;","        const data = value.data;","        ","        var margin = {top: 75, right: 200, bottom: 60, left: 90},","            width = 650 - margin.left - margin.right,","            height = 450 - margin.top - margin.bottom;","        ","        // set the ranges","        var x = d3.scaleBand()","            .domain(data.map(function(d){return d.key;}))","            .range([0, width])","            .padding(0.1);","        var y = d3.scaleLinear()","            .domain([0, d3.max(data, function(d){return d.frequency;})])","            .range([height, 0]);","        const colorScale = d3.scaleOrdinal(d3.schemeCategory10);","        ","        // append the svg object to the body of the page","        // append a 'group' element to 'svg'","        // moves the 'group' element to the top left margin","        var svg = d3.select(\"#barChart\").append(\"svg\")","            .attr(\"width\", width + margin.left + margin.right)","            .attr(\"height\", height + margin.top + margin.bottom)","            .append(\"g\")","            .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","        ","        function make_y_gridlines() {","            return d3.axisLeft(y)","        // \t    .ticks(d3.max(data, function(d){return d.frequency;}));","                .ticks(10);","        }","      ","        svg.append(\"g\")","            .attr(\"class\",\"grid\")","      \t\t.call(make_y_gridlines()","                .tickSize(-width)","                .tickFormat(\"\")","            );","        svg.selectAll(\".grid path\").remove();","        ","        // create hover tooltip","        let tooltip = d3.select(\"#barChart\").append(\"div\")","            .attr(\"class\", \"tooltip\")","            .style(\"position\", \"absolute\")","            .style(\"font-size\", \"12px\")","            .style(\"width\", \"auto\")","            .style(\"height\", \"auto\")","            .style(\"pointer-events\", \"none\")","            .style(\"background-color\", \"white\")","            .style(\"padding\", \"3px\")","            .style(\"opacity\", 0);","        ","        // tooltip mouseover event handler","        let tipMouseover = function(d){","            tooltip.html(xAxisLabel + \": <b>\" + d.key + \"</b><br/>\" + yAxisLabel + \": <b>\" + d.frequency + \"</b>\")","                .style(\"left\", (d3.event.pageX + 15) + \"px\")","                .style(\"top\", (d3.event.pageY - 20) + \"px\")","            .transition()","                .duration(200)  // in ms","                .style(\"opacity\", 0.9)","        };","        ","        // tooltip mouseout event handler","        let tipMouseout = function(d){","            tooltip.transition()","                .duration(300)","                .style(\"opacity\", 0);","        };","            ","        // append the rectangles for the bar chart","        svg.selectAll(\".bar\")","        .data(data)","        .enter().append(\"rect\")","            .on(\"mouseover\", tipMouseover)","            .on(\"mouseout\", tipMouseout)","        .attr(\"class\", \"bar\")","        .attr(\"x\", (function(d) { return x(d.key); }))","        .attr(\"width\", x.bandwidth())","        .attr(\"y\", (function(d) { return y(d.frequency); }))","        .attr(\"height\", (function(d) { return height - y(d.frequency); }))","        .style('fill', (d, i) => colorScale(i));","        ","        // add the x Axis","        svg.append(\"g\")","        .attr(\"transform\", \"translate(0,\" + height + \")\");","    ","        // add the y-axis","        svg.append(\"g\")","        .call(d3.axisLeft(y));","        var fontSize = 24;","        var legendSpace = 25;","        var legendX = 475;","        var legendY = 0;","        var legendTitle = xAxisLabel;","        var legend = svg.append('g')","    \t\t.attr('class', 'legend')","    \t\t.attr('transform', function(d, i) { return \"translate(\" + legendX + \", \" + legendY + \")\"; });","    ","        // add legend title","    \tlegend.append(\"text\")","            .attr(\"fill\", d =>\"#00000\")","            .style(\"font-size\", \"18px\")","    \t\t.text(legendTitle);","    \t\t","    \tvar legendItems = legend.selectAll(\"g\")","    \t\t.data(data).enter()","    \t\t\t.append(\"g\")","    \t\t\t\t.attr(\"class\", \"item\")","    \t\t\t\t.attr(\"transform\", function(d, i){ return \"translate(-30, \" + (i*legendSpace + fontSize) + \")\"; });","    \t","    \tlegendItems.append(\"circle\")","    \t\t.attr(\"r\", 5)","    \t\t.attr(\"fill\", (d, i) => colorScale(i))","    \t","    \tlegendItems.append(\"text\")","            .attr(\"transform\", function(d){ return \"translate(\" + legendSpace + \", 0)\"; })","            .attr(\"fill\", d =>\"#00000\")","            .attr(\"alignment-baseline\",\"middle\")","    \t\t.text(function(d) { return d.key; });","    \t","    \t// create axes","    \tsvg.append(\"text\")","                .attr(\"transform\", \"translate(\" + (width/2) + \" ,\" + (height + 32) + \")\")","                .style(\"text-anchor\", \"middle\")","                .text(xAxisLabel);","                ","        svg.append(\"text\")","            .attr(\"transform\", \"rotate(-90)\")","            .attr(\"y\", 15 - margin.left)","            .attr(\"x\", 0 - (height/2))","            .attr(\"dy\", \"1em\")","            .style(\"text-anchor\", \"middle\")","            .text(yAxisLabel);","        ","        // create graph title","        svg.append(\"text\")","            .attr(\"transform\", \"translate(\" + (width/2) +\" ,\" + -30 + \")\")","            .attr(\"font-weight\", 600)","            .text(title);","    });","","</script>`;","","var response = pm.response.json();","","/* DATA PARSING */","","// Construct a map from each county to the number of occurrences","let countyFrequency = {};","let county = \"\";","for (let school of response.schoolList) {","    county = school.county.countyName;","    if (county in countyFrequency) {","        countyFrequency[county] += 1;","    } else {","        countyFrequency[county] = 1;","    }","}","","// number of bars to be displayed in bar chart","const numBars = 13;","","// format into the final structure, an array of {key: string, frequency: int} objects","const resList = [];","for (let [c, f] of Object.entries(countyFrequency)) {","    resList.push({","       \"key\": c,","       \"frequency\": f","    });","}","","/* SET LABELS */","const xAxis = \"County\";","const yAxis = \"Number of Schools\";","const title = \"Number of Schools in CA Counties\";","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","    xAxisLabel: xAxis,","    yAxisLabel: yAxis,","    title: title,","    data: resList","});",""],"type":"text/javascript"}}],"id":"2231c8e7-e1c2-45dc-ba01-d32ff7b8193d","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"auth":{"type":"apikey","apikey":{"key":""}},"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":"Displays the `n` counties with the largest number of schools as a bar chart. `n` is specified by the user, and counted from the JSON response. \n\n\n_Sample JSON response_\n```\n{\n  \"numberOfSchools\": 12879,\n  \"numberOfPages\": 258,\n  \"schoolList\": [\n    {\n      \"schoolid\": \"060429013779\",\n      \"schoolName\": \"21st Century Learning Institute\",\n      \"phone\": \"(951) 769-8424\",\n      \"url\": \"https://www.schooldigger.com/go/CA/schools/0429013779/school.aspx\",\n      \"urlCompare\": \"https://www.schooldigger.com/go/CA/schools/0429013779/search.aspx\",\n      \"address\": {\n        \"latLong\": {\n          \"latitude\": 33.934277,\n          \"longitude\": -116.969275\n        },\n        \"street\": \"939 E. 10th St.\",\n        \"city\": \"Beaumont\",\n        \"state\": \"CA\",\n        \"stateFull\": \"California\",\n        \"zip\": \"92223\",\n        \"zip4\": \"1927\",\n        \"cityURL\": \"https://www.schooldigger.com/go/CA/city/Beaumont/search.aspx\",\n        \"zipURL\": \"https://www.schooldigger.com/go/CA/zip/92223/search.aspx\",\n        \"html\": \"939 E. 10th St.<br />Beaumont, CA 92223-1927\"\n      },\n      \"lowGrade\": \"K\",\n      \"highGrade\": \"12\",\n      \"schoolLevel\": \"Other\",\n      \"isCharterSchool\": \"No\",\n      \"isMagnetSchool\": \"No\",\n      \"isVirtualSchool\": \"Yes\",\n      \"isTitleISchool\": \"No\",\n      \"isTitleISchoolwideSchool\": \"No\",\n      \"district\": {\n        \"districtID\": \"0604290\",\n        \"districtName\": \"Beaumont Unified\",\n        \"url\": \"https://www.schooldigger.com/go/CA/district/04290/search.aspx\",\n        \"rankURL\": \"https://www.schooldigger.com/go/CA/districtrank.aspx?finddistrict=04290\"\n      },\n      \"county\": {\n        \"countyName\": \"Riverside\",\n        \"countyURL\": \"https://www.schooldigger.com/go/CA/county/Riverside/search.aspx\"\n      },\n      \"rankHistory\": null,\n      \"rankMovement\": null,\n      \"locationIsWithinBoundary\": null,\n      \"schoolYearlyDetails\": [\n        {\n          \"year\": 2017,\n          \"numberOfStudents\": 87,\n          \"percentFreeDiscLunch\": 42.53,\n          \"percentofAfricanAmericanStudents\": 13.79,\n          \"percentofAsianStudents\": 2.30,\n          \"percentofHispanicStudents\": 41.38,\n          \"percentofIndianStudents\": 0.0,\n          \"percentofPacificIslanderStudents\": 0.0,\n          \"percentofWhiteStudents\": 42.53,\n          \"percentofTwoOrMoreRaceStudents\": 0.0,\n          \"percentofUnspecifiedRaceStudents\": null,\n          \"teachersFulltime\": 2.9,\n          \"pupilTeacherRatio\": 29.1,\n          \"numberofAfricanAmericanStudents\": 12,\n          \"numberofAsianStudents\": 2,\n          \"numberofHispanicStudents\": 36,\n          \"numberofIndianStudents\": 0,\n          \"numberofPacificIslanderStudents\": 0,\n          \"numberofWhiteStudents\": 37,\n          \"numberofTwoOrMoreRaceStudents\": 0,\n          \"numberofUnspecifiedRaceStudents\": null\n        },\n        {\n          \"year\": 2016,\n          \"numberOfStudents\": 73,\n          \"percentFreeDiscLunch\": 52.05,\n          \"percentofAfricanAmericanStudents\": 12.33,\n          \"percentofAsianStudents\": 0.0,\n          \"percentofHispanicStudents\": 45.21,\n          \"percentofIndianStudents\": 0.0,\n          \"percentofPacificIslanderStudents\": 0.0,\n          \"percentofWhiteStudents\": 42.47,\n          \"percentofTwoOrMoreRaceStudents\": 0.0,\n          \"percentofUnspecifiedRaceStudents\": null,\n          \"teachersFulltime\": 3.0,\n          \"pupilTeacherRatio\": 24.3,\n          \"numberofAfricanAmericanStudents\": 9,\n          \"numberofAsianStudents\": 0,\n          \"numberofHispanicStudents\": 33,\n          \"numberofIndianStudents\": 0,\n          \"numberofPacificIslanderStudents\": 0,\n          \"numberofWhiteStudents\": 31,\n          \"numberofTwoOrMoreRaceStudents\": 0,\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      \"schoolid\": \"069999953556\",\n      \"schoolName\": \"9 Fruits Learning Center\",\n      \"phone\": \"(650) 962-1900\",\n      \"url\": \"https://www.schooldigger.com/go/CA/schools/9999953556/school.aspx\",\n      \"urlCompare\": \"https://www.schooldigger.com/go/CA/schools/9999953556/search.aspx\",\n      \"address\": {\n        \"latLong\": {\n          \"latitude\": 37.415424,\n          \"longitude\": -122.099278\n        },\n        \"street\": \"2484 Old Middle Field Way\",\n        \"city\": \"Mountain View\",\n        \"state\": \"CA\",\n        \"stateFull\": \"California\",\n        \"zip\": \"94043\",\n        \"zip4\": \"\",\n        \"cityURL\": \"https://www.schooldigger.com/go/CA/city/Mountain+View/search.aspx\",\n        \"zipURL\": \"https://www.schooldigger.com/go/CA/zip/94043/search.aspx\",\n        \"html\": \"2484 Old Middle Field Way<br />Mountain View, CA 94043\"\n      },\n      \"lowGrade\": \"K\",\n      \"highGrade\": \"6\",\n      \"schoolLevel\": \"Private\",\n      \"isCharterSchool\": \"(n/a)\",\n      \"isMagnetSchool\": \"(n/a)\",\n      \"isVirtualSchool\": \"(n/a)\",\n      \"isTitleISchool\": \"(n/a)\",\n      \"isTitleISchoolwideSchool\": \"(n/a)\",\n      \"county\": {\n        \"countyName\": \"Santa Clara\",\n        \"countyURL\": \"https://www.schooldigger.com/go/CA/county/Santa+Clara/search.aspx\"\n      },\n      \"rankHistory\": null,\n      \"rankMovement\": null,\n      \"locationIsWithinBoundary\": null,\n      \"schoolYearlyDetails\": [\n        {\n          \"year\": 2018,\n          \"numberOfStudents\": 205,\n          \"percentFreeDiscLunch\": null,\n          \"percentofAfricanAmericanStudents\": 0.0,\n          \"percentofAsianStudents\": 91.22,\n          \"percentofHispanicStudents\": 0.49,\n          \"percentofIndianStudents\": 0.0,\n          \"percentofPacificIslanderStudents\": 0.0,\n          \"percentofWhiteStudents\": 2.93,\n          \"percentofTwoOrMoreRaceStudents\": 5.37,\n          \"percentofUnspecifiedRaceStudents\": null,\n          \"teachersFulltime\": 11.4,\n          \"pupilTeacherRatio\": 17.9,\n          \"numberofAfricanAmericanStudents\": 0,\n          \"numberofAsianStudents\": 187,\n          \"numberofHispanicStudents\": 1,\n          \"numberofIndianStudents\": 0,\n          \"numberofPacificIslanderStudents\": 0,\n          \"numberofWhiteStudents\": 6,\n          \"numberofTwoOrMoreRaceStudents\": 11,\n          \"numberofUnspecifiedRaceStudents\": null\n        },\n        {\n          \"year\": null,\n          \"numberOfStudents\": null,\n          \"percentFreeDiscLunch\": null,\n          \"percentofAfricanAmericanStudents\": null,\n          \"percentofAsianStudents\": null,\n          \"percentofHispanicStudents\": null,\n          \"percentofIndianStudents\": null,\n          \"percentofPacificIslanderStudents\": null,\n          \"percentofWhiteStudents\": null,\n          \"percentofTwoOrMoreRaceStudents\": null,\n          \"percentofUnspecifiedRaceStudents\": null,\n          \"teachersFulltime\": null,\n          \"pupilTeacherRatio\": null,\n          \"numberofAfricanAmericanStudents\": null,\n          \"numberofAsianStudents\": null,\n          \"numberofHispanicStudents\": null,\n          \"numberofIndianStudents\": null,\n          \"numberofPacificIslanderStudents\": null,\n          \"numberofWhiteStudents\": null,\n          \"numberofTwoOrMoreRaceStudents\": null,\n          \"numberofUnspecifiedRaceStudents\": null\n        }\n      ],\n      \"isPrivate\": true,\n      \"privateDays\": 245,\n      \"privateHours\": 6.0,\n      \"privateHasLibrary\": false,\n      \"privateCoed\": \"Coed\",\n      \"privateOrientation\": \"Nonsectarian\",\n      \"hasBoundary\": null\n    },\n   ...\n   ]\n}\n```\n\n_Sample Bar Chart_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/bar-chart/SchoolDigger.PNG \"[Bar Chart]\")"},"response":[],"_postman_id":"2231c8e7-e1c2-45dc-ba01-d32ff7b8193d"}],"id":"e2242a24-5435-4576-8cf3-dd752f155a2c","description":"This folder contains three sample usages for the bar chart visualizer.\n\n1. Open Brewery DB\n2. Yelp\n3. School Digger\n\nFor detailed explanation on a request, check its description.\n<br>\n<br>\n**Data Parsing**\n\nAt the bottom of the test script, the data is formatted into the following data structure, with `key` being elements of the x-axis and `frequency` being the value being plotted on the y-axis.\n\n`\n[{\n\tkey: 'city-name',\n\tfrequency: 34\n}]\n`","event":[{"listen":"prerequest","script":{"id":"58158c81-7720-4d34-838b-9c81844f9219","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"934a4ae1-be22-4b8d-8d99-0c2a9d8a81c0","type":"text/javascript","exec":[""]}}],"_postman_id":"e2242a24-5435-4576-8cf3-dd752f155a2c"},{"name":"Scatter Plot","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":"a76062d6-9d35-4dbc-9aab-20870b607e6a","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":"a76062d6-9d35-4dbc-9aab-20870b607e6a"},{"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":"47573f9a-a147-445a-a8ba-05cb89a6d8e5","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":"47573f9a-a147-445a-a8ba-05cb89a6d8e5"},{"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":"0153e370-f709-4761-a6f8-b8d69491b995","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":"0153e370-f709-4761-a6f8-b8d69491b995"}],"id":"e2415a32-54c7-4f4f-9380-4565ed046c2f","description":"This folder 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```","_postman_id":"e2415a32-54c7-4f4f-9380-4565ed046c2f"},{"name":"Table","item":[{"name":"Pokemon","event":[{"listen":"test","script":{"id":"b2bf224c-099d-49ad-8439-f7530298cc44","exec":["/* VISUALIZATION TEMPLATE */","var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<div id=\"table\"></div>","<style>","    thead {","      background-color: #F5F5F5;","      border","    } ","    th, th:first-child, th:last-child, td, td:first-child, td:last-child {","        padding: 12px 15px;","    }","    th {","        text-transform: uppercase;","    }","    td {","        color: #676769;","    }","    tbody tr:nth-child(odd) {","        background-color: white;","        transition: 0.3s;","    }","    tbody tr:nth-child(even) {","        background-color: #F5F5F5;","        transition: 0.3s;","    }","    tbody tr:hover {","        filter: brightness(90%);","    }","    .api {","        cursor: pointer;","    }","    .api:active {","        color: #202128;","    }","</style>","<script>","    const results = {{{results}}};","    const headers = {{{headers}}};","    var table = d3.select(\"#table\").append(\"table\");","    var header = table.append(\"thead\").append(\"tr\");","    ","    // creates the headers","    header","      .selectAll(\"th\")","        .data(headers)","        .enter()","      .append(\"th\")","        .text(function(d) {return d;});","    var tablebody = table.append(\"tbody\");","    rows = tablebody","      .selectAll(\"tr\")","        .data(results)","        .enter()","      .append(\"tr\");","      ","    // each row has its own array, so here we enter it into the cells","    cells = rows.selectAll(\"td\")","        .data(function(d) {","            return d;","        })","        .enter()","      .append(\"td\")","        .text(function(d) {","            return d;","        })","      .filter(function(d) {return isEndpoint(d)})","        .attr('onclick', function(d) {","            return 'copy(\\\"' + d + '\\\")'","        })","        .attr('class', 'api');","        ","    function copy(text) {","        const el = document.createElement('textarea');","        el.value = text;","        el.style = {display: 'none'};","        document.body.append(el);","        el.select();","        document.execCommand('copy');","        document.body.removeChild(el);","    }","    ","    function isEndpoint(url) {","        const host = '{{host}}'","        return url.toString().indexOf(host) !== -1","    }","    ","</script>`;","","// Host checks for nested API endpoints and makes them copyable-on-click","const host = pm.request.url.host.join(\".\");","const response = pm.response.json();","","/* DATA PARSING */","function parseData(response, host) {","    // Row data passed in as array of arrays (ex. [[name1, api1], [name2, api2], ...])","    const results = response.results.map(obj => Object.values(obj));","","    // Table Headers passed in as array of strings (ex. [\"Name\", \"Link\", ...])","    const headers = Array.from(","      response.results.reduce((keys, cur) => {","        for (const key of Object.keys(cur)) {","          keys.add(key);","        }","        return keys;","      }, new Set())","    );","    return [results, headers]","}","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","  // Template will receive stringified JSON","  results: JSON.stringify(parseData(response)[0]),","  headers: JSON.stringify(parseData(response)[1]),","  host","});"],"type":"text/javascript"}}],"id":"632e0b6e-be0c-4927-ad58-2f571738f47e","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":"https://pokeapi.co/api/v2/pokemon/\n","description":"Table visualization with the Pokemon API. Shows Pokemon names and their respective API endpoint URLs.\n<br/>\n<br/>\n_Sample JSON response_\n```\n{\n    \"count\": 964,\n    \"next\": \"https://pokeapi.co/api/v2/pokemon/?offset=20&limit=20\",\n    \"previous\": null,\n    \"results\": [\n        {\n            \"name\": \"bulbasaur\",\n            \"url\": \"https://pokeapi.co/api/v2/pokemon/1/\"\n        },\n        {\n            \"name\": \"ivysaur\",\n            \"url\": \"https://pokeapi.co/api/v2/pokemon/2/\"\n        },\n        {\n            \"name\": \"venusaur\",\n            \"url\": \"https://pokeapi.co/api/v2/pokemon/3/\"\n        },\n        ...\n    ]\n}\n```\n<br/>\n<br/>\n\n_Sample Table_\n\n![Pokemon Table](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/table/table_pokemon.png \"[Table]\")"},"response":[],"_postman_id":"632e0b6e-be0c-4927-ad58-2f571738f47e"},{"name":"Spotify Top Tracks","event":[{"listen":"test","script":{"id":"9b46cc80-0c65-439d-8a25-0e1b19f64642","exec":["/* VISUALIZATION TEMPLATE */","var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<div id=\"table\"></div>","<style>","    thead {","      background-color: #F5F5F5;","      border","    } ","    th, th:first-child, th:last-child, td, td:first-child, td:last-child {","        padding: 12px 15px;","    }","    th {","        text-transform: uppercase;","    }","    td {","        color: #676769;","    }","    tbody tr:nth-child(odd) {","        background-color: white;","        transition: 0.3s;","    }","    tbody tr:nth-child(even) {","        background-color: #F5F5F5;","        transition: 0.3s;","    }","    tbody tr:hover {","        filter: brightness(90%);","    }","    .api {","        cursor: pointer;","    }","    .api:active {","        color: #202128;","    }","</style>","<script>","    const results = {{{results}}};","    const headers = {{{headers}}};","    var table = d3.select(\"#table\").append(\"table\");","    var header = table.append(\"thead\").append(\"tr\");","    ","    // creates the headers","    header","      .selectAll(\"th\")","        .data(headers)","        .enter()","      .append(\"th\")","        .text(function(d) {return d;});","    var tablebody = table.append(\"tbody\");","    rows = tablebody","      .selectAll(\"tr\")","        .data(results)","        .enter()","      .append(\"tr\");","      ","    // each row has its own array, so here we enter it into the cells","    cells = rows.selectAll(\"td\")","        .data(function(d) {","            return d;","        })","        .enter()","      .append(\"td\")","        .text(function(d) {","            return d;","        })","      .filter(function(d) {return isEndpoint(d)})","        .attr('onclick', function(d) {","            return 'copy(\\\"' + d + '\\\")'","        })","        .attr('class', 'api');","        ","    function copy(text) {","        const el = document.createElement('textarea');","        el.value = text;","        el.style = {display: 'none'};","        document.body.append(el);","        el.select();","        document.execCommand('copy');","        document.body.removeChild(el);","    }","    ","    function isEndpoint(url) {","        const host = '{{host}}'","        return url.toString().indexOf(host) !== -1","    }","    ","</script>`;","","// Host checks for nested API endpoints and makes them copyable-on-click","const host = pm.request.url.host.join(\".\");","const response = pm.response.json();","","/* DATA PARSING */","function parseData(response, host) {","    // Row data passed in as array of arrays (ex. [[name1, api1], [name2, api2], ...])","    const results = response.tracks.map(obj => [obj.name, obj.album.name, obj.album.release_date, obj.track_number, obj.duration_ms, obj.href, obj.is_playable]);","","    // Table Headers passed in as array of strings (ex. [\"Name\", \"Link\", ...])","    const headers = [\"SONG NAME\", \"ALBUM NAME\", \"RELEASE DATE\", \"TRACK NUMBER\", \"DURATION (MS)\", \"SONG URL\", \"IS PLAYABLE\"];","    ","    return [results, headers]","}","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","  // Template will receive stringified JSON","  results: JSON.stringify(parseData(response)[0]),","  headers: JSON.stringify(parseData(response)[1]),","  host","});",""],"type":"text/javascript"}}],"id":"a2c457f9-1767-4af1-9608-1e7250d5366c","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"auth":{"type":"oauth2","oauth2":{"accessToken":"BQDPuQAoS4_9y9w8nrvfY6IYr0poAgGjwdxLEa47fHuAuGrDIznqi1WF2m3KpwkuFCTunBgBXCOubbzK9Ds","tokenType":"Bearer","addTokenTo":"header"}},"method":"GET","header":[{"key":"Content-Type","name":"Content-Type","type":"text","value":"application/x-www-form-urlencoded"}],"body":{"mode":"urlencoded","urlencoded":[]},"url":{"raw":"https://api.spotify.com/v1/artists/43ZHCT0cAZBISjO8DG9PnE/top-tracks?country=SE","protocol":"https","host":["api","spotify","com"],"path":["v1","artists","43ZHCT0cAZBISjO8DG9PnE","top-tracks"],"query":[{"key":"country","value":"SE"}]},"description":"Table visualization of the top track on the Spotify API.\n\nTo generate an authentication token to access the Spotify API, follow the instructions at [https://developer.spotify.com/documentation/web-api/quick-start/](https://developer.spotify.com/documentation/web-api/quick-start/).\n\n_Sample JSON response_\n```\n{\n  \"tracks\": [\n    {\n      \"album\": {\n        \"album_type\": \"album\",\n        \"artists\": [\n          {\n            \"external_urls\": {\n              \"spotify\": \"https://open.spotify.com/artist/43ZHCT0cAZBISjO8DG9PnE\"\n            },\n            \"href\": \"https://api.spotify.com/v1/artists/43ZHCT0cAZBISjO8DG9PnE\",\n            \"id\": \"43ZHCT0cAZBISjO8DG9PnE\",\n            \"name\": \"Elvis Presley\",\n            \"type\": \"artist\",\n            \"uri\": \"spotify:artist:43ZHCT0cAZBISjO8DG9PnE\"\n          }\n        ],\n        \"external_urls\": {\n          \"spotify\": \"https://open.spotify.com/album/7xe8VI48TxUpU1IIo0RfGi\"\n        },\n        \"href\": \"https://api.spotify.com/v1/albums/7xe8VI48TxUpU1IIo0RfGi\",\n        \"id\": \"7xe8VI48TxUpU1IIo0RfGi\",\n        \"images\": [\n          {\n            \"height\": 640,\n            \"url\": \"https://i.scdn.co/image/ab67616d0000b273f96cefb0197694ad440c3314\",\n            \"width\": 640\n          },\n          {\n            \"height\": 300,\n            \"url\": \"https://i.scdn.co/image/ab67616d00001e02f96cefb0197694ad440c3314\",\n            \"width\": 300\n          },\n          {\n            \"height\": 64,\n            \"url\": \"https://i.scdn.co/image/ab67616d00004851f96cefb0197694ad440c3314\",\n            \"width\": 64\n          }\n        ],\n        \"name\": \"Blue Hawaii\",\n        \"release_date\": \"1961-10-20\",\n        \"release_date_precision\": \"day\",\n        \"total_tracks\": 14,\n        \"type\": \"album\",\n        \"uri\": \"spotify:album:7xe8VI48TxUpU1IIo0RfGi\"\n      },\n      \"artists\": [\n        {\n          \"external_urls\": {\n            \"spotify\": \"https://open.spotify.com/artist/43ZHCT0cAZBISjO8DG9PnE\"\n          },\n          \"href\": \"https://api.spotify.com/v1/artists/43ZHCT0cAZBISjO8DG9PnE\",\n          \"id\": \"43ZHCT0cAZBISjO8DG9PnE\",\n          \"name\": \"Elvis Presley\",\n          \"type\": \"artist\",\n          \"uri\": \"spotify:artist:43ZHCT0cAZBISjO8DG9PnE\"\n        }\n      ],\n      \"disc_number\": 1,\n      \"duration_ms\": 182360,\n      \"explicit\": false,\n      \"external_ids\": {\n        \"isrc\": \"USRC16101350\"\n      },\n      \"external_urls\": {\n        \"spotify\": \"https://open.spotify.com/track/44AyOl4qVkzS48vBsbNXaC\"\n      },\n      \"href\": \"https://api.spotify.com/v1/tracks/44AyOl4qVkzS48vBsbNXaC\",\n      \"id\": \"44AyOl4qVkzS48vBsbNXaC\",\n      \"is_local\": false,\n      \"is_playable\": true,\n      \"name\": \"Can't Help Falling in Love\",\n      \"popularity\": 79,\n      \"preview_url\": \"https://p.scdn.co/mp3-preview/994ebd7f49e4e935df56d450b0c12d8bad8bb9f4?cid=ab343db462f8494ea1e3f226eb7bc0cc\",\n      \"track_number\": 5,\n      \"type\": \"track\",\n      \"uri\": \"spotify:track:44AyOl4qVkzS48vBsbNXaC\"\n    },\n    ...\n    ]\n}\n```\n\n_Sample Table_\n\n![Spotify Table](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/table/table_spotify.png \"[Table]\")"},"response":[],"_postman_id":"a2c457f9-1767-4af1-9608-1e7250d5366c"},{"name":"NYT Most Viewed Articles","event":[{"listen":"test","script":{"id":"e2c8e8ba-907b-4c08-bad4-5e84c68efc37","exec":["/* VISUALIZATION TEMPLATE */","var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<div id=\"table\"></div>","<style>","    thead {","      background-color: #F5F5F5;","      border","    } ","    th, th:first-child, th:last-child, td, td:first-child, td:last-child {","        padding: 12px 15px;","    }","    th {","        text-transform: uppercase;","    }","    td {","        color: #676769;","    }","    tbody tr:nth-child(odd) {","        background-color: white;","        transition: 0.3s;","    }","    tbody tr:nth-child(even) {","        background-color: #F5F5F5;","        transition: 0.3s;","    }","    tbody tr:hover {","        filter: brightness(90%);","    }","    .api {","        cursor: pointer;","    }","    .api:active {","        color: #202128;","    }","</style>","<script>","    const results = {{{results}}};","    const headers = {{{headers}}};","    var table = d3.select(\"#table\").append(\"table\");","    var header = table.append(\"thead\").append(\"tr\");","    ","    // creates the headers","    header","      .selectAll(\"th\")","        .data(headers)","        .enter()","      .append(\"th\")","        .text(function(d) {return d;});","    var tablebody = table.append(\"tbody\");","    rows = tablebody","      .selectAll(\"tr\")","        .data(results)","        .enter()","      .append(\"tr\");","      ","    // each row has its own array, so here we enter it into the cells","    cells = rows.selectAll(\"td\")","        .data(function(d) {","            return d;","        })","        .enter()","      .append(\"td\")","        .text(function(d) {","            return d;","        })","      .filter(function(d) {return isEndpoint(d)})","        .attr('onclick', function(d) {","            return 'copy(\\\"' + d + '\\\")'","        })","        .attr('class', 'api');","        ","    function copy(text) {","        const el = document.createElement('textarea');","        el.value = text;","        el.style = {display: 'none'};","        document.body.append(el);","        el.select();","        document.execCommand('copy');","        document.body.removeChild(el);","    }","    ","    function isEndpoint(url) {","        const host = '{{host}}'","        return url.toString().indexOf(host) !== -1","    }","    ","</script>`;","","","// Host checks for nested API endpoints and makes them copyable-on-click","const host = pm.request.url.host.join(\".\");","const response = pm.response.json();","","/* DATA PARSING */","function parseData(response, host) {","    // Row data passed in as array of arrays (ex. [[name1, api1], [name2, api2], ...])","    const results = response.results.map(obj => [obj.title, obj.abstract, obj.published_date, obj.url]);","","    // Table Headers passed in as array of strings (ex. [\"Name\", \"Link\", ...])","    const headers = [\"TITLE\", \"ABSTRACT\", \"PUBLISHED DATE\", \"URL\"];","    ","    return [results, headers]","}","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","  // Template will receive stringified JSON","  results: JSON.stringify(parseData(response)[0]),","  headers: JSON.stringify(parseData(response)[1]),","  host","});",""],"type":"text/javascript"}}],"id":"5a934a9e-9f8f-4d94-84eb-60bc2acc895a","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":{"raw":"https://api.nytimes.com/svc/mostpopular/v2/viewed/7.json?api-key=demo-key","protocol":"https","host":["api","nytimes","com"],"path":["svc","mostpopular","v2","viewed","7.json"],"query":[{"key":"api-key","value":"demo-key"}]},"description":"Table visualization of the top tracks on the most viewed articles on the New York Times. Lists the title, abstract, publication date and url of each article.\n\nThe data here is from the NYT API. Sign up for an API key at [https://developer.nytimes.com/](https://developer.nytimes.com/) to access extensive NYT data!\n\n_Sample Response_\n\n```\n{\n    \"status\": \"OK\",\n    \"copyright\": \"Copyright (c) 2019 The New York Times Company.  All Rights Reserved.\",\n    \"num_results\": 1707,\n    \"results\": [\n        {\n            \"url\": \"https://www.nytimes.com/2019/11/13/movies/tom-hanks-mister-rogers.html\",\n            \"adx_keywords\": \"Hanks, Tom;Actors and Actresses;Movies;A Beautiful Day in the Neighborhood (Movie)\",\n            \"column\": null,\n            \"section\": \"Movies\",\n            \"byline\": \"By TAFFY BRODESSER-AKNER\",\n            \"type\": \"Article\",\n            \"title\": \"This Tom Hanks Story Will Help You Feel Less Bad\",\n            \"abstract\": \"Hanks is playing Mister Rogers in a new movie and is just as nice as you think he is. Please read this article anyway.\",\n            \"published_date\": \"2019-11-13\",\n            \"source\": \"The New York Times\",\n            \"id\": 100000006800704,\n            \"asset_id\": 100000006800704,\n            \"views\": 1,\n            \"des_facet\": [\n                \"MOVIES\"\n            ],\n            \"org_facet\": [\n                \"ACTORS AND ACTRESSES\"\n            ],\n            \"per_facet\": [\n                \"HANKS, TOM\"\n            ],\n            \"geo_facet\": \"\",\n            \"media\": [\n                {\n                    \"type\": \"image\",\n                    \"subtype\": \"photo\",\n                    \"caption\": \"“I recognized in myself a long time ago that I don’t instill fear in anybody,” Hanks said. “Now, that’s different than being nice, you know? I think I have a cache of mystery. But it’s not one of malevolence.”\",\n                    \"copyright\": \"Daniel Dorsa for The New York Times\",\n                    \"approved_for_syndication\": 1,\n                    \"media-metadata\": [\n                        {\n                            \"url\": \"https://static01.nyt.com/images/2019/11/17/arts/17tom-hanks2-promo/17tom-hanks2-thumbStandard.jpg\",\n                            \"format\": \"Standard Thumbnail\",\n                            \"height\": 75,\n                            \"width\": 75\n                        },\n                        {\n                            \"url\": \"https://static01.nyt.com/images/2019/11/17/arts/17tom-hanks2-promo/17tom-hanks2-promo-mediumThreeByTwo210.jpg\",\n                            \"format\": \"mediumThreeByTwo210\",\n                            \"height\": 140,\n                            \"width\": 210\n                        },\n                        {\n                            \"url\": \"https://static01.nyt.com/images/2019/11/17/arts/17tom-hanks2-promo/17tom-hanks2-promo-mediumThreeByTwo440.jpg\",\n                            \"format\": \"mediumThreeByTwo440\",\n                            \"height\": 293,\n                            \"width\": 440\n                        }\n                    ]\n                }\n            ],\n            \"uri\": \"nyt://article/8837752f-6207-55e9-8cc3-b811091e3a86\"\n        },\n        {\n            \"url\": \"https://www.nytimes.com/2019/11/13/us/politics/impeachment-hearings.html\",\n            \"adx_keywords\": \"Trump-Ukraine Whistle-Blower Complaint and Impeachment Inquiry;Trump, Donald J;United States Politics and Government;Presidential Election of 2020;United States International Relations;Impeachment;Democratic Party;Republican Party;House of Representatives;Biden, Joseph R Jr;Kent, George P;Giuliani, Rudolph W;Taylor, William B Jr;Yovanovitch, Marie L;Zelensky, Volodymyr\",\n            \"column\": null,\n            \"section\": \"U.S.\",\n            \"byline\": \"By MICHAEL D. SHEAR\",\n            \"type\": \"Article\",\n            \"title\": \"Key Moments From the First Public Impeachment Hearing\",\n            \"abstract\": \"Witnesses testified that President Trump pressured a foreign power to help him win re-election during historic hearings that previewed an intensely partisan battle.\",\n            \"published_date\": \"2019-11-13\",\n            \"source\": \"The New York Times\",\n            \"id\": 100000006821335,\n            \"asset_id\": 100000006821335,\n            \"views\": 2,\n            \"des_facet\": [\n                \"TRUMP-UKRAINE WHISTLE-BLOWER COMPLAINT AND IMPEACHMENT INQUIRY\",\n                \"UNITED STATES POLITICS AND GOVERNMENT\",\n                \"UNITED STATES INTERNATIONAL RELATIONS\"\n            ],\n            \"org_facet\": [\n                \"PRESIDENTIAL ELECTION OF 2020\",\n                \"IMPEACHMENT\",\n                \"DEMOCRATIC PARTY\",\n                \"REPUBLICAN PARTY\",\n                \"HOUSE OF REPRESENTATIVES\"\n            ],\n            \"per_facet\": [\n                \"TRUMP, DONALD J\",\n                \"BIDEN, JOSEPH R JR\",\n                \"KENT, GEORGE P\",\n                \"GIULIANI, RUDOLPH W\",\n                \"TAYLOR, WILLIAM B JR\",\n                \"YOVANOVITCH, MARIE L\",\n                \"ZELENSKY, VOLODYMYR\"\n            ],\n            \"geo_facet\": \"\",\n            \"media\": [\n                {\n                    \"type\": \"image\",\n                    \"subtype\": \"photo\",\n                    \"caption\": \"William B. Taylor Jr., center right, and George P. Kent, right, preparing to testify before the House Intelligence Committee on Wednesday in the first public hearing of the impeachment inquiry.\",\n                    \"copyright\": \"Erin Schaff/The New York Times\",\n                    \"approved_for_syndication\": 1,\n                    \"media-metadata\": [\n                        {\n                            \"url\": \"https://static01.nyt.com/images/2019/11/13/us/politics/13dc-impeach1/13dc-impeach1-thumbStandard.jpg\",\n                            \"format\": \"Standard Thumbnail\",\n                            \"height\": 75,\n                            \"width\": 75\n                        },\n                        {\n                            \"url\": \"https://static01.nyt.com/images/2019/11/13/us/politics/13dc-impeach1/merlin_164329176_d5cf6b25-7f5e-4510-a1e8-2722c471fb79-mediumThreeByTwo210.jpg\",\n                            \"format\": \"mediumThreeByTwo210\",\n                            \"height\": 140,\n                            \"width\": 210\n                        },\n                        {\n                            \"url\": \"https://static01.nyt.com/images/2019/11/13/us/politics/13dc-impeach1/merlin_164329176_d5cf6b25-7f5e-4510-a1e8-2722c471fb79-mediumThreeByTwo440.jpg\",\n                            \"format\": \"mediumThreeByTwo440\",\n                            \"height\": 293,\n                            \"width\": 440\n                        }\n                    ]\n                }\n            ],\n            \"uri\": \"nyt://article/c54d6d09-19da-5bc4-a648-d5ee9a72d52c\"\n        },\n        ...\n    ]\n}\n```\n\n_Sample Table_\n![NYT Table](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/table/table_nyt.png \"[Table]\")"},"response":[],"_postman_id":"5a934a9e-9f8f-4d94-84eb-60bc2acc895a"}],"id":"40bca71c-e5ac-45a1-8468-e62b00399b73","description":"This folder contains three sample usages for the table visualizer using requests from different API endpoints.\n\n1. Pokemon \n2. Spotify \n3. New York Times\n\nFor detailed explanation on a request, check its description.\n<br>\n<br>\n**Data Parsing**\n\nTwo arrays are fed into the template:\n\n1. `headers` : an array of the table headers (strings)\n2. `results` : an array of arrays, where each array contains a row of information","event":[{"listen":"prerequest","script":{"id":"75504d2a-e024-477d-9a9a-8ee7a15b515f","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"4943a40c-3e04-45e0-ab06-b942440df2ec","type":"text/javascript","exec":[""]}}],"_postman_id":"40bca71c-e5ac-45a1-8468-e62b00399b73"}],"id":"6dbd299d-89a3-489f-8d2f-de9a272aca4d","description":"This folder includes the first round of simple visualizations. If you'd like to import any particular visualization separately, they are individually published at the templates linked.\n- [Bar Chart](https://explore.postman.com/templates/4548)\n- [Scatter Plot](https://explore.postman.com/templates/4549)\n- [Table](https://explore.postman.com/templates/4550)","event":[{"listen":"prerequest","script":{"id":"41e8e477-fb52-4949-b4bc-6185a65084f4","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"3bd6303b-8928-4a86-8e70-4d6a40757f41","type":"text/javascript","exec":[""]}}],"_postman_id":"6dbd299d-89a3-489f-8d2f-de9a272aca4d"},{"name":"Additional Templates","item":[{"name":"Cross Filter","item":[{"name":"UFO Sightings","event":[{"listen":"test","script":{"id":"e9fbd7d1-3b45-48c4-baae-e446ded557d3","exec":["const template = `","<style>","#charts {","    display: flex;","}",".chartGroup {","    display: flex;","    flex-direction: column;","    align-items: center;","    margin: 32px;","}","#body {","    display: flex;","    align-items: center;","    flex-direction: column;","    background-color: white","}","#charts {","  padding: 10px 0;","}",".chart {","  display: inline-block;","  height: 151px;","  margin-bottom: 20px;","}",".reset {","  padding-left: 1em;","  font-size: smaller;","  color: #ccc;","}",".background.bar {","  fill: #E0DFD5;","}",".foreground.bar {","  fill: #F17D12;","}",".axis path, .axis line {","  fill: none;","  stroke: #000;","  shape-rendering: crispEdges;","}",".axis text {","  font: 10px sans-serif;","}",".brush rect.extent {","  fill: #F17D12;","  fill-opacity: .125;","}",".brush .resize path {","  fill: #eee;","  stroke: #666;","}","h4 {","    font: 30px sans-serif;","    font-weight: bold;","    margin-top: 20;","    margin-bottom: 0;","}","</style>","<script src=\"https://d3js.org/d3.v3.min.js\"></script>","<script src=\"https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js\"></script>","<div id='body'>","    <h4>{{title}}</h4>","    <div id=\"charts\">","        <div class=\"chartGroup\">","            <p>{{durationTitle}}</p>","            <div class=\"chart\"></div>","        </div>","        <div class=\"chartGroup\">","            <p>{{dateTitle}}</p>","            <div class=\"chart\"></div>","        </div>","    </div>","    <div id=\"lists\">","      <table class=\"list\">","        <tr>","            <th>Date</th>","            <th>Time</th>","            <th>Location</th>","            <th>Duration</th>","            <th>Shape</th>","        </tr>","      </table>","    </div>","</div>","<script>"," pm.getData((err, value) => {","    const durationRange = value.durationRange;","     ","    // Convert stringified date into Date objects","    const data = value.sightings.map((d) => {","        d.date = new Date(Date.parse(d.date)); ","        return d;","    });","     ","    // Specify crossfilter axes","    const crossfilterData = crossfilter(data),","        all = crossfilterData.groupAll(),","        date = crossfilterData.dimension(function(d) {","                return d.date.getHours();","        }),","        dates = date.group(Math.floor),","        duration = crossfilterData.dimension(function(d) {","            return d.duration;","        }),","        durations = duration.group(Math.floor);","         ","    const charts = [","        barChart()","            .dimension(duration)","            .group(durations)","        .x(d3.scale.linear()","            .domain(durationRange)","            .rangeRound([0, 10 * durationRange[1]])),","        barChart()","            .dimension(date)","            .group(dates)","        .x(d3.scale.linear()","            .domain([0, 24])","            .rangeRound([0, 10 * 24])),","    ]","","    // A nest operator, for grouping the flight list.","    const nestByDate = d3.nest()","        .key(function(d) { ","            console.log(d)","            const date = new Date(d.date);","            return d3.time.day(date); ","        });","","    // Render the initial lists.","    var list = d3.selectAll(\".list\")","        .data([listFunc]);","","    // Various formatters.","    var formatNumber = d3.format(\",d\"),","        formatChange = d3.format(\"+,d\"),","        formatDate = d3.time.format(\"%B %d, %Y\"),","        formatTime = d3.time.format(\"%I:%M %p\");","     ","    // Given our array of charts, which we assume are in the same order as the","    // .chart elements in the DOM, bind the charts to the DOM and render them.","    // We also listen to the chart's brush events to update the display.","    var chart = d3.selectAll(\".chart\")","        .data(charts)","        .each(function(chart) {","            chart.on(\"brush\", renderAll).on(\"brushend\", renderAll);","        });","","     renderAll();","     // Render the specified chart or list.","     function render(method) {","         d3.select(this).call(method);","     }","     ","     // Whenever the brush moves, rerender everything","     function renderAll() {","        chart.each(render);","        list.each(render);","        d3.select(\"#active\").text(formatNumber(all.value()));","    }","","    function listFunc(div) {","        div.each(function() {","            const tableData = d3.select(this).selectAll(\".sighting\")","                .data(date.top(40), function(d) { return d3.time.day(d.date) })","            const rowEnter = tableData.enter().append(\"tr\")","                 .attr(\"class\", \"sighting\");","            for (const {header, field} of value.tableRow) {","                rowEnter.append(\"td\")","                    .attr(\"class\", header)","                    .text(function(d) {","                        return d[field];","                    });","            }","            tableData.exit().remove();","            tableData.order();","        });","    }","","    function barChart() {","        if (!barChart.id) barChart.id = 0;","        var margin = {","                top: 10,","                right: 10,","                bottom: 20,","                left: 10","            },","            x,","            y = d3.scale.linear().range([100, 0]),","            id = barChart.id++,","            axis = d3.svg.axis().orient(\"bottom\"),","            brush = d3.svg.brush(),","            brushDirty,","            dimension,","            group,","            round;","        function chart(div) {","            var width = x.range()[1],","                height = y.range()[0];","            y.domain([0, group.top(1)[0].value]);","            div.each(function() {","                var div = d3.select(this),","                    g = div.select(\"g\");","                     ","                // Create the skeletal chart.","                if (g.empty()) {","                    div.select(\".title\").append(\"a\")","                        .attr(\"href\", \"javascript:reset(\" + id + \")\")","                        .attr(\"class\", \"reset\")","                        .text(\"reset\")","                        .style(\"display\", \"none\");","                    g = div.append(\"svg\")","                        .attr(\"width\", width + margin.left + margin.right)","                        .attr(\"height\", height + margin.top + margin.bottom)","                        .append(\"g\")","                        .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","                    g.append(\"clipPath\")","                        .attr(\"id\", \"clip-\" + id)","                        .append(\"rect\")","                        .attr(\"width\", width)","                        .attr(\"height\", height);","                    g.selectAll(\".bar\")","                        .data([\"background\", \"foreground\"])","                        .enter().append(\"path\")","                        .attr(\"class\", function(d) {","                            return d + \" bar\";","                        })","                        .datum(group.all());","                    g.selectAll(\".foreground.bar\")","                        .attr(\"clip-path\", \"url(#clip-\" + id + \")\");","                    g.append(\"g\")","                        .attr(\"class\", \"axis\")","                        .attr(\"transform\", \"translate(0,\" + height + \")\")","                        .call(axis);","                         ","                    // Initialize the brush component with pretty resize handles.","                    var gBrush = g.append(\"g\").attr(\"class\", \"brush\").call(brush);","                    gBrush.selectAll(\"rect\").attr(\"height\", height);","                    gBrush.selectAll(\".resize\").append(\"path\").attr(\"d\", resizePath);","                }","                // Only redraw the brush if set externally.","                if (brushDirty) {","                    brushDirty = false;","                    g.selectAll(\".brush\").call(brush);","                    div.select(\".title a\").style(\"display\", brush.empty() ? \"none\" : null);","                    if (brush.empty()) {","                        g.selectAll(\"#clip-\" + id + \" rect\")","                            .attr(\"x\", 0)","                            .attr(\"width\", width);","                    } else {","                        var extent = brush.extent();","                        g.selectAll(\"#clip-\" + id + \" rect\")","                            .attr(\"x\", x(extent[0]))","                            .attr(\"width\", x(extent[1]) - x(extent[0]));","                    }","                }","                g.selectAll(\".bar\").attr(\"d\", barPath);","            });","","            function barPath(groups) {","                var path = [],","                    i = -1,","                    n = groups.length,","                    d;","                while (++i < n) {","                    d = groups[i];","                    path.push(\"M\", x(d.key), \",\", height, \"V\", y(d.value), \"h9V\", height);","                }","                return path.join(\"\");","            }","","            function resizePath(d) {","                var e = +(d == \"e\"),","                    x = e ? 1 : -1,","                    y = height / 3;","                return \"M\" + (.5 * x) + \",\" + y +","                    \"A6,6 0 0 \" + e + \" \" + (6.5 * x) + \",\" + (y + 6) +","                    \"V\" + (2 * y - 6) +","                    \"A6,6 0 0 \" + e + \" \" + (.5 * x) + \",\" + (2 * y) +","                    \"Z\" +","                    \"M\" + (2.5 * x) + \",\" + (y + 8) +","                    \"V\" + (2 * y - 8) +","                    \"M\" + (4.5 * x) + \",\" + (y + 8) +","                    \"V\" + (2 * y - 8);","                }","            }","        brush.on(\"brushstart.chart\", function() {","            var div = d3.select(this.parentNode.parentNode.parentNode);","            div.select(\".title a\").style(\"display\", null);","        });","        brush.on(\"brush.chart\", function() {","            var g = d3.select(this.parentNode),","                extent = brush.extent();","            if (round) g.select(\".brush\")","                .call(brush.extent(extent = extent.map(round)))","                .selectAll(\".resize\")","                .style(\"display\", null);","            g.select(\"#clip-\" + id + \" rect\")","                .attr(\"x\", x(extent[0]))","                .attr(\"width\", x(extent[1]) - x(extent[0]));","            dimension.filterRange(extent);","        });","        brush.on(\"brushend.chart\", function() {","            if (brush.empty()) {","                var div = d3.select(this.parentNode.parentNode.parentNode);","                div.select(\".title a\").style(\"display\", \"none\");","                div.select(\"#clip-\" + id + \" rect\").attr(\"x\", null).attr(\"width\", \"100%\");","                dimension.filterAll();","            }","        });","        chart.margin = function(_) {","            if (!arguments.length) return margin;","            margin = _;","            return chart;","        };","        chart.x = function(_) {","            if (!arguments.length) return x;","            x = _;","            axis.scale(x);","            brush.x(x);","            return chart;","        };","        chart.y = function(_) {","            if (!arguments.length) return y;","            y = _;","            return chart;","        };","        chart.dimension = function(_) {","            if (!arguments.length) return dimension;","            dimension = _;","            return chart;","        };","        chart.filter = function(_) {","            if (_) {","                brush.extent(_);","                dimension.filterRange(_);","            } else {","                brush.clear();","                dimension.filterAll();","            }","            brushDirty = true;","            return chart;","        };","        chart.group = function(_) {","            if (!arguments.length) return group;","            group = _;","            return chart;","        };","        chart.round = function(_) {","            if (!arguments.length) return round;","            round = _;","            return chart;","        };","        return d3.rebind(chart, brush, \"on\");","    }","});","</script>`;","","const response = pm.response.json();","","// DATA PARSING ","// Replace string version of duration with log of seconds (ie: \"1 minute\" -> \"log(60)\") and add text version of date and location for table","const durationRE = new RegExp('(\\\\d+) (minutes?|hours?|seconds?)');","const sightings = response.sightings.map(s => {","        const dateObj = new Date(Date.parse(s.date));","        s.dateText = dateObj.toLocaleDateString();","        s.timeText = dateObj.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit', hour12: true});","        s.locationText =  s.city + ', ' + s.state;","        s.durationText = s.duration;","        s.duration = s.duration.match(durationRE);","        if (!!s.duration) {","            let res = s.duration[1];","            const unit = s.duration[2];","            if (unit.indexOf('minute') >= 0) {","                res *= 60;","            } else if (unit.indexOf('hour') >= 0) {","                res *= 3600;","            }","            s.duration = Math.log(res);","        }","        return s;","    })","    .filter(s => !!s.duration);","","// Set the range for duration","const durationRange = sightings","     .map(s => s.duration)","     .reduce((a, c) => {","         if (c < a[0]) {","             a[0] = c;","         }","         if (c > a[1]) {","             a[1] = c;","         }","         return a;","     }, [10000, 0]);","durationRange[0] = Math.floor(durationRange[0]);","durationRange[1] = Math.ceil(durationRange[1]);","","//Set graph titles","const title = \"UFO Sightings\";","const durationTitle = \"Duration (log seconds)\";","const dateTitle = \"Time of Day\";","","const tableRow = [","    {","        header: 'Date',","        field: 'dateText'","    },","    {","        header: 'Time',","        field: 'timeText'","    },","    {","        header: 'Location',","        field: 'locationText'","    },","    {","        header: 'Duration',","        field: 'durationText'","    },","    {","        header: 'Shape',","        field: 'shape'","    }","];","","pm.visualizer.set(template, {","    dateTitle,","    durationTitle,","    durationRange,","    sightings,","    tableRow,","    title,","});",""],"type":"text/javascript"}}],"id":"dede9da3-6853-4cc9-b4c4-466e6a7da824","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 UFO sightings data and allows user to filter by date and duration of sighting.\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            \"_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<br>\n\n_Sample Crossfilter_\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/cross-filter/ufo.PNG \"[Crossfilter]\")"},"response":[],"_postman_id":"dede9da3-6853-4cc9-b4c4-466e6a7da824"},{"name":"TVMaze","event":[{"listen":"test","script":{"id":"a92d59ed-3b6a-4848-8324-4d2f76e0b1d8","exec":["const template = `","<style>","#charts {","    display: flex;","}",".chartGroup {","    display: flex;","    flex-direction: column;","    align-items: center;","    margin: 32px;","}","#body {","    display: flex;","    align-items: center;","    flex-direction: column;","    background-color: white;","}","#charts {","  padding: 10px 0;","}",".chart {","  display: inline-block;","  height: 151px;","  margin-bottom: 20px;","}",".reset {","  padding-left: 1em;","  font-size: smaller;","  color: #ccc;","}",".background.bar {","  fill: #E0DFD5;","}",".foreground.bar {","  fill: #F17D12;","}",".axis path, .axis line {","  fill: none;","  stroke: #000;","  shape-rendering: crispEdges;","}",".axis text {","  font: 10px sans-serif;","}",".brush rect.extent {","  fill: #F17D12;","  fill-opacity: .125;","}",".brush .resize path {","  fill: #eee;","  stroke: #666;","}","h4 {","    font: 30px sans-serif;","    font-weight: bold;","    margin-top: 20;","    margin-bottom: 0;","}","</style>","<script src=\"https://d3js.org/d3.v3.min.js\"></script>","<script src=\"https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js\"></script>","<div id=\"body\">","    <h4>{{title}}</h4>","    <div id=\"charts\">","        <div class=\"chartGroup\">","            <p>{{durationTitle}}</p>","            <div class=\"chart\"></div>","        </div>","        <div class=\"chartGroup\">","            <p>{{dateTitle}}</p>","            <div class=\"chart\"></div>","        </div>","    </div>","    <div id=\"lists\">","      <table class=\"list\">","        <tr>","            {{#each tableRow}}","                <th>{{this.header}}</th>","            {{/each}}","        </tr>","      </table>","    </div>","</div>","<script>"," pm.getData((err, value) => {","     const durationRange = value.durationRange;","     const data = value.mappedData.map((d) => {","        d.airstamp = new Date(Date.parse(d.airstamp)); ","        return d;","     });","     const crossfilterData = crossfilter(data);","     const all = crossfilterData.groupAll();","","     const date = crossfilterData.dimension(function(d) {","                return d.airstamp.getHours();","         }),","         dates = date.group(Math.floor),","         duration = crossfilterData.dimension(function(d) {","             return d.runtime;","         }),","         durations = duration.group(Math.floor);","","     const charts = [","         barChart()","             .dimension(duration)","             .group(durations)","         .x(d3.scale.linear()","             .domain(durationRange)","             .rangeRound([0, 10 * durationRange[1]])),","         barChart()","             .dimension(date)","             .group(dates)","         .x(d3.scale.linear()","             .domain([0, 24])","             .rangeRound([0, 10 * 24])),","     ]","    ","    // Render the initial lists.","    const list = d3.selectAll(\".list\")","        .data([listFunc]);","","","","    // Various formatters.","    var formatNumber = d3.format(\",d\"),","        formatChange = d3.format(\"+,d\"),","        formatDate = d3.time.format(\"%B %d, %Y\"),","        formatTime = d3.time.format(\"%I:%M %p\");","","    // A nest operator, for grouping the flight list.","    var nestByDate = d3.nest()","        .key(function(d) { ","            const date = new Date(d.airstamp)","            return d3.time.day(date); ","        });","","","     // Given our array of charts, which we assume are in the same order as the","     // .chart elements in the DOM, bind the charts to the DOM and render them.","     // We also listen to the chart's brush events to update the display.","     var chart = d3.selectAll(\".chart\")","         .data(charts)","         .each(function(chart) {","             chart.on(\"brush\", renderAll).on(\"brushend\", renderAll);","         });","","     renderAll();","     // Renders the specified chart or list.","     function render(method) {","         d3.select(this).call(method);","     }","     ","     // Whenever the brush moves, re-rendering everything.","     function renderAll() {","         chart.each(render);","         list.each(render);","         d3.select(\"#active\").text(formatNumber(all.value()));","     }","     ","     ","","    function listFunc(div) {","        div.each(function() {","            const tableData = d3.select(this).selectAll(\".sighting\")","                .data(date.top(40), function(d) { return d3.time.day(d.airstamp) })","            const rowEnter = tableData.enter().append(\"tr\")","                 .attr(\"class\", \"sighting\");","            for (const {header, field} of value.tableRow) {","                rowEnter.append(\"td\")","                    .attr(\"class\", header)","                    .text(function(d) {","                        return d[field];","                    });","            }","            tableData.exit().remove();","            tableData.order();","        });","    }","","","     function barChart() {","         if (!barChart.id) barChart.id = 0;","         var margin = {","                 top: 10,","                 right: 10,","                 bottom: 20,","                 left: 10","             },","             x,","             y = d3.scale.linear().range([100, 0]),","             id = barChart.id++,","             axis = d3.svg.axis().orient(\"bottom\"),","             brush = d3.svg.brush(),","             brushDirty,","             dimension,","             group,","             round;","         function chart(div) {","             var width = x.range()[1],","                 height = y.range()[0];","             y.domain([0, group.top(1)[0].value]);","             ","             div.each(function() {","                 var div = d3.select(this),","                     g = div.select(\"g\");","                     ","                 // Create the skeletal chart.","                 if (g.empty()) {","                     div.select(\".title\").append(\"a\")","                         .attr(\"href\", \"javascript:reset(\" + id + \")\")","                         .attr(\"class\", \"reset\")","                         .text(\"reset\")","                         .style(\"display\", \"none\");","                     g = div.append(\"svg\")","                         .attr(\"width\", width + margin.left + margin.right)","                         .attr(\"height\", height + margin.top + margin.bottom)","                         .append(\"g\")","                         .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","                     g.append(\"clipPath\")","                         .attr(\"id\", \"clip-\" + id)","                         .append(\"rect\")","                         .attr(\"width\", width)","                         .attr(\"height\", height);","                     g.selectAll(\".bar\")","                         .data([\"background\", \"foreground\"])","                         .enter().append(\"path\")","                         .attr(\"class\", function(d) {","                             return d + \" bar\";","                         })","                         .datum(group.all());","                     g.selectAll(\".foreground.bar\")","                         .attr(\"clip-path\", \"url(#clip-\" + id + \")\");","                     g.append(\"g\")","                         .attr(\"class\", \"axis\")","                         .attr(\"transform\", \"translate(0,\" + height + \")\")","                         .call(axis);","                         ","                     // Initialize the brush component with pretty resize handles.","                     var gBrush = g.append(\"g\").attr(\"class\", \"brush\").call(brush);","                     gBrush.selectAll(\"rect\").attr(\"height\", height);","                     gBrush.selectAll(\".resize\").append(\"path\").attr(\"d\", resizePath);","                 }","                 // Only redraw the brush if set externally.","                 if (brushDirty) {","                     brushDirty = false;","                     g.selectAll(\".brush\").call(brush);","                     div.select(\".title a\").style(\"display\", brush.empty() ? \"none\" : null);","                     if (brush.empty()) {","                         g.selectAll(\"#clip-\" + id + \" rect\")","                             .attr(\"x\", 0)","                             .attr(\"width\", width);","                     } else {","                         var extent = brush.extent();","                         g.selectAll(\"#clip-\" + id + \" rect\")","                             .attr(\"x\", x(extent[0]))","                             .attr(\"width\", x(extent[1]) - x(extent[0]));","                     }","                 }","                 g.selectAll(\".bar\").attr(\"d\", barPath);","             });","","             function barPath(groups) {","                 var path = [],","                     i = -1,","                     n = groups.length,","                     d;","                 while (++i < n) {","                     d = groups[i];","                     path.push(\"M\", x(d.key), \",\", height, \"V\", y(d.value), \"h9V\", height);","                 }","                 return path.join(\"\");","             }","","             function resizePath(d) {","                 var e = +(d == \"e\"),","                     x = e ? 1 : -1,","                     y = height / 3;","                 return \"M\" + (.5 * x) + \",\" + y +","                     \"A6,6 0 0 \" + e + \" \" + (6.5 * x) + \",\" + (y + 6) +","                     \"V\" + (2 * y - 6) +","                     \"A6,6 0 0 \" + e + \" \" + (.5 * x) + \",\" + (2 * y) +","                     \"Z\" +","                     \"M\" + (2.5 * x) + \",\" + (y + 8) +","                     \"V\" + (2 * y - 8) +","                     \"M\" + (4.5 * x) + \",\" + (y + 8) +","                     \"V\" + (2 * y - 8);","             }","         }","         brush.on(\"brushstart.chart\", function() {","             var div = d3.select(this.parentNode.parentNode.parentNode);","             div.select(\".title a\").style(\"display\", null);","         });","         brush.on(\"brush.chart\", function() {","             var g = d3.select(this.parentNode),","                 extent = brush.extent();","             if (round) g.select(\".brush\")","                 .call(brush.extent(extent = extent.map(round)))","                 .selectAll(\".resize\")","                 .style(\"display\", null);","             g.select(\"#clip-\" + id + \" rect\")","                 .attr(\"x\", x(extent[0]))","                 .attr(\"width\", x(extent[1]) - x(extent[0]));","             dimension.filterRange(extent);","         });","         brush.on(\"brushend.chart\", function() {","             if (brush.empty()) {","                 var div = d3.select(this.parentNode.parentNode.parentNode);","                 div.select(\".title a\").style(\"display\", \"none\");","                 div.select(\"#clip-\" + id + \" rect\").attr(\"x\", null).attr(\"width\", \"100%\");","                 dimension.filterAll();","             }","         });","         chart.margin = function(_) {","             if (!arguments.length) return margin;","             margin = _;","             return chart;","         };","         chart.x = function(_) {","             if (!arguments.length) return x;","             x = _;","             axis.scale(x);","             brush.x(x);","             return chart;","         };","         chart.y = function(_) {","             if (!arguments.length) return y;","             y = _;","             return chart;","         };","         chart.dimension = function(_) {","             if (!arguments.length) return dimension;","             dimension = _;","             return chart;","         };","         chart.filter = function(_) {","             if (_) {","                 brush.extent(_);","                 dimension.filterRange(_);","             } else {","                 brush.clear();","                 dimension.filterAll();","             }","             brushDirty = true;","             return chart;","         };","         chart.group = function(_) {","             if (!arguments.length) return group;","             group = _;","             return chart;","         };","         chart.round = function(_) {","             if (!arguments.length) return round;","             round = _;","             return chart;","         };","         return d3.rebind(chart, brush, \"on\");","     }"," });","</script>`;","","const response = pm.response.json();","","// DATA PARSING ","// Replace string version of duration with log of seconds (ie: \"1 minute\" -> \"log(60)\")","const mappedData = response.map(s => {","        if (!!s.runtime) {","            s.runtimeMinutes = s.runtime;","            s.runtime = Math.floor(Math.random() * Math.floor(90));","            s.runtime = Math.log(s.runtime*60);","            let randomNumber = Math.floor(Math.random() * Math.floor(24));","            if (randomNumber < 10) {","                s.airstamp = s.airstamp.substring(0, s.airstamp.indexOf(\"T\")+1) +\"0\"+randomNumber + s.airstamp.substring(s.airstamp.indexOf(\"T\")+3);","            } else {","                s.airstamp = s.airstamp.substring(0, s.airstamp.indexOf(\"T\")+1) + randomNumber + s.airstamp.substring(s.airstamp.indexOf(\"T\")+3);","            }","        }","        const airstamp = new Date(s.airstamp);","        s.date = airstamp.toDateString();","        s.time = airstamp.toTimeString();","        return s;","    })","    .filter(s => !!s.runtime);","     ","// Set the range for duration","const durationRange = mappedData","     .map(s => s.runtime)","     .reduce((a, c) => {","         if (c < a[0]) {","             a[0] = c;","         }","         if (c > a[1]) {","             a[1] = c;","         }","         return a;","     }, [10000, 0]);","durationRange[0] = Math.floor(durationRange[0]);","durationRange[1] = Math.ceil(durationRange[1]);","","// Each array element denotes a column of the table displayed under the barcharts, with header being the column header and field being the data access field to retrieve the data for that row","const tableRow = [","    {","        header: 'Date',","        field: 'date'","    },","    {","        header: 'Time',","        field: 'time'","    },","    {","        header: 'Title',","        field: 'name'","    },","    {","        header: 'Runtime',","        field: 'runtimeMinutes'","    }","];","","// Set graph titles","const title = \"American Horror Story Episodes\";","const durationTitle = \"Length of Episode\";","const dateTitle = \"Time of Day Broadcasted\";","","pm.visualizer.set(template, {","    dateTitle,","    durationTitle,","    durationRange,","    mappedData,","    tableRow,","    title,","});",""],"type":"text/javascript"}}],"id":"e45cdf52-591a-49a6-95e8-54e1b0c2c336","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":"http://api.tvmaze.com/shows/30/episodes","description":"Visualizes how broadcast time affects episode length of American Horror Story using TVMaze API.\n\n<br>\n\n_Sample JSON response_\n```\n[\n    {\n        \"id\": 1567,\n        \"url\": \"http://www.tvmaze.com/episodes/1567/american-horror-story-1x01-pilot\",\n        \"name\": \"Pilot\",\n        \"season\": 1,\n        \"number\": 1,\n        \"airdate\": \"2011-10-05\",\n        \"airtime\": \"22:00\",\n        \"airstamp\": \"2011-10-06T02:00:00+00:00\",\n        \"runtime\": 60,\n        \"image\": {\n            \"medium\": \"http://static.tvmaze.com/uploads/images/medium_landscape/13/32733.jpg\",\n            \"original\": \"http://static.tvmaze.com/uploads/images/original_untouched/13/32733.jpg\"\n        },\n        \"summary\": \"<p>Therapist Ben Harmon, his wife, Vivien, and their daughter, Violet, move across the country to Los Angeles to escape their troubled past.</p>\",\n        \"_links\": {\n            \"self\": {\n                \"href\": \"http://api.tvmaze.com/episodes/1567\"\n            }\n        }\n    },\n    {\n        \"id\": 1568,\n        \"url\": \"http://www.tvmaze.com/episodes/1568/american-horror-story-1x02-home-invasion\",\n        \"name\": \"Home Invasion\",\n        \"season\": 1,\n        \"number\": 2,\n        \"airdate\": \"2011-10-12\",\n        \"airtime\": \"22:00\",\n        \"airstamp\": \"2011-10-13T02:00:00+00:00\",\n        \"runtime\": 60,\n        \"image\": {\n            \"medium\": \"http://static.tvmaze.com/uploads/images/medium_landscape/13/32734.jpg\",\n            \"original\": \"http://static.tvmaze.com/uploads/images/original_untouched/13/32734.jpg\"\n        },\n        \"summary\": \"<p>Serial killer enthusiasts reenact the brutal murders of two nursing students, while Ben returns to Boston to fix a mistake involving an old flame.</p>\",\n        \"_links\": {\n            \"self\": {\n                \"href\": \"http://api.tvmaze.com/episodes/1568\"\n            }\n        }\n    },\n    ...\n]\n```\n<br>\n\n_Sample Crossfilter_\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/cross-filter/TVMaze.PNG \"[Crossfilter]\")"},"response":[],"_postman_id":"e45cdf52-591a-49a6-95e8-54e1b0c2c336"},{"name":"Twitter","event":[{"listen":"test","script":{"id":"cfe6e975-3bd2-4ccc-a53e-2ebdc920b14a","exec":["const template = `","<style>","#charts {","    display: flex;","}","",".chartGroup {","    display: flex;","    flex-direction: column;","    align-items: center;","    margin: 32px;","}","#body {","    display: flex;","    align-items: center;","    flex-direction: column;","    background-color: white;","}","","#charts {","  padding: 10px 0;","}",".chart {","  display: inline-block;","  height: 151px;","  margin-bottom: 20px;","}",".reset {","  padding-left: 1em;","  font-size: smaller;","  color: #ccc;","}",".background.bar {","  fill: #E0DFD5;","}",".foreground.bar {","  fill: #F17D12;","}",".axis path, .axis line {","  fill: none;","  stroke: #000;","  shape-rendering: crispEdges;","}",".axis text {","  font: 10px sans-serif;","}",".brush rect.extent {","  fill: #F17D12;","  fill-opacity: .125;","}",".brush .resize path {","  fill: #eee;","  stroke: #666;","}","table {","    margin: 0 100px","}","h4 {","    font: 30px sans-serif;","    font-weight: bold;","    margin-top: 20;","    margin-bottom: 0;","}","","</style>","<script src=\"https://d3js.org/d3.v3.min.js\"></script>","<script src=\"https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js\"></script>","<div id=\"body\">","    <h4>{{title}}</h4>","    <div id=\"charts\">","        <div class=\"chartGroup\">","            <p>{{durationTitle}}</p>","            <div class=\"chart\"></div>","        </div>","        <div class=\"chartGroup\">","            <p>{{dateTitle}}</p>","            <div class=\"chart\"></div>","        </div>","    </div>","    <div id=\"lists\">","      <table class=\"list\">","        <tr>","            {{#each tableRow}}","                <th>{{this.header}}</th>","            {{/each}}","        </tr>","      </table>","    </div>","</div>","<script>"," pm.getData((err, value) => {","     const durationRange = value.durationRange;","     const sightingsData = value.sightings.map((d) => {","        d.created_at = new Date(Date.parse(d.created_at));","        return d;","     });","     const sightings = crossfilter(sightingsData);","     const all = sightings.groupAll();","","     const date = sightings.dimension(function(d) {","                return d.created_at.getHours();","         }),","         dates = date.group(Math.floor),","         duration = sightings.dimension(function(d) {","             return d.favorite_count;","         }),","         durations = duration.group(Math.floor);","","     const charts = [","         barChart()","             .dimension(duration)","             .group(durations)","         .x(d3.scale.linear()","             .domain(durationRange)","             .rangeRound([0, 10 * durationRange[1]])),","         barChart()","             .dimension(date)","             .group(dates)","         .x(d3.scale.linear()","             .domain([0, 24])","             .rangeRound([0, 10 * 24])),","     ]","    ","    // Render the initial lists.","    const list = d3.selectAll(\".list\")","        .data([listFunc]);","","","","    // Various formatters.","    var formatNumber = d3.format(\",d\"),","        formatChange = d3.format(\"+,d\"),","        formatDate = d3.time.format(\"%B %d, %Y\"),","        formatTime = d3.time.format(\"%I:%M %p\");","","    // A nest operator, for grouping the flight list.","    var nestByDate = d3.nest()","        .key(function(d) { ","            const date = new Date(d.airstamp)","            return d3.time.day(date); ","        });","","","     // Given our array of charts, which we assume are in the same order as the","     // .chart elements in the DOM, bind the charts to the DOM and render them.","     // We also listen to the chart's brush events to update the display.","     var chart = d3.selectAll(\".chart\")","         .data(charts)","         .each(function(chart) {","             chart.on(\"brush\", renderAll).on(\"brushend\", renderAll);","         });","","     renderAll();","     // Renders the specified chart or list.","     function render(method) {","         d3.select(this).call(method);","     }","     ","     // Whenever the brush moves, re-rendering everything.","     function renderAll() {","         chart.each(render);","         list.each(render);","         d3.select(\"#active\").text(formatNumber(all.value()));","     }","     ","     ","","    function listFunc(div) {","        div.each(function() {","            const tableData = d3.select(this).selectAll(\".sighting\")","                .data(date.top(40), function(d) { return d3.time.day(d.created_at) })","            const rowEnter = tableData.enter().append(\"tr\")","                 .attr(\"class\", \"sighting\");","            for (const {header, field} of value.tableRow) {","                rowEnter.append(\"td\")","                    .attr(\"class\", header)","                    .text(function(d) {","                        return d[field];","                    });","            }","            tableData.exit().remove();","            tableData.order();","        });","    }","","","     function barChart() {","         if (!barChart.id) barChart.id = 0;","         var margin = {","                 top: 10,","                 right: 10,","                 bottom: 20,","                 left: 10","             },","             x,","             y = d3.scale.linear().range([100, 0]),","             id = barChart.id++,","             axis = d3.svg.axis().orient(\"bottom\"),","             brush = d3.svg.brush(),","             brushDirty,","             dimension,","             group,","             round;","         function chart(div) {","             var width = x.range()[1],","                 height = y.range()[0];","             y.domain([0, group.top(1)[0].value]);","             ","             div.each(function() {","                 var div = d3.select(this),","                     g = div.select(\"g\");","                     ","                 // Create the skeletal chart.","                 if (g.empty()) {","                     div.select(\".title\").append(\"a\")","                         .attr(\"href\", \"javascript:reset(\" + id + \")\")","                         .attr(\"class\", \"reset\")","                         .text(\"reset\")","                         .style(\"display\", \"none\");","                     g = div.append(\"svg\")","                         .attr(\"width\", width + margin.left + margin.right)","                         .attr(\"height\", height + margin.top + margin.bottom)","                         .append(\"g\")","                         .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","                     g.append(\"clipPath\")","                         .attr(\"id\", \"clip-\" + id)","                         .append(\"rect\")","                         .attr(\"width\", width)","                         .attr(\"height\", height);","                     g.selectAll(\".bar\")","                         .data([\"background\", \"foreground\"])","                         .enter().append(\"path\")","                         .attr(\"class\", function(d) {","                             return d + \" bar\";","                         })","                         .datum(group.all());","                     g.selectAll(\".foreground.bar\")","                         .attr(\"clip-path\", \"url(#clip-\" + id + \")\");","                     g.append(\"g\")","                         .attr(\"class\", \"axis\")","                         .attr(\"transform\", \"translate(0,\" + height + \")\")","                         .call(axis);","                         ","                     // Initialize the brush component with pretty resize handles.","                     var gBrush = g.append(\"g\").attr(\"class\", \"brush\").call(brush);","                     gBrush.selectAll(\"rect\").attr(\"height\", height);","                     gBrush.selectAll(\".resize\").append(\"path\").attr(\"d\", resizePath);","                 }","                 // Only redraw the brush if set externally.","                 if (brushDirty) {","                     brushDirty = false;","                     g.selectAll(\".brush\").call(brush);","                     div.select(\".title a\").style(\"display\", brush.empty() ? \"none\" : null);","                     if (brush.empty()) {","                         g.selectAll(\"#clip-\" + id + \" rect\")","                             .attr(\"x\", 0)","                             .attr(\"width\", width);","                     } else {","                         var extent = brush.extent();","                         g.selectAll(\"#clip-\" + id + \" rect\")","                             .attr(\"x\", x(extent[0]))","                             .attr(\"width\", x(extent[1]) - x(extent[0]));","                     }","                 }","                 g.selectAll(\".bar\").attr(\"d\", barPath);","             });","","             function barPath(groups) {","                 var path = [],","                     i = -1,","                     n = groups.length,","                     d;","                 while (++i < n) {","                     d = groups[i];","                     path.push(\"M\", x(d.key), \",\", height, \"V\", y(d.value), \"h9V\", height);","                 }","                 return path.join(\"\");","             }","","             function resizePath(d) {","                 var e = +(d == \"e\"),","                     x = e ? 1 : -1,","                     y = height / 3;","                 return \"M\" + (.5 * x) + \",\" + y +","                     \"A6,6 0 0 \" + e + \" \" + (6.5 * x) + \",\" + (y + 6) +","                     \"V\" + (2 * y - 6) +","                     \"A6,6 0 0 \" + e + \" \" + (.5 * x) + \",\" + (2 * y) +","                     \"Z\" +","                     \"M\" + (2.5 * x) + \",\" + (y + 8) +","                     \"V\" + (2 * y - 8) +","                     \"M\" + (4.5 * x) + \",\" + (y + 8) +","                     \"V\" + (2 * y - 8);","             }","         }","         brush.on(\"brushstart.chart\", function() {","             var div = d3.select(this.parentNode.parentNode.parentNode);","             div.select(\".title a\").style(\"display\", null);","         });","         brush.on(\"brush.chart\", function() {","             var g = d3.select(this.parentNode),","                 extent = brush.extent();","             if (round) g.select(\".brush\")","                 .call(brush.extent(extent = extent.map(round)))","                 .selectAll(\".resize\")","                 .style(\"display\", null);","             g.select(\"#clip-\" + id + \" rect\")","                 .attr(\"x\", x(extent[0]))","                 .attr(\"width\", x(extent[1]) - x(extent[0]));","             dimension.filterRange(extent);","         });","         brush.on(\"brushend.chart\", function() {","             if (brush.empty()) {","                 var div = d3.select(this.parentNode.parentNode.parentNode);","                 div.select(\".title a\").style(\"display\", \"none\");","                 div.select(\"#clip-\" + id + \" rect\").attr(\"x\", null).attr(\"width\", \"100%\");","                 dimension.filterAll();","             }","         });","         chart.margin = function(_) {","             if (!arguments.length) return margin;","             margin = _;","             return chart;","         };","         chart.x = function(_) {","             if (!arguments.length) return x;","             x = _;","             axis.scale(x);","             brush.x(x);","             return chart;","         };","         chart.y = function(_) {","             if (!arguments.length) return y;","             y = _;","             return chart;","         };","         chart.dimension = function(_) {","             if (!arguments.length) return dimension;","             dimension = _;","             return chart;","         };","         chart.filter = function(_) {","             if (_) {","                 brush.extent(_);","                 dimension.filterRange(_);","             } else {","                 brush.clear();","                 dimension.filterAll();","             }","             brushDirty = true;","             return chart;","         };","         chart.group = function(_) {","             if (!arguments.length) return group;","             group = _;","             return chart;","         };","         chart.round = function(_) {","             if (!arguments.length) return round;","             round = _;","             return chart;","         };","         return d3.rebind(chart, brush, \"on\");","     }"," });","</script>`;","","const response = pm.response.json();","","// DATA PARSING ","//Replace string version of duration with log of seconds (ie: \"1 minute\" -> \"log(60)\")","const sightings = response.statuses.map(s => {","         s.handle = s.user.screen_name;","         s.favorites = s.favorite_count;","         s.favorite_count = Math.log(s.favorite_count);","         return s;","     });","","// set the range for duration","const durationRange = sightings","     .map(s => s.favorite_count)","     .reduce((a, c) => {","         if (c < a[0]) {","             a[0] = c;","         }","         if (c > a[1]) {","             a[1] = c;","         }","         return a;","     }, [10000, 0]);","durationRange[0] = Math.floor(durationRange[0]);","durationRange[1] = Math.ceil(durationRange[1]);","","// Each array element denotes a column of the table displayed under the barcharts, with header being the column header and field being the data access field to retrieve the data for that row","const tableRow = [","    {","        header: 'Timestamp',","        field: 'created_at'","    },","    {","        header: 'Username',","        field: 'handle'","    },","    {","        header: 'Favorites',","        field: 'favorites'","    },","    {","        header: 'Tweet',","        field: 'text'","    }","];","","// Set graph titles","const title = \"Tweets\";","const durationTitle = \"Number of Favorites\";","const dateTitle = \"Time of Day\";","","pm.visualizer.set(template, {","    dateTitle,","    durationTitle,","    durationRange,","    sightings,","    tableRow,","    title,","});",""],"type":"text/javascript"}}],"id":"7a955949-5647-4143-829a-23c74ad2e150","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[{"key":"Authorization","value":"Bearer AAAAAAAAAAAAAAAAAAAAAGC%2BAAEAAAAAQBDuL%2BuzLMt2L1V6vVejiYu%2By%2Fg%3DbhzUhGy3XIGSTOgi6ptQSBowr4dRRx4dmigMBNgiN3rS5RZ51l","type":"text"},{"key":"Content-Type","value":"application/json","type":"text"}],"url":{"raw":"https://api.twitter.com/1.1/search/tweets.json?q=@McDonalds&result_type=popular&count=50","protocol":"https","host":["api","twitter","com"],"path":["1.1","search","tweets.json"],"query":[{"key":"q","value":"@McDonalds"},{"key":"result_type","value":"popular"},{"key":"count","value":"50"}]},"description":"Correlation between number of favorites and time of day using Twitter API.\n\n<br/><br/>\n\n_Sample JSON response_\n```\n{\n    \"statuses\": [\n        {\n            \"created_at\": \"Tue Nov 19 02:45:41 +0000 2019\",\n            \"id\": 1196620530998292481,\n            \"id_str\": \"1196620530998292481\",\n            \"text\": \"Career-high 26 points for @H23Ash\\n\\n@Wendys Player of the Game https://t.co/1KNWg7tfXT\",\n            \"truncated\": false,\n            \"entities\": {\n                \"hashtags\": [],\n                \"symbols\": [],\n                \"user_mentions\": [\n                    {\n                        \"screen_name\": \"H23Ash\",\n                        \"name\": \"ashton hagans\",\n                        \"id\": 2682044908,\n                        \"id_str\": \"2682044908\",\n                        \"indices\": [\n                            26,\n                            33\n                        ]\n                    },\n                    {\n                        \"screen_name\": \"Wendys\",\n                        \"name\": \"Wendy's\",\n                        \"id\": 59553554,\n                        \"id_str\": \"59553554\",\n                        \"indices\": [\n                            35,\n                            42\n                        ]\n                    }\n                ],\n                \"urls\": [],\n                \"media\": [\n                    {\n                        \"id\": 1196620092886388737,\n                        \"id_str\": \"1196620092886388737\",\n                        \"indices\": [\n                            62,\n                            85\n                        ],\n                        \"media_url\": \"http://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"media_url_https\": \"https://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"url\": \"https://t.co/1KNWg7tfXT\",\n                        \"display_url\": \"pic.twitter.com/1KNWg7tfXT\",\n                        \"expanded_url\": \"https://twitter.com/KentuckyMBB/status/1196620530998292481/video/1\",\n                        \"type\": \"photo\",\n                        \"sizes\": {\n                            \"thumb\": {\n                                \"w\": 150,\n                                \"h\": 150,\n                                \"resize\": \"crop\"\n                            },\n                            \"small\": {\n                                \"w\": 680,\n                                \"h\": 381,\n                                \"resize\": \"fit\"\n                            },\n                            \"large\": {\n                                \"w\": 2048,\n                                \"h\": 1149,\n                                \"resize\": \"fit\"\n                            },\n                            \"medium\": {\n                                \"w\": 1200,\n                                \"h\": 673,\n                                \"resize\": \"fit\"\n                            }\n                        }\n                    }\n                ]\n            },\n            \"extended_entities\": {\n                \"media\": [\n                    {\n                        \"id\": 1196620092886388737,\n                        \"id_str\": \"1196620092886388737\",\n                        \"indices\": [\n                            62,\n                            85\n                        ],\n                        \"media_url\": \"http://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"media_url_https\": \"https://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"url\": \"https://t.co/1KNWg7tfXT\",\n                        \"display_url\": \"pic.twitter.com/1KNWg7tfXT\",\n                        \"expanded_url\": \"https://twitter.com/KentuckyMBB/status/1196620530998292481/video/1\",\n                        \"type\": \"video\",\n                        \"sizes\": {\n                            \"thumb\": {\n                                \"w\": 150,\n                                \"h\": 150,\n                                \"resize\": \"crop\"\n                            },\n                            \"small\": {\n                                \"w\": 680,\n                                \"h\": 381,\n                                \"resize\": \"fit\"\n                            },\n                            \"large\": {\n                                \"w\": 2048,\n                                \"h\": 1149,\n                                \"resize\": \"fit\"\n                            },\n                            \"medium\": {\n                                \"w\": 1200,\n                                \"h\": 673,\n                                \"resize\": \"fit\"\n                            }\n                        },\n                        \"video_info\": {\n                            \"aspect_ratio\": [\n                                16,\n                                9\n                            ],\n                            \"duration_millis\": 10000,\n                            \"variants\": [\n                                {\n                                    \"content_type\": \"application/x-mpegURL\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/pl/eU57Vz_XjLHPN7BN.m3u8?tag=13\"\n                                },\n                                {\n                                    \"bitrate\": 288000,\n                                    \"content_type\": \"video/mp4\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/vid/480x270/yFA0o-64ynB05Hz6.mp4?tag=13\"\n                                },\n                                {\n                                    \"bitrate\": 2176000,\n                                    \"content_type\": \"video/mp4\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/vid/1024x576/6n2YPpRVMIxoJa0P.mp4?tag=13\"\n                                },\n                                {\n                                    \"bitrate\": 832000,\n                                    \"content_type\": \"video/mp4\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/vid/640x360/igUHJBlF8aRncGC4.mp4?tag=13\"\n                                }\n                            ]\n                        },\n                        \"additional_media_info\": {\n                            \"title\": \"Ashton Hagans\",\n                            \"description\": \"Wendy's Player of the Game\",\n                            \"embeddable\": true,\n                            \"monetizable\": false\n                        }\n                    }\n                ]\n            },\n            \"metadata\": {\n                \"result_type\": \"popular\",\n                \"iso_language_code\": \"en\"\n            },\n            \"source\": \"<a href=\\\"https://studio.twitter.com\\\" rel=\\\"nofollow\\\">Twitter Media Studio</a>\",\n            \"in_reply_to_status_id\": null,\n            \"in_reply_to_status_id_str\": null,\n            \"in_reply_to_user_id\": null,\n            \"in_reply_to_user_id_str\": null,\n            \"in_reply_to_screen_name\": null,\n            \"user\": {\n                \"id\": 35583547,\n                \"id_str\": \"35583547\",\n                \"name\": \"Kentucky Basketball\",\n                \"screen_name\": \"KentuckyMBB\",\n                \"location\": \"Rupp Arena\",\n                \"description\": \"Official Twitter account for Kentucky Men’s Basketball. #TGT - 𝗧he 𝗚reatest 𝗧radition. Eight-time NCAA champions, winningest program in college basketball.\",\n                \"url\": \"https://t.co/HcLn0lkgYi\",\n                \"entities\": {\n                    \"url\": {\n                        \"urls\": [\n                            {\n                                \"url\": \"https://t.co/HcLn0lkgYi\",\n                                \"expanded_url\": \"http://giphy.com/kentuckymbb\",\n                                \"display_url\": \"giphy.com/kentuckymbb\",\n                                \"indices\": [\n                                    0,\n                                    23\n                                ]\n                            }\n                        ]\n                    },\n                    \"description\": {\n                        \"urls\": []\n                    }\n                },\n                \"protected\": false,\n                \"followers_count\": 791003,\n                \"friends_count\": 653,\n                \"listed_count\": 1217,\n                \"created_at\": \"Sun Apr 26 22:25:01 +0000 2009\",\n                \"favourites_count\": 549,\n                \"utc_offset\": null,\n                \"time_zone\": null,\n                \"geo_enabled\": true,\n                \"verified\": true,\n                \"statuses_count\": 35138,\n                \"lang\": null,\n                \"contributors_enabled\": false,\n                \"is_translator\": false,\n                \"is_translation_enabled\": false,\n                \"profile_background_color\": \"0A11B8\",\n                \"profile_background_image_url\": \"http://abs.twimg.com/images/themes/theme1/bg.png\",\n                \"profile_background_image_url_https\": \"https://abs.twimg.com/images/themes/theme1/bg.png\",\n                \"profile_background_tile\": false,\n                \"profile_image_url\": \"http://pbs.twimg.com/profile_images/1192886378310373378/XGgfxVMk_normal.jpg\",\n                \"profile_image_url_https\": \"https://pbs.twimg.com/profile_images/1192886378310373378/XGgfxVMk_normal.jpg\",\n                \"profile_banner_url\": \"https://pbs.twimg.com/profile_banners/35583547/1502115999\",\n                \"profile_link_color\": \"060404\",\n                \"profile_sidebar_border_color\": \"FFFFFF\",\n                \"profile_sidebar_fill_color\": \"FFFFFF\",\n                \"profile_text_color\": \"060404\",\n                \"profile_use_background_image\": true,\n                \"has_extended_profile\": false,\n                \"default_profile\": false,\n                \"default_profile_image\": false,\n                \"following\": null,\n                \"follow_request_sent\": null,\n                \"notifications\": null,\n                \"translator_type\": \"none\"\n            },\n            \"geo\": null,\n            \"coordinates\": null,\n            \"place\": null,\n            \"contributors\": null,\n            \"is_quote_status\": false,\n            \"retweet_count\": 69,\n            \"favorite_count\": 602,\n            \"favorited\": false,\n            \"retweeted\": false,\n            \"possibly_sensitive\": false,\n            \"lang\": \"en\"\n        },\n        ...\n    ]\n}\n```\n\n\n<br>\n<br>\n\n_Sample Crossfilter_\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/cross-filter/Twitter.PNG \"[Crossfilter]\")"},"response":[],"_postman_id":"7a955949-5647-4143-829a-23c74ad2e150"}],"id":"2d200157-855e-43e9-936f-ef85a266e496","description":"Source: https://square.github.io/crossfilter/\n\nThis folder contains three sample usages for the map visualizer.\n\n1. UFO Sightings\n2. TVMaze\n3. Twitter\n\n<br>\n\nFor detailed descriptions of a request, check its description. \n\n<br>\n\n**Data Parsing**\n\nData parsing is done at the bottom of the test script and at the top of the test script, in the template string.\nAt the bottom of the test script, the data is passed in to the template string.\n<br>\n\n**Crossfilter Use**\n\nDrag mouse across the bars of a graph to filter data based on the graph field.","_postman_id":"2d200157-855e-43e9-936f-ef85a266e496"},{"name":"Map","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":"e3b34d42-f80e-48f3-826e-33cf0b0424dd","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":"e3b34d42-f80e-48f3-826e-33cf0b0424dd"},{"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":"d5bc3aae-76e9-4e62-a940-b0f4e69f3a12","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":"d5bc3aae-76e9-4e62-a940-b0f4e69f3a12"},{"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":"2abe7661-a6d2-4eaf-a990-d0504c113169","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":"2abe7661-a6d2-4eaf-a990-d0504c113169"},{"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":"3cd3eb1f-6789-48c8-8af7-18e0bc6d9a17","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":"3cd3eb1f-6789-48c8-8af7-18e0bc6d9a17"}],"id":"c2d948fe-942c-49b6-881b-82e94c1137f9","description":"This folder 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.","_postman_id":"c2d948fe-942c-49b6-881b-82e94c1137f9"},{"name":"Tree","item":[{"name":"Spotify Top Tracks","event":[{"listen":"test","script":{"id":"9b46cc80-0c65-439d-8a25-0e1b19f64642","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<style>","body {","    display: flex;","    align-items: center;","    justify-content: center;","    background-color: #F5F5F5;","   ","}","",".container {","    position: absolute;","    z-index: -999;","    height: 100vh;","    width: 100vw;","}","",".tooltip {","    z-index: 99;","    position: absolute;","    font-size: 12px;","    width: auto;","    height: auto;","    pointer-events: none;","    background-color: white;","    padding: 3px;","    opacity: 1;","}","",".point {","    fill: #F5F5F5;","    stroke: #F09D51;","    stroke-width: 2px;","}","","</style>","<div id=\"tree\"></div>","<div class=\"container\">","<script>","const treeData = {{{results}}};","var maxChildren = 0;","var treeLevelSpan = {0:1};","","//finds the max number of nodes in a column","function getMaxChildrenSpan(input, level) {","    var childrenLength = 0;","    if (input.hasOwnProperty(\"children\") && input[\"children\"] != null && typeof input[\"children\"] != undefined ) {","        childrenLength =  input.children.length;","    }","    let totalNumChildren = 0;","    if (input.hasOwnProperty(\"children\") && input[\"children\"] != null && typeof input[\"children\"] != undefined) {","        for (let child of input.children) {","            if (child.hasOwnProperty(\"children\") && child[\"children\"] != null && typeof child[\"children\"] != undefined) {","                getMaxChildrenSpan(child, level + 1)","            }","        }","    }","    if (level in treeLevelSpan) {","        treeLevelSpan[level] += childrenLength;","    }","    else {","        treeLevelSpan[level] = childrenLength;","    }","}","getMaxChildrenSpan(treeData, 1);","let arrayOfLevelSpan = Object.values(treeLevelSpan)","let maxSpan = Math.max(...arrayOfLevelSpan);","","","// Set the dimensions and margins of the diagram","var margin = {top: 20, right: 90, bottom: 30, left:90},","    width = 960 - margin.left - margin.right,","    height = 500 + (maxSpan*30) - margin.top - margin.bottom;","","","","// append the svg object to the body of the page","// appends a 'group' element to 'svg'","// moves the 'group' element to the top left margin","var svg = d3.select(\"body\").append(\"svg\")","    .attr(\"width\", width + margin.right + margin.left)","    .attr(\"height\", height + margin.top + margin.bottom)","    .append(\"g\")","        .attr(\"transform\", \"translate(\"","            + margin.left  + \",\" + margin.top + \")\");","","","var i = 0,","    duration = 750,","    root;","","// declares a tree layout and assigns the size","var treemap = d3.tree().size([height, width]);","","// Assigns parent, children, height, depth","root = d3.hierarchy(treeData, function(d) { return d.children; });","root.x0 = height / 2;","root.y0 = 0;","","// Collapse after the second level","// root.children.forEach(collapse);","","update(root);","","// Collapse the node and all it's children","function collapse(d) {","  if(d.children) {","    d._children = d.children","    d._children.forEach(collapse)","    d.children = null","  }","}","","function update(source) {","  // Assigns the x and y position for the nodes","  var treeData = treemap(root);","  ","  //svg height dynamically changed by max number of open nodes in a column","  treeLevelSpan = {};","  getMaxChildrenSpan(root, 1);","  arrayOfLevelSpan = Object.values(treeLevelSpan)","  maxSpan = Math.max(...arrayOfLevelSpan);","  height = 500 + (maxSpan*30) - margin.top - margin.bottom;","  treeData = d3.tree().size([height, width])(root);","","","  // Compute the new tree layout.","  var nodes = treeData.descendants(),","      links = treeData.descendants().slice(1);","","  // Normalize for fixed-depth.","  nodes.forEach(function(d) { d.y = d.depth * width * 0.25 });","","  // ****************** Nodes section ***************************","","  // Update the nodes...","  var node = svg.selectAll('g.node')","      .data(nodes, function(d) {return d.id || (d.id = ++i); });","","  // Enter any new nodes at the parent's previous position.","  var nodeEnter = node.enter().append('g')","      .attr('class', 'node')","      .attr(\"transform\", function(d) {","        return \"translate(\" + source.y0 + \",\" + source.x0 + \")\";","    })","    .on('click', click);","    ","    // Create hover tooltip","    let tooltip = d3.select(\"#tree\").append(\"div\")","        .attr(\"class\", \"tooltip\")","        ","    // tooltip mouseover event handler","    let tipMouseover = function(d) {","        tooltip.html(\"Data Type: <br/>\" + d.data.type)","            .style(\"left\", (d3.event.pageX + 40) + \"px\")","            .style(\"top\", (d3.event.pageY - 15) + \"px\")","          .transition()","            .duration(200)      // ms","            ","    };","    // tooltip mouseout event handler","    let tipMouseout = function(d){","        tooltip.transition()","            .duration(300)","            .style(\"opacity\", 0);","    };","    ","    ","  // Add Circle for the nodes","  nodeEnter.append('circle')","      .attr('class', 'point')","      .attr('r', 1e-6)","      .on(\"mouseover\", tipMouseover)","      .on(\"mouseout\", tipMouseout)","      .style(\"fill\", function(d) {","          return d._children ? \"#F4B780\" : \"#fff\";","      })","      ","      ","  // Add labels for the nodes","  nodeEnter.append('text')","      .attr(\"dy\", \".35em\")","      .attr(\"x\", function(d) {","          return d.children || d._children ? -20 : 20;","      })","      .attr(\"text-anchor\", function(d) {","          return d.children || d._children ? \"end\" : \"start\";","      })","      .text(function(d) { return d.data.name; });","      ","","  // UPDATE","  var nodeUpdate = nodeEnter.merge(node);","","  // Transition to the proper position for the node","  nodeUpdate.transition()","    .duration(duration)","    .attr(\"transform\", function(d) { ","        return \"translate(\" + d.y + \",\" + d.x +\")\";//this","     });","","  // Update the node attributes and style","  nodeUpdate.select('circle.point')","    .attr('r', 10)","    .style(\"fill\", function(d) {","        return d._children ? \"#F4B780\" : \"#F5F5F5\";","    })","    .attr('cursor', 'pointer');","","","  // Remove any exiting nodes","  var nodeExit = node.exit().transition()","      .duration(duration)","      .attr(\"transform\", function(d) {","          return \"translate(\" + source.y + \",\" + source.x + \")\"; ","      })","      .remove();","","  // On exit reduce the node circles size to 0","  nodeExit.select('circle')","    .attr('r', 0);","","  // On exit reduce the opacity of text labels","  nodeExit.select('text')","    .style('fill-opacity', 0);","","  // ****************** links section ***************************","","  // Update the links...","  var link = svg.selectAll('path.link') ","      .data(links, function(d) { return d.id; });","","  // Enter any new links at the parent's previous position.","  var linkEnter = link.enter().insert('path', \"g\")","      .attr(\"class\", \"link\")","      .attr('d', function(d){","        var o = {x: source.x0, y: source.y0}","        return diagonal(o, o)","      })","      .style(\"fill\", \"none\")","      .style(\"stroke\",\"#c5c5c5\")","      .style(\"stroke-width\", \"1px\");","","  // UPDATE","  var linkUpdate = linkEnter.merge(link);","","  // Transition back to the parent element position","  linkUpdate.transition()","      .duration(duration)","      .attr('d', function(d){ return diagonal(d, d.parent) });","","  // Remove any exiting links","  var linkExit = link.exit().transition()","      .duration(duration)","      .attr('d', function(d) {","        var o = {x: source.x, y: source.y}","        return diagonal(o, o)","      })","      .remove();","","  // Store the old positions for transition.","  ","  nodes.forEach(function(d){","    d.x0 = d.x;","    d.y0 = d.y;","  });","","  // Creates a curved (diagonal) path from parent to the child nodes","  function diagonal(s, d) {","    path = \"M \" + s.y +\" \" + s.x + \" \" +","           \"C \" + (s.y + d.y)/2 + \" \" + s.x +\", \"","        +  (s.y + d.y)/2 +\" \" + d.x + \" , \"","        +  d.y + \" \" + d.x;","    return path;","  }","","  // Toggle children on click.","  function click(d) {","    if (d.children) {","        d._children = d.children;","        d.children = null;","      } else {","        d.children = d._children;","        d._children = null;","      }","    update(d);","  }"," ","}","","</script>","`;","","","/* DATA PARSING */","const response = pm.response.json();","","function parseData(jsonInput) {","    // Function that checks if object is a dictionary","    function isDictionary(obj) {","        if (typeof obj == \"object\" && !Array.isArray(obj) && obj !== null) {","            return true;","        } else {","            return false;","        }","    }","    ","    // Declare and initialize the root node","    const dataTree = {};","    ","    dataTree[\"name\"] = \"response\";","    dataTree[\"children\"] = [];","    dataTree[\"type\"] = typeof(dataTree);","    ","    // Recursively reformats the json file ","    // See documentation for format","    function restructure(input, arr) {","        for (let node in input) {","            const dict = {};","            if (isDictionary(input[node])) {","                dict.name = node;","                dict.type = \"dictionary\"","                dict.children = [];","                restructure(input[node], dict.children);","            } else {","                if (Array.isArray(input[node])) {","                    dict.type = \"array\";              ","                }","                else if (input[node] === null) {","                    dict.type = \"null\";","                }","                else {","                    dict.type = typeof(input[node]);","                }","                dict.name = node;","            }","            arr.push(dict);","        }","    }","    ","    // Calls restructure on the first object in the response","    restructure(jsonInput, dataTree.children);","    ","    return dataTree","    ","}","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","  // Template will receive stringified JSON","  ","  /* EDIT THIS LINE: Here we grab the first object from the reponse dictionary as all","    objects in the dictionary have the same structure */","  results: JSON.stringify(parseData(response.tracks[0]))","});",""],"type":"text/javascript"}}],"id":"4ffd830d-7398-438e-83e1-659de635f6ad","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"auth":{"type":"oauth2","oauth2":{"accessToken":"BQCZZ7RydVUZRG-JPEvc8AEIwBWu7Jl94DI8aRZStedqcUoVjN1NwuJ2oario6Pg85X-ROEkDbMFL5haq-Y","tokenType":"Bearer","addTokenTo":"header"}},"method":"GET","header":[{"key":"Content-Type","name":"Content-Type","value":"application/x-www-form-urlencoded","type":"text"}],"body":{"mode":"urlencoded","urlencoded":[]},"url":{"raw":"https://api.spotify.com/v1/artists/43ZHCT0cAZBISjO8DG9PnE/top-tracks?country=SE","protocol":"https","host":["api","spotify","com"],"path":["v1","artists","43ZHCT0cAZBISjO8DG9PnE","top-tracks"],"query":[{"key":"country","value":"SE"}]},"description":"Visualizes the structure of the response from the Spotify API: top tracks.\n<br/>\n<br/>\n_Sample JSON response_\n```\n{\n  \"tracks\": [\n    {\n      \"album\": {\n        \"album_type\": \"album\",\n        \"artists\": [\n          {\n            \"external_urls\": {\n              \"spotify\": \"https://open.spotify.com/artist/43ZHCT0cAZBISjO8DG9PnE\"\n            },\n            \"href\": \"https://api.spotify.com/v1/artists/43ZHCT0cAZBISjO8DG9PnE\",\n            \"id\": \"43ZHCT0cAZBISjO8DG9PnE\",\n            \"name\": \"Elvis Presley\",\n            \"type\": \"artist\",\n            \"uri\": \"spotify:artist:43ZHCT0cAZBISjO8DG9PnE\"\n          }\n        ],\n        \"external_urls\": {\n          \"spotify\": \"https://open.spotify.com/album/7xe8VI48TxUpU1IIo0RfGi\"\n        },\n        \"href\": \"https://api.spotify.com/v1/albums/7xe8VI48TxUpU1IIo0RfGi\",\n        \"id\": \"7xe8VI48TxUpU1IIo0RfGi\",\n        \"images\": [\n          {\n            \"height\": 640,\n            \"url\": \"https://i.scdn.co/image/ab67616d0000b273f96cefb0197694ad440c3314\",\n            \"width\": 640\n          },\n          {\n            \"height\": 300,\n            \"url\": \"https://i.scdn.co/image/ab67616d00001e02f96cefb0197694ad440c3314\",\n            \"width\": 300\n          },\n          {\n            \"height\": 64,\n            \"url\": \"https://i.scdn.co/image/ab67616d00004851f96cefb0197694ad440c3314\",\n            \"width\": 64\n          }\n        ],\n        \"name\": \"Blue Hawaii\",\n        \"release_date\": \"1961-10-20\",\n        \"release_date_precision\": \"day\",\n        \"total_tracks\": 14,\n        \"type\": \"album\",\n        \"uri\": \"spotify:album:7xe8VI48TxUpU1IIo0RfGi\"\n      },\n      \"artists\": [\n        {\n          \"external_urls\": {\n            \"spotify\": \"https://open.spotify.com/artist/43ZHCT0cAZBISjO8DG9PnE\"\n          },\n          \"href\": \"https://api.spotify.com/v1/artists/43ZHCT0cAZBISjO8DG9PnE\",\n          \"id\": \"43ZHCT0cAZBISjO8DG9PnE\",\n          \"name\": \"Elvis Presley\",\n          \"type\": \"artist\",\n          \"uri\": \"spotify:artist:43ZHCT0cAZBISjO8DG9PnE\"\n        }\n      ],\n      \"disc_number\": 1,\n      \"duration_ms\": 182360,\n      \"explicit\": false,\n      \"external_ids\": {\n        \"isrc\": \"USRC16101350\"\n      },\n      \"external_urls\": {\n        \"spotify\": \"https://open.spotify.com/track/44AyOl4qVkzS48vBsbNXaC\"\n      },\n      \"href\": \"https://api.spotify.com/v1/tracks/44AyOl4qVkzS48vBsbNXaC\",\n      \"id\": \"44AyOl4qVkzS48vBsbNXaC\",\n      \"is_local\": false,\n      \"is_playable\": true,\n      \"name\": \"Can't Help Falling in Love\",\n      \"popularity\": 79,\n      \"preview_url\": \"https://p.scdn.co/mp3-preview/994ebd7f49e4e935df56d450b0c12d8bad8bb9f4?cid=ab343db462f8494ea1e3f226eb7bc0cc\",\n      \"track_number\": 5,\n      \"type\": \"track\",\n      \"uri\": \"spotify:track:44AyOl4qVkzS48vBsbNXaC\"\n    },\n            \n    . . .\n  ]\n\n}\n```\n\n\n<br>\n<br>\n\n_Sample Tree_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/tree/Spotify.png \"[Tree]\")"},"response":[],"_postman_id":"4ffd830d-7398-438e-83e1-659de635f6ad"},{"name":"Twitter","event":[{"listen":"test","script":{"id":"727f393b-6a18-4ad3-8989-2635e7af0de0","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<style>","body {","    display: flex;","    align-items: center;","    justify-content: center;","    background-color: #F5F5F5;","   ","}","","",".container {","    position: absolute;","    z-index: -999;","    height: 100vh;","    width: 100vw;","}","","</style>","<div id=\"tree\"></div>","<div class=\"container\">","<script>","const treeData = {{{results}}};","var maxChildren = 0;","var treeLevelSpan = {0:1};","","//finds the max number of nodes in a column","function getMaxChildrenSpan(input, level) {","    var childrenLength = 0;","    if (input.hasOwnProperty(\"children\") && input[\"children\"] != null && typeof input[\"children\"] != undefined ) {","        childrenLength =  input.children.length;","    }","    let totalNumChildren = 0;","    if (input.hasOwnProperty(\"children\") && input[\"children\"] != null && typeof input[\"children\"] != undefined) {","        for (let child of input.children) {","            if (child.hasOwnProperty(\"children\") && child[\"children\"] != null && typeof child[\"children\"] != undefined) {","                getMaxChildrenSpan(child, level + 1)","            }","        }","    }","    if (level in treeLevelSpan) {","        treeLevelSpan[level] += childrenLength;","    }","    else {","        treeLevelSpan[level] = childrenLength;","    }","}","getMaxChildrenSpan(treeData, 1);","let arrayOfLevelSpan = Object.values(treeLevelSpan)","let maxSpan = Math.max(...arrayOfLevelSpan);","","","// Set the dimensions and margins of the diagram","var margin = {top: 20, right: 90, bottom: 30, left:90},","    width = 960 - margin.left - margin.right,","    height = 500 + (maxSpan*30) - margin.top - margin.bottom;","","","","// append the svg object to the body of the page","// appends a 'group' element to 'svg'","// moves the 'group' element to the top left margin","var svg = d3.select(\"body\").append(\"svg\")","    .attr(\"width\", width + margin.right + margin.left)","    .attr(\"height\", height + margin.top + margin.bottom)","    .append(\"g\")","        .attr(\"transform\", \"translate(\"","            + margin.left  + \",\" + margin.top + \")\");","","","var i = 0,","    duration = 750,","    root;","","// declares a tree layout and assigns the size","var treemap = d3.tree().size([height, width]);","","// Assigns parent, children, height, depth","root = d3.hierarchy(treeData, function(d) { return d.children; });","root.x0 = height / 2;","root.y0 = 0;","","// Collapse after the second level","// root.children.forEach(collapse);","","update(root);","","// Collapse the node and all it's children","function collapse(d) {","  if(d.children) {","    d._children = d.children","    d._children.forEach(collapse)","    d.children = null","  }","}","","function update(source) {","  // Assigns the x and y position for the nodes","  var treeData = treemap(root);","  ","  //svg height dynamically changed by max number of open nodes in a column","  treeLevelSpan = {};","  getMaxChildrenSpan(root, 1);","  arrayOfLevelSpan = Object.values(treeLevelSpan)","  maxSpan = Math.max(...arrayOfLevelSpan);","  height = 500 + (maxSpan*30) - margin.top - margin.bottom;","  treeData = d3.tree().size([height, width])(root);","","","  // Compute the new tree layout.","  var nodes = treeData.descendants(),","      links = treeData.descendants().slice(1);","","  // Normalize for fixed-depth.","  nodes.forEach(function(d) { d.y = d.depth * width * 0.25 });","","  // ****************** Nodes section ***************************","","  // Update the nodes...","  var node = svg.selectAll('g.node')","      .data(nodes, function(d) {return d.id || (d.id = ++i); });","","  // Enter any new nodes at the parent's previous position.","  var nodeEnter = node.enter().append('g')","      .attr('class', 'node')","      .attr(\"transform\", function(d) {","        return \"translate(\" + source.y0 + \",\" + source.x0 + \")\";","    })","    .on('click', click);","    ","    // Create hover tooltip","    let tooltip = d3.select(\"#tree\").append(\"div\")","        .attr(\"class\", \"tooltip\")","            .style(\"z-index\", 99)","            .style(\"position\", \"absolute\")","            .style(\"font-size\", \"12px\")","            .style(\"width\", \"auto\")","            .style(\"height\", \"auto\")","            .style(\"pointer-events\", \"none\")","            .style(\"background-color\", \"white\")","            .style(\"padding\", \"3px\")","            .style(\"opacity\", 1);","        ","    // tooltip mouseover event handler","    let tipMouseover = function(d) {","        console.log(d);","        tooltip.html(\"Data Type: <br/>\" + d.data.type)","            .style(\"left\", (d3.event.pageX + 40) + \"px\")","            .style(\"top\", (d3.event.pageY - 15) + \"px\")","          .transition()","            .duration(200)      // ms","            .style(\"opacity\", 1)","    };","    // tooltip mouseout event handler","    let tipMouseout = function(d){","        tooltip.transition()","            .duration(300)","            .style(\"opacity\", 0);","    };","    ","  // Add Circle for the nodes","  nodeEnter.append('circle')","      .attr('class', 'node')","      .attr('r', 1e-6)","      .on(\"mouseover\", tipMouseover)","      .on(\"mouseout\", tipMouseout)","      .style(\"fill\", function(d) {","          return d._children ? \"#F4B780\" : \"#fff\";","      })","      ","      .style(\"fill\", \"#F5F5F5\")","      .style(\"stroke\", \"#F09D51\")","      .style(\"stroke-width\", \"2px\");","      ","      ","","  // Add labels for the nodes","  nodeEnter.append('text')","      .attr(\"dy\", \".35em\")","      .attr(\"x\", function(d) {","          return d.children || d._children ? -20 : 20;","      })","      .attr(\"text-anchor\", function(d) {","          return d.children || d._children ? \"end\" : \"start\";","      })","      .text(function(d) { return d.data.name; });","      ","      ","","  // UPDATE","  var nodeUpdate = nodeEnter.merge(node);","","  // Transition to the proper position for the node","  nodeUpdate.transition()","    .duration(duration)","    .attr(\"transform\", function(d) { ","        return \"translate(\" + d.y + \",\" + d.x +\")\";//this","     });","","  // Update the node attributes and style","  nodeUpdate.select('circle.node')","    .attr('r', 10)","    .style(\"fill\", function(d) {","        return d._children ? \"#F4B780\" : \"#F5F5F5\";","    })","    .attr('cursor', 'pointer');","","","  // Remove any exiting nodes","  var nodeExit = node.exit().transition()","      .duration(duration)","      .attr(\"transform\", function(d) {","          return \"translate(\" + source.y + \",\" + source.x + \")\"; ","      })","      .remove();","","  // On exit reduce the node circles size to 0","  nodeExit.select('circle')","    .attr('r', 0);","","  // On exit reduce the opacity of text labels","  nodeExit.select('text')","    .style('fill-opacity', 0);","","  // ****************** links section ***************************","","  // Update the links...","  var link = svg.selectAll('path.link') ","      .data(links, function(d) { return d.id; });","","  // Enter any new links at the parent's previous position.","  var linkEnter = link.enter().insert('path', \"g\")","      .attr(\"class\", \"link\")","      .attr('d', function(d){","        var o = {x: source.x0, y: source.y0}","        return diagonal(o, o)","      })","      .style(\"fill\", \"none\")","      .style(\"stroke\",\"#c5c5c5\")","      .style(\"stroke-width\", \"1px\");","","  // UPDATE","  var linkUpdate = linkEnter.merge(link);","","  // Transition back to the parent element position","  linkUpdate.transition()","      .duration(duration)","      .attr('d', function(d){ return diagonal(d, d.parent) });","","  // Remove any exiting links","  var linkExit = link.exit().transition()","      .duration(duration)","      .attr('d', function(d) {","        var o = {x: source.x, y: source.y}","        return diagonal(o, o)","      })","      .remove();","","  // Store the old positions for transition.","  ","  nodes.forEach(function(d){","    d.x0 = d.x;","    d.y0 = d.y;","  });","\\","  // Creates a curved (diagonal) path from parent to the child nodes","  function diagonal(s, d) {","    path = \"M \" + s.y +\" \" + s.x + \" \" +","           \"C \" + (s.y + d.y)/2 + \" \" + s.x +\", \"","        +  (s.y + d.y)/2 +\" \" + d.x + \" , \"","        +  d.y + \" \" + d.x;","    return path;","  }","","  // Toggle children on click.","  function click(d) {","    if (d.children) {","        d._children = d.children;","        d.children = null;","      } else {","        d.children = d._children;","        d._children = null;","      }","    update(d);","  }"," ","}","","</script>","`;","","/* DATA PARSING */","const response = pm.response.json();","","function parseData(jsonInput) {","    // Function that checks if object is a dictionary","    function isDictionary(obj) {","        if (typeof obj == \"object\" && !Array.isArray(obj) && obj !== null) {","            return true;","        } else {","            return false;","        }","    }","    ","    // Declare and initialize the root node","    const dataTree = {};","    ","    dataTree[\"name\"] = \"response\";","    dataTree[\"children\"] = [];","    dataTree[\"type\"] = typeof(dataTree);","    ","    // Recursively reformats the json file ","    // See documentation for format","    function restructure(input, arr) {","        for (let node in input) {","            const dict = {};","            if (isDictionary(input[node])) {","                dict.name = node;","                dict.type = \"dictionary\"","                dict.children = [];","                restructure(input[node], dict.children);","            } else {","                if (Array.isArray(input[node])) {","                    dict.type = \"array\";              ","                }","                else if (input[node] === null) {","                    dict.type = \"null\";","                }","                else {","                    dict.type = typeof(input[node]);","                }","                dict.name = node;","            }","            arr.push(dict);","        }","    }","    ","    // Calls restructure on the first object in the response","    restructure(jsonInput, dataTree.children);","    ","    return dataTree","    ","}","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","  // Template will receive stringified JSON","  ","  /* EDIT THIS LINE: Here we grab the first object from the reponse dictionary as all","    objects in the dictionary have the same structure */","  results: JSON.stringify(parseData(response.statuses[0]))","});"],"type":"text/javascript"}}],"id":"298aeda2-13e4-4c3d-bda0-f17083b64764","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[{"key":"Authorization","value":"Bearer AAAAAAAAAAAAAAAAAAAAAGC%2BAAEAAAAAQBDuL%2BuzLMt2L1V6vVejiYu%2By%2Fg%3DbhzUhGy3XIGSTOgi6ptQSBowr4dRRx4dmigMBNgiN3rS5RZ51l","type":"text"},{"key":"Content-Type","value":"application/json","type":"text"}],"url":{"raw":"https://api.twitter.com/1.1/search/tweets.json?q=@Wendys&result_type=popular&count=50","protocol":"https","host":["api","twitter","com"],"path":["1.1","search","tweets.json"],"query":[{"key":"q","value":"@Wendys"},{"key":"result_type","value":"popular"},{"key":"count","value":"50"}]},"description":"Visualizes the structure of the response from Twitter API: top tweets by Wendy's.\n<br/>\n<br/>\n_Sample JSON response_\n```\n{\n    \"statuses\": [\n        {\n            \"created_at\": \"Tue Nov 19 02:45:41 +0000 2019\",\n            \"id\": 1196620530998292481,\n            \"id_str\": \"1196620530998292481\",\n            \"text\": \"Career-high 26 points for @H23Ash\\n\\n@Wendys Player of the Game https://t.co/1KNWg7tfXT\",\n            \"truncated\": false,\n            \"entities\": {\n                \"hashtags\": [],\n                \"symbols\": [],\n                \"user_mentions\": [\n                    {\n                        \"screen_name\": \"H23Ash\",\n                        \"name\": \"ashton hagans\",\n                        \"id\": 2682044908,\n                        \"id_str\": \"2682044908\",\n                        \"indices\": [\n                            26,\n                            33\n                        ]\n                    },\n                    {\n                        \"screen_name\": \"Wendys\",\n                        \"name\": \"Wendy's\",\n                        \"id\": 59553554,\n                        \"id_str\": \"59553554\",\n                        \"indices\": [\n                            35,\n                            42\n                        ]\n                    }\n                ],\n                \"urls\": [],\n                \"media\": [\n                    {\n                        \"id\": 1196620092886388737,\n                        \"id_str\": \"1196620092886388737\",\n                        \"indices\": [\n                            62,\n                            85\n                        ],\n                        \"media_url\": \"http://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"media_url_https\": \"https://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"url\": \"https://t.co/1KNWg7tfXT\",\n                        \"display_url\": \"pic.twitter.com/1KNWg7tfXT\",\n                        \"expanded_url\": \"https://twitter.com/KentuckyMBB/status/1196620530998292481/video/1\",\n                        \"type\": \"photo\",\n                        \"sizes\": {\n                            \"thumb\": {\n                                \"w\": 150,\n                                \"h\": 150,\n                                \"resize\": \"crop\"\n                            },\n                            \"small\": {\n                                \"w\": 680,\n                                \"h\": 381,\n                                \"resize\": \"fit\"\n                            },\n                            \"large\": {\n                                \"w\": 2048,\n                                \"h\": 1149,\n                                \"resize\": \"fit\"\n                            },\n                            \"medium\": {\n                                \"w\": 1200,\n                                \"h\": 673,\n                                \"resize\": \"fit\"\n                            }\n                        }\n                    }\n                ]\n            },\n            \"extended_entities\": {\n                \"media\": [\n                    {\n                        \"id\": 1196620092886388737,\n                        \"id_str\": \"1196620092886388737\",\n                        \"indices\": [\n                            62,\n                            85\n                        ],\n                        \"media_url\": \"http://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"media_url_https\": \"https://pbs.twimg.com/media/EJs_xl3WsAEimkZ.jpg\",\n                        \"url\": \"https://t.co/1KNWg7tfXT\",\n                        \"display_url\": \"pic.twitter.com/1KNWg7tfXT\",\n                        \"expanded_url\": \"https://twitter.com/KentuckyMBB/status/1196620530998292481/video/1\",\n                        \"type\": \"video\",\n                        \"sizes\": {\n                            \"thumb\": {\n                                \"w\": 150,\n                                \"h\": 150,\n                                \"resize\": \"crop\"\n                            },\n                            \"small\": {\n                                \"w\": 680,\n                                \"h\": 381,\n                                \"resize\": \"fit\"\n                            },\n                            \"large\": {\n                                \"w\": 2048,\n                                \"h\": 1149,\n                                \"resize\": \"fit\"\n                            },\n                            \"medium\": {\n                                \"w\": 1200,\n                                \"h\": 673,\n                                \"resize\": \"fit\"\n                            }\n                        },\n                        \"video_info\": {\n                            \"aspect_ratio\": [\n                                16,\n                                9\n                            ],\n                            \"duration_millis\": 10000,\n                            \"variants\": [\n                                {\n                                    \"content_type\": \"application/x-mpegURL\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/pl/eU57Vz_XjLHPN7BN.m3u8?tag=13\"\n                                },\n                                {\n                                    \"bitrate\": 288000,\n                                    \"content_type\": \"video/mp4\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/vid/480x270/yFA0o-64ynB05Hz6.mp4?tag=13\"\n                                },\n                                {\n                                    \"bitrate\": 2176000,\n                                    \"content_type\": \"video/mp4\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/vid/1024x576/6n2YPpRVMIxoJa0P.mp4?tag=13\"\n                                },\n                                {\n                                    \"bitrate\": 832000,\n                                    \"content_type\": \"video/mp4\",\n                                    \"url\": \"https://video.twimg.com/amplify_video/1196620092886388737/vid/640x360/igUHJBlF8aRncGC4.mp4?tag=13\"\n                                }\n                            ]\n                        },\n                        \"additional_media_info\": {\n                            \"title\": \"Ashton Hagans\",\n                            \"description\": \"Wendy's Player of the Game\",\n                            \"embeddable\": true,\n                            \"monetizable\": false\n                        }\n                    }\n                ]\n            },\n            \"metadata\": {\n                \"result_type\": \"popular\",\n                \"iso_language_code\": \"en\"\n            },\n            \"source\": \"<a href=\\\"https://studio.twitter.com\\\" rel=\\\"nofollow\\\">Twitter Media Studio</a>\",\n            \"in_reply_to_status_id\": null,\n            \"in_reply_to_status_id_str\": null,\n            \"in_reply_to_user_id\": null,\n            \"in_reply_to_user_id_str\": null,\n            \"in_reply_to_screen_name\": null,\n            \"user\": {\n                \"id\": 35583547,\n                \"id_str\": \"35583547\",\n                \"name\": \"Kentucky Basketball\",\n                \"screen_name\": \"KentuckyMBB\",\n                \"location\": \"Rupp Arena\",\n                \"description\": \"Official Twitter account for Kentucky Men’s Basketball. #TGT - 𝗧he 𝗚reatest 𝗧radition. Eight-time NCAA champions, winningest program in college basketball.\",\n                \"url\": \"https://t.co/HcLn0lkgYi\",\n                \"entities\": {\n                    \"url\": {\n                        \"urls\": [\n                            {\n                                \"url\": \"https://t.co/HcLn0lkgYi\",\n                                \"expanded_url\": \"http://giphy.com/kentuckymbb\",\n                                \"display_url\": \"giphy.com/kentuckymbb\",\n                                \"indices\": [\n                                    0,\n                                    23\n                                ]\n                            }\n                        ]\n                    },\n                    \"description\": {\n                        \"urls\": []\n                    }\n                },\n                \"protected\": false,\n                \"followers_count\": 791003,\n                \"friends_count\": 653,\n                \"listed_count\": 1217,\n                \"created_at\": \"Sun Apr 26 22:25:01 +0000 2009\",\n                \"favourites_count\": 549,\n                \"utc_offset\": null,\n                \"time_zone\": null,\n                \"geo_enabled\": true,\n                \"verified\": true,\n                \"statuses_count\": 35138,\n                \"lang\": null,\n                \"contributors_enabled\": false,\n                \"is_translator\": false,\n                \"is_translation_enabled\": false,\n                \"profile_background_color\": \"0A11B8\",\n                \"profile_background_image_url\": \"http://abs.twimg.com/images/themes/theme1/bg.png\",\n                \"profile_background_image_url_https\": \"https://abs.twimg.com/images/themes/theme1/bg.png\",\n                \"profile_background_tile\": false,\n                \"profile_image_url\": \"http://pbs.twimg.com/profile_images/1192886378310373378/XGgfxVMk_normal.jpg\",\n                \"profile_image_url_https\": \"https://pbs.twimg.com/profile_images/1192886378310373378/XGgfxVMk_normal.jpg\",\n                \"profile_banner_url\": \"https://pbs.twimg.com/profile_banners/35583547/1502115999\",\n                \"profile_link_color\": \"060404\",\n                \"profile_sidebar_border_color\": \"FFFFFF\",\n                \"profile_sidebar_fill_color\": \"FFFFFF\",\n                \"profile_text_color\": \"060404\",\n                \"profile_use_background_image\": true,\n                \"has_extended_profile\": false,\n                \"default_profile\": false,\n                \"default_profile_image\": false,\n                \"following\": null,\n                \"follow_request_sent\": null,\n                \"notifications\": null,\n                \"translator_type\": \"none\"\n            },\n            \"geo\": null,\n            \"coordinates\": null,\n            \"place\": null,\n            \"contributors\": null,\n            \"is_quote_status\": false,\n            \"retweet_count\": 69,\n            \"favorite_count\": 602,\n            \"favorited\": false,\n            \"retweeted\": false,\n            \"possibly_sensitive\": false,\n            \"lang\": \"en\"\n        },\n        ...\n    ]\n}\n```\n\n\n<br>\n<br>\n\n_Sample Tree_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/tree/Twitter.png \"[Tree]\")"},"response":[],"_postman_id":"298aeda2-13e4-4c3d-bda0-f17083b64764"},{"name":"New York Times: Movie Reviews","event":[{"listen":"test","script":{"id":"02cc2570-1ef7-4710-a7d2-9c36f6c07e2e","exec":["var template = `","<script src=\"https://d3js.org/d3.v5.min.js\"></script>","<style>","body {","    display: flex;","    align-items: center;","    justify-content: center;","    background-color: #F5F5F5;","   ","}","","",".container {","    position: absolute;","    z-index: -999;","    height: 100vh;","    width: 100vw;","}","","</style>","<div id=\"tree\"></div>","<div class=\"container\">","<script>","const treeData = {{{results}}};","var maxChildren = 0;","var treeLevelSpan = {0:1};","","//finds the max number of nodes in a column","function getMaxChildrenSpan(input, level) {","    var childrenLength = 0;","    if (input.hasOwnProperty(\"children\") && input[\"children\"] != null && typeof input[\"children\"] != undefined ) {","        childrenLength =  input.children.length;","    }","    let totalNumChildren = 0;","    if (input.hasOwnProperty(\"children\") && input[\"children\"] != null && typeof input[\"children\"] != undefined) {","        for (let child of input.children) {","            if (child.hasOwnProperty(\"children\") && child[\"children\"] != null && typeof child[\"children\"] != undefined) {","                getMaxChildrenSpan(child, level + 1)","            }","        }","    }","    if (level in treeLevelSpan) {","        treeLevelSpan[level] += childrenLength;","    }","    else {","        treeLevelSpan[level] = childrenLength;","    }","}","getMaxChildrenSpan(treeData, 1);","let arrayOfLevelSpan = Object.values(treeLevelSpan)","let maxSpan = Math.max(...arrayOfLevelSpan);","","","// Set the dimensions and margins of the diagram","var margin = {top: 20, right: 90, bottom: 30, left:90},","    width = 960 - margin.left - margin.right,","    height = 500 + (maxSpan*30) - margin.top - margin.bottom;","","","","// append the svg object to the body of the page","// appends a 'group' element to 'svg'","// moves the 'group' element to the top left margin","var svg = d3.select(\"body\").append(\"svg\")","    .attr(\"width\", width + margin.right + margin.left)","    .attr(\"height\", height + margin.top + margin.bottom)","    .append(\"g\")","        .attr(\"transform\", \"translate(\"","            + margin.left  + \",\" + margin.top + \")\");","","","var i = 0,","    duration = 750,","    root;","","// declares a tree layout and assigns the size","var treemap = d3.tree().size([height, width]);","","// Assigns parent, children, height, depth","root = d3.hierarchy(treeData, function(d) { return d.children; });","root.x0 = height / 2;","root.y0 = 0;","","// Collapse after the second level","// root.children.forEach(collapse);","","update(root);","","// Collapse the node and all it's children","function collapse(d) {","  if(d.children) {","    d._children = d.children","    d._children.forEach(collapse)","    d.children = null","  }","}","","function update(source) {","  // Assigns the x and y position for the nodes","  var treeData = treemap(root);","  ","  //svg height dynamically changed by max number of open nodes in a column","  treeLevelSpan = {};","  getMaxChildrenSpan(root, 1);","  arrayOfLevelSpan = Object.values(treeLevelSpan)","  maxSpan = Math.max(...arrayOfLevelSpan);","  height = 500 + (maxSpan*30) - margin.top - margin.bottom;","  treeData = d3.tree().size([height, width])(root);","","","  // Compute the new tree layout.","  var nodes = treeData.descendants(),","      links = treeData.descendants().slice(1);","","  // Normalize for fixed-depth.","  nodes.forEach(function(d) { d.y = d.depth * width * 0.25 });","","  // ****************** Nodes section ***************************","","  // Update the nodes...","  var node = svg.selectAll('g.node')","      .data(nodes, function(d) {return d.id || (d.id = ++i); });","","  // Enter any new nodes at the parent's previous position.","  var nodeEnter = node.enter().append('g')","      .attr('class', 'node')","      .attr(\"transform\", function(d) {","        return \"translate(\" + source.y0 + \",\" + source.x0 + \")\";","    })","    .on('click', click);","    ","    // Create hover tooltip","    let tooltip = d3.select(\"#tree\").append(\"div\")","        .attr(\"class\", \"tooltip\")","            .style(\"z-index\", 99)","            .style(\"position\", \"absolute\")","            .style(\"font-size\", \"12px\")","            .style(\"width\", \"auto\")","            .style(\"height\", \"auto\")","            .style(\"pointer-events\", \"none\")","            .style(\"background-color\", \"white\")","            .style(\"padding\", \"3px\")","            .style(\"opacity\", 1);","        ","    // tooltip mouseover event handler","    let tipMouseover = function(d) {","        console.log(d);","        tooltip.html(\"Data Type: <br/>\" + d.data.type)","            .style(\"left\", (d3.event.pageX + 40) + \"px\")","            .style(\"top\", (d3.event.pageY - 15) + \"px\")","          .transition()","            .duration(200)      // ms","            .style(\"opacity\", 1)","    };","    // tooltip mouseout event handler","    let tipMouseout = function(d){","        tooltip.transition()","            .duration(300)","            .style(\"opacity\", 0);","    };","    ","  // Add Circle for the nodes","  nodeEnter.append('circle')","      .attr('class', 'node')","      .attr('r', 1e-6)","      .on(\"mouseover\", tipMouseover)","      .on(\"mouseout\", tipMouseout)","      .style(\"fill\", function(d) {","          return d._children ? \"#F4B780\" : \"#fff\";","      })","      ","      .style(\"fill\", \"#F5F5F5\")","      .style(\"stroke\", \"#F09D51\")","      .style(\"stroke-width\", \"2px\");","      ","      ","","  // Add labels for the nodes","  nodeEnter.append('text')","      .attr(\"dy\", \".35em\")","      .attr(\"x\", function(d) {","          return d.children || d._children ? -20 : 20;","      })","      .attr(\"text-anchor\", function(d) {","          return d.children || d._children ? \"end\" : \"start\";","      })","      .text(function(d) { return d.data.name; });","      ","      ","","  // UPDATE","  var nodeUpdate = nodeEnter.merge(node);","","  // Transition to the proper position for the node","  nodeUpdate.transition()","    .duration(duration)","    .attr(\"transform\", function(d) { ","        return \"translate(\" + d.y + \",\" + d.x +\")\";//this","     });","","  // Update the node attributes and style","  nodeUpdate.select('circle.node')","    .attr('r', 10)","    .style(\"fill\", function(d) {","        return d._children ? \"#F4B780\" : \"#F5F5F5\";","    })","    .attr('cursor', 'pointer');","","","  // Remove any exiting nodes","  var nodeExit = node.exit().transition()","      .duration(duration)","      .attr(\"transform\", function(d) {","          return \"translate(\" + source.y + \",\" + source.x + \")\"; ","      })","      .remove();","","  // On exit reduce the node circles size to 0","  nodeExit.select('circle')","    .attr('r', 0);","","  // On exit reduce the opacity of text labels","  nodeExit.select('text')","    .style('fill-opacity', 0);","","  // ****************** links section ***************************","","  // Update the links...","  var link = svg.selectAll('path.link') ","      .data(links, function(d) { return d.id; });","","  // Enter any new links at the parent's previous position.","  var linkEnter = link.enter().insert('path', \"g\")","      .attr(\"class\", \"link\")","      .attr('d', function(d){","        var o = {x: source.x0, y: source.y0}","        return diagonal(o, o)","      })","      .style(\"fill\", \"none\")","      .style(\"stroke\",\"#c5c5c5\")","      .style(\"stroke-width\", \"1px\");","","  // UPDATE","  var linkUpdate = linkEnter.merge(link);","","  // Transition back to the parent element position","  linkUpdate.transition()","      .duration(duration)","      .attr('d', function(d){ return diagonal(d, d.parent) });","","  // Remove any exiting links","  var linkExit = link.exit().transition()","      .duration(duration)","      .attr('d', function(d) {","        var o = {x: source.x, y: source.y}","        return diagonal(o, o)","      })","      .remove();","","  // Store the old positions for transition.","  ","  nodes.forEach(function(d){","    d.x0 = d.x;","    d.y0 = d.y;","  });","\\","  // Creates a curved (diagonal) path from parent to the child nodes","  function diagonal(s, d) {","    path = \"M \" + s.y +\" \" + s.x + \" \" +","           \"C \" + (s.y + d.y)/2 + \" \" + s.x +\", \"","        +  (s.y + d.y)/2 +\" \" + d.x + \" , \"","        +  d.y + \" \" + d.x;","    return path;","  }","","  // Toggle children on click.","  function click(d) {","    if (d.children) {","        d._children = d.children;","        d.children = null;","      } else {","        d.children = d._children;","        d._children = null;","      }","    update(d);","  }"," ","}","","</script>","`;","","/* DATA PARSING */","const response = pm.response.json();","","function parseData(jsonInput) {","    // Function that checks if object is a dictionary","    function isDictionary(obj) {","        if (typeof obj == \"object\" && !Array.isArray(obj) && obj !== null) {","            return true;","        } else {","            return false;","        }","    }","    ","    // Declare and initialize the root node","    const dataTree = {};","    ","    dataTree[\"name\"] = \"response\";","    dataTree[\"children\"] = [];","    dataTree[\"type\"] = typeof(dataTree);","    ","    // Recursively reformats the json file ","    // See documentation for format","    function restructure(input, arr) {","        for (let node in input) {","            const dict = {};","            if (isDictionary(input[node])) {","                dict.name = node;","                dict.type = \"dictionary\"","                dict.children = [];","                restructure(input[node], dict.children);","            } else {","                if (Array.isArray(input[node])) {","                    dict.type = \"array\";              ","                }","                else if (input[node] === null) {","                    dict.type = \"null\";","                }","                else {","                    dict.type = typeof(input[node]);","                }","                dict.name = node;","            }","            arr.push(dict);","        }","    }","    ","    // Calls restructure on the first object in the response","    restructure(jsonInput, dataTree.children);","    ","    return dataTree","    ","}","","/* FEED DATA INTO TEMPLATE */","pm.visualizer.set(template, {","  // Template will receive stringified JSON","  ","  /* here we grab the first object from the reponse dictionary as all","    objects in the dictionary have the same structure */","  results: JSON.stringify(parseData(response.response.docs[0]))","});"],"type":"text/javascript"}}],"id":"1d7d5bff-0063-4a8d-9c98-87d72b8e57ee","protocolProfileBehavior":{"disableBodyPruning":true},"request":{"method":"GET","header":[],"url":{"raw":"https://api.nytimes.com/svc/search/v2/articlesearch.json?fq=romney&facet_field=day_of_week&facet=true&begin_date=20120101&end_date=20120101&api-key={{NYT_API_KEY_MOVIES}}","protocol":"https","host":["api","nytimes","com"],"path":["svc","search","v2","articlesearch.json"],"query":[{"key":"fq","value":"romney"},{"key":"facet_field","value":"day_of_week"},{"key":"facet","value":"true"},{"key":"begin_date","value":"20120101"},{"key":"end_date","value":"20120101"},{"key":"api-key","value":"{{NYT_API_KEY_MOVIES}}"}]},"description":"Visualizes the structure of the response from the New York Times Movie Reviews API\n<br/>\n<br/>\n_Sample JSON response_\n```\n{\n    \"status\": \"OK\",\n    \"copyright\": \"Copyright (c) 2019 The New York Times Company. All Rights Reserved.\",\n    \"response\": {\n        \"docs\": [\n            {\n                \"abstract\": \"With two days before the Iowa caucuses, Newt Gingrich planned to visit three sports bars on New Year’s Day.\",\n                \"web_url\": \"https://thecaucus.blogs.nytimes.com/2012/01/01/on-n-f-l-s-final-sunday-gingrich-makes-his-pitch-at-three-sports-bars/\",\n                \"snippet\": \"With two days before the Iowa caucuses, Newt Gingrich planned to visit three sports bars on New Year’s Day.\",\n                \"lead_paragraph\": \"AMES, Iowa — Where do you find voters on the last Sunday of the regular season of the National Football League?\",\n                \"source\": \"The New York Times\",\n                \"multimedia\": [],\n                \"headline\": {\n                    \"main\": \"On a Big Football Weekend, Gingrich Makes His Plea to N.F.L. Fans\",\n                    \"kicker\": \"The Caucus\",\n                    \"content_kicker\": null,\n                    \"print_headline\": null,\n                    \"name\": null,\n                    \"seo\": null,\n                    \"sub\": null\n                },\n                \"keywords\": [\n                    {\n                        \"name\": \"subject\",\n                        \"value\": \"Bars\",\n                        \"rank\": 1,\n                        \"major\": \"N\"\n                    },\n                    {\n                        \"name\": \"subject\",\n                        \"value\": \"Football\",\n                        \"rank\": 2,\n                        \"major\": \"N\"\n                    },\n                    {\n                        \"name\": \"subject\",\n                        \"value\": \"Presidential Election of 2012\",\n                        \"rank\": 3,\n                        \"major\": \"N\"\n                    },\n                    {\n                        \"name\": \"persons\",\n                        \"value\": \"Gingrich, Newt\",\n                        \"rank\": 4,\n                        \"major\": \"N\"\n                    },\n                    {\n                        \"name\": \"glocations\",\n                        \"value\": \"Iowa\",\n                        \"rank\": 5,\n                        \"major\": \"N\"\n                    }\n                ],\n                \"pub_date\": \"2012-01-01T21:02:05+0000\",\n                \"document_type\": \"article\",\n                \"news_desk\": \"\",\n                \"section_name\": \"U.S.\",\n                \"subsection_name\": \"Politics\",\n                \"byline\": {\n                    \"original\": \"By Trip Gabriel\",\n                    \"person\": [\n                        {\n                            \"firstname\": \"Trip\",\n                            \"middlename\": null,\n                            \"lastname\": \"Gabriel\",\n                            \"qualifier\": null,\n                            \"title\": null,\n                            \"role\": \"reported\",\n                            \"organization\": \"\",\n                            \"rank\": 1\n                        }\n                    ],\n                    \"organization\": null\n                },\n                \"type_of_material\": \"News\",\n                \"_id\": \"nyt://article/c35f8f83-1a05-51aa-a934-af83a91de7bb\",\n                \"word_count\": 528,\n                \"uri\": \"nyt://article/c35f8f83-1a05-51aa-a934-af83a91de7bb\"\n            },\n            \n            . . .\n        ]\n\n    }\n}\n```\n\n\n<br>\n<br>\n\n_Sample Tree_\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/tree/NYT.png \"[Tree]\")"},"response":[],"_postman_id":"1d7d5bff-0063-4a8d-9c98-87d72b8e57ee"}],"id":"c114382a-7866-4750-addb-5f63a28c1db5","description":"This folder contains three sample usages for the tree visualizer which visualizes the structure of an API response.\n\n1. New York Times: Most Viewed Articles\n2. Spotify: Top Tracks\n3. Twitter: Top Tweets by Wendy's\n\nFor detailed explanation on a request, check its description.\n<br>\n<br>\n**Visualization Data Parsing**\n\nAt the bottom of the test script, in the `parseData()` function, the data is formatted into the `dataTree` (structure shown below) by feeding in the data into the function `restructure(input, arr)`. \n<br>\n<br>\n```\nvar treeData = [\n\t\"name\": \"root\"\n\t\"children\": [\n\t\t{\n\t\t\t\"name\": \"child1\",\n\t\t\t\"children\": [\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"grandchild1\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"name\": \"grandchild2\"\n\t\t\t\t}\n\t\t\t]\n\t\t},\n\t\t{\n\t\t\t\"name\": \"child2\"\n\t\t}\n\t]\n]\n```\n\n<br>\n<br>\n\nThe only line of code that the developer needs to modify exists at the bottom of the test script. The input is one object in the API response. We are assuming that the API response is a list of repeated objects.\n<br>\n<br>\n```\nresults: JSON.stringify(parseData(input))\n```","_postman_id":"c114382a-7866-4750-addb-5f63a28c1db5"}],"id":"dfee6445-23fd-4e5c-a2b5-67f901c0e5cc","description":"This folder includes the second round of more advanced, additional visualizations. If you'd like to import any particular visualization separately, they are individually published at the templates linked.\n- [Cross filter](https://explore.postman.com/templates/4514)\n- [Map](https://explore.postman.com/templates/4515)\n- [Tree](https://explore.postman.com/templates/4516)","_postman_id":"dfee6445-23fd-4e5c-a2b5-67f901c0e5cc"}]}