{"info":{"_postman_id":"8e2f03fb-1c3e-4f7d-a15e-240f73531558","name":"Visualizer Template: Bar Chart","description":"A collection of API requests to demonstrate the data visualization feature through a bar chart, created by student developers at Berkeley CodeBase.\n\nFor the full list of visualizer templates we have created, click [here](https://explore.postman.com/templates/4424).\n\n<br>\n\n![alt text](https://raw.githubusercontent.com/isabelleyzhou/postman_visualizer_templates/master/bar-chart/OpenBrewery.PNG \"[Bar Chart]\")\n\n<br>\n\nThis collection contains three sample usages for the bar chart visualizer.\n\n1. Open Brewery DB\n2. Yelp\n3. School Digger\n\n<br>\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`","schema":"https://schema.getpostman.com/json/collection/v2.0.0/collection.json"},"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":"e3737cdd-e740-4e35-94cc-adb06c1c86ba","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":"e3737cdd-e740-4e35-94cc-adb06c1c86ba"},{"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":"ce99963e-1f6d-4890-98e1-3236739dec40","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":"ce99963e-1f6d-4890-98e1-3236739dec40"},{"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":"db4719bf-106a-4fb2-b8b5-2d9c1d8bcf18","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":"db4719bf-106a-4fb2-b8b5-2d9c1d8bcf18"}],"event":[{"listen":"prerequest","script":{"id":"cc74a511-fed5-46ea-b632-e250f731160a","type":"text/javascript","exec":[""]}},{"listen":"test","script":{"id":"ccf26071-9846-428c-8040-4191ba780c1c","type":"text/javascript","exec":[""]}}]}