pg1647/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Data Vis. Summer 2020 || Lab 5 Task 3 </title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
  <script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />

  <style id="jsbin-css">
body {
  margin: 0;
  padding: 0;
}

h2,
h3 {
  margin: 10px;
  font-size: 1.2em;
}

h3 {
  font-size: 1em;
}

p {
  font-size: 0.85em;
  margin: 10px;
  text-align: left;
}

/**
* Create a position for the map
* on the page */
#canvas {
  width: 1000px;
  height: 700px;
}

#chart {
  width: 300px;
  height: 700px;
  float: left;
  display: inline-block;
}

#map {
  width: 700px;
  height: 700px;
  float: left;
  display: inline-block;
}

/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  margin-right: 20px;
  font-family: Arial, sans-serif;
  overflow: auto;
  border-radius: 3px;
}

#features {
  top: 0;
  height: 100px;
  margin-top: 20px;
  width: 250px;
}

#legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 18px;
  height: 150px;
  margin-bottom: 40px;
  width: 100px;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
</style>
</head>
<body>
  <div id='canvas'>
    <div id='chart'></div>
    <div id='map'></div>
  </div>
<script id="jsbin-javascript">
mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
  center: [-74,40.7],
  zoom: 10,
});

map.on('load', function() {
  map.addSource('zipcode', {
  type: 'geojson',
  data:
    'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson',
  promoteId: 'zipcode',
});


  map.addLayer({
    id: 'zipcode',
    source: 'zipcode',
    type: 'fill',
    paint:{
      'fill-opacity': 0.8,
      'fill-outline-color': '#444',
      'fill-color': '#007bff',
    },
  });


  // moved the above commented code inside d3
  d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json')
    .then(inspections => {

    let data        = inspections.filter(d => d.total>1500),
        cuisines    = data.map(d => d.cuisine),
        total       = data.map(d => d.total),
        traces = [{
          x: total,
          y: cuisines,
          orientation: 'h',
          type: 'bar',
          marker: {
            color: 'LightGray',
            line: {
              color: 'black',
              width: 0.5,
            }
          },
        }],
        layout = {
          title: 'Inspections',
          width: 350,
          xaxis: {
            title: 'Number of Inspections',
          },
          yaxis: {
            title: 'Cuisines',
            ticks: 'outside',
            autorange: 'reversed',
          },
        },
        chart = document.getElementById('chart');

    Plotly.newPlot(chart, traces, layout);

    chart.on('plotly_hover', event => {
      // In order to change color, we need to update all
      // item colors, and give the specific one a different color
      let index = event.points[0].pointIndex, // index of the data element
          perZip = Object.entries(inspections[index].perZip);
      setStates(perZip);
    });


    function setStates(perZip) {
      perZip.forEach(d => {
        map.setFeatureState({
          source: 'zipcode',
          id: d[0],
        }, {
          count: d[1],
        });
      });

      let steps  = 7,
          maxV   = d3.max(perZip.map(d => d[1])),
          domain = d3.range(0, maxV, maxV/steps),
          colors = d3.schemeBlues[steps],
          filter = new Array();
      domain.slice(1).forEach((v, k) => {
        filter.push(['<', ['feature-state', 'count'], v]);
        filter.push(colors[k]);
      });
      filter.push(colors[colors.length-1]);
      filter = [
        'case',
        ['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
        ...filter,
      ];
      map.setPaintProperty('zipcode', 'fill-color', filter);
    }
  });
});
</script>


<script id="jsbin-source-css" type="text/css">body {
  margin: 0;
  padding: 0;
}

h2,
h3 {
  margin: 10px;
  font-size: 1.2em;
}

h3 {
  font-size: 1em;
}

p {
  font-size: 0.85em;
  margin: 10px;
  text-align: left;
}

/**
* Create a position for the map
* on the page */
#canvas {
  width: 1000px;
  height: 700px;
}

#chart {
  width: 300px;
  height: 700px;
  float: left;
  display: inline-block;
}

#map {
  width: 700px;
  height: 700px;
  float: left;
  display: inline-block;
}

/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  margin-right: 20px;
  font-family: Arial, sans-serif;
  overflow: auto;
  border-radius: 3px;
}

#features {
  top: 0;
  height: 100px;
  margin-top: 20px;
  width: 250px;
}

#legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 18px;
  height: 150px;
  margin-bottom: 40px;
  width: 100px;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
  center: [-74,40.7],
  zoom: 10,
});

map.on('load', function() {
  map.addSource('zipcode', {
  type: 'geojson',
  data:
    'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson',
  promoteId: 'zipcode',
});


  map.addLayer({
    id: 'zipcode',
    source: 'zipcode',
    type: 'fill',
    paint:{
      'fill-opacity': 0.8,
      'fill-outline-color': '#444',
      'fill-color': '#007bff',
    },
  });


  // moved the above commented code inside d3
  d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json')
    .then(inspections => {

    let data        = inspections.filter(d => d.total>1500),
        cuisines    = data.map(d => d.cuisine),
        total       = data.map(d => d.total),
        traces = [{
          x: total,
          y: cuisines,
          orientation: 'h',
          type: 'bar',
          marker: {
            color: 'LightGray',
            line: {
              color: 'black',
              width: 0.5,
            }
          },
        }],
        layout = {
          title: 'Inspections',
          width: 350,
          xaxis: {
            title: 'Number of Inspections',
          },
          yaxis: {
            title: 'Cuisines',
            ticks: 'outside',
            autorange: 'reversed',
          },
        },
        chart = document.getElementById('chart');

    Plotly.newPlot(chart, traces, layout);

    chart.on('plotly_hover', event => {
      // In order to change color, we need to update all
      // item colors, and give the specific one a different color
      let index = event.points[0].pointIndex, // index of the data element
          perZip = Object.entries(inspections[index].perZip);
      setStates(perZip);
    });


    function setStates(perZip) {
      perZip.forEach(d => {
        map.setFeatureState({
          source: 'zipcode',
          id: d[0],
        }, {
          count: d[1],
        });
      });

      let steps  = 7,
          maxV   = d3.max(perZip.map(d => d[1])),
          domain = d3.range(0, maxV, maxV/steps),
          colors = d3.schemeBlues[steps],
          filter = new Array();
      domain.slice(1).forEach((v, k) => {
        filter.push(['<', ['feature-state', 'count'], v]);
        filter.push(colors[k]);
      });
      filter.push(colors[colors.length-1]);
      filter = [
        'case',
        ['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
        ...filter,
      ];
      map.setPaintProperty('zipcode', 'fill-color', filter);
    }
  });
});


</script></body>
</html>

## jsbin.botubit.css
body {
  margin: 0;
  padding: 0;
}

h2,
h3 {
  margin: 10px;
  font-size: 1.2em;
}

h3 {
  font-size: 1em;
}

p {
  font-size: 0.85em;
  margin: 10px;
  text-align: left;
}

/**
* Create a position for the map
* on the page */
#canvas {
  width: 1000px;
  height: 700px;
}

#chart {
  width: 300px;
  height: 700px;
  float: left;
  display: inline-block;
}

#map {
  width: 700px;
  height: 700px;
  float: left;
  display: inline-block;
}

/**
* Set rules for how the map overlays
* (information box and legend) will be displayed
* on the page. */
.map-overlay {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  margin-right: 20px;
  font-family: Arial, sans-serif;
  overflow: auto;
  border-radius: 3px;
}

#features {
  top: 0;
  height: 100px;
  margin-top: 20px;
  width: 250px;
}

#legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 18px;
  height: 150px;
  margin-bottom: 40px;
  width: 100px;
}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}

## jsbin.botubit.js
mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';

var map = new mapboxgl.Map({
  container: 'map', // container id
  style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
  center: [-74,40.7],
  zoom: 10,
});

map.on('load', function() {
  map.addSource('zipcode', {
  type: 'geojson',
  data:
    'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson',
  promoteId: 'zipcode',
});


  map.addLayer({
    id: 'zipcode',
    source: 'zipcode',
    type: 'fill',
    paint:{
      'fill-opacity': 0.8,
      'fill-outline-color': '#444',
      'fill-color': '#007bff',
    },
  });


  // moved the above commented code inside d3
  d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json')
    .then(inspections => {

    let data        = inspections.filter(d => d.total>1500),
        cuisines    = data.map(d => d.cuisine),
        total       = data.map(d => d.total),
        traces = [{
          x: total,
          y: cuisines,
          orientation: 'h',
          type: 'bar',
          marker: {
            color: 'LightGray',
            line: {
              color: 'black',
              width: 0.5,
            }
          },
        }],
        layout = {
          title: 'Inspections',
          width: 350,
          xaxis: {
            title: 'Number of Inspections',
          },
          yaxis: {
            title: 'Cuisines',
            ticks: 'outside',
            autorange: 'reversed',
          },
        },
        chart = document.getElementById('chart');

    Plotly.newPlot(chart, traces, layout);

    chart.on('plotly_hover', event => {
      // In order to change color, we need to update all
      // item colors, and give the specific one a different color
      let index = event.points[0].pointIndex, // index of the data element
          perZip = Object.entries(inspections[index].perZip);
      setStates(perZip);
    });


    function setStates(perZip) {
      perZip.forEach(d => {
        map.setFeatureState({
          source: 'zipcode',
          id: d[0],
        }, {
          count: d[1],
        });
      });

      let steps  = 7,
          maxV   = d3.max(perZip.map(d => d[1])),
          domain = d3.range(0, maxV, maxV/steps),
          colors = d3.schemeBlues[steps],
          filter = new Array();
      domain.slice(1).forEach((v, k) => {
        filter.push(['<', ['feature-state', 'count'], v]);
        filter.push(colors[k]);
      });
      filter.push(colors[colors.length-1]);
      filter = [
        'case',
        ['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
        ...filter,
      ];
      map.setPaintProperty('zipcode', 'fill-color', filter);
    }
  });
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Data Vis. Summer 2020 \|\| Lab 5 Task 3 </title>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
	<script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
	<link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />

	<style id="jsbin-css">
	body {
	margin: 0;
	padding: 0;
	}

	h2,
	h3 {
	margin: 10px;
	font-size: 1.2em;
	}

	h3 {
	font-size: 1em;
	}

	p {
	font-size: 0.85em;
	margin: 10px;
	text-align: left;
	}

	/**
	* Create a position for the map
	* on the page */
	#canvas {
	width: 1000px;
	height: 700px;
	}

	#chart {
	width: 300px;
	height: 700px;
	float: left;
	display: inline-block;
	}

	#map {
	width: 700px;
	height: 700px;
	float: left;
	display: inline-block;
	}

	/**
	* Set rules for how the map overlays
	* (information box and legend) will be displayed
	* on the page. */
	.map-overlay {
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.8);
	margin-right: 20px;
	font-family: Arial, sans-serif;
	overflow: auto;
	border-radius: 3px;
	}

	#features {
	top: 0;
	height: 100px;
	margin-top: 20px;
	width: 250px;
	}

	#legend {
	padding: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	line-height: 18px;
	height: 150px;
	margin-bottom: 40px;
	width: 100px;
	}

	.legend-key {
	display: inline-block;
	border-radius: 20%;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	}
	</style>
	</head>
	<body>
	<div id='canvas'>
	<div id='chart'></div>
	<div id='map'></div>
	</div>
	<script id="jsbin-javascript">
	mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
	center: [-74,40.7],
	zoom: 10,
	});

	map.on('load', function() {
	map.addSource('zipcode', {
	type: 'geojson',
	data:
	'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson',
	promoteId: 'zipcode',
	});


	map.addLayer({
	id: 'zipcode',
	source: 'zipcode',
	type: 'fill',
	paint:{
	'fill-opacity': 0.8,
	'fill-outline-color': '#444',
	'fill-color': '#007bff',
	},
	});


	// moved the above commented code inside d3
	d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json')
	.then(inspections => {

	let data = inspections.filter(d => d.total>1500),
	cuisines = data.map(d => d.cuisine),
	total = data.map(d => d.total),
	traces = [{
	x: total,
	y: cuisines,
	orientation: 'h',
	type: 'bar',
	marker: {
	color: 'LightGray',
	line: {
	color: 'black',
	width: 0.5,
	}
	},
	}],
	layout = {
	title: 'Inspections',
	width: 350,
	xaxis: {
	title: 'Number of Inspections',
	},
	yaxis: {
	title: 'Cuisines',
	ticks: 'outside',
	autorange: 'reversed',
	},
	},
	chart = document.getElementById('chart');

	Plotly.newPlot(chart, traces, layout);

	chart.on('plotly_hover', event => {
	// In order to change color, we need to update all
	// item colors, and give the specific one a different color
	let index = event.points[0].pointIndex, // index of the data element
	perZip = Object.entries(inspections[index].perZip);
	setStates(perZip);
	});


	function setStates(perZip) {
	perZip.forEach(d => {
	map.setFeatureState({
	source: 'zipcode',
	id: d[0],
	}, {
	count: d[1],
	});
	});

	let steps = 7,
	maxV = d3.max(perZip.map(d => d[1])),
	domain = d3.range(0, maxV, maxV/steps),
	colors = d3.schemeBlues[steps],
	filter = new Array();
	domain.slice(1).forEach((v, k) => {
	filter.push(['<', ['feature-state', 'count'], v]);
	filter.push(colors[k]);
	});
	filter.push(colors[colors.length-1]);
	filter = [
	'case',
	['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
	...filter,
	];
	map.setPaintProperty('zipcode', 'fill-color', filter);
	}
	});
	});
	</script>


	<script id="jsbin-source-css" type="text/css">body {
	margin: 0;
	padding: 0;
	}

	h2,
	h3 {
	margin: 10px;
	font-size: 1.2em;
	}

	h3 {
	font-size: 1em;
	}

	p {
	font-size: 0.85em;
	margin: 10px;
	text-align: left;
	}

	/**
	* Create a position for the map
	* on the page */
	#canvas {
	width: 1000px;
	height: 700px;
	}

	#chart {
	width: 300px;
	height: 700px;
	float: left;
	display: inline-block;
	}

	#map {
	width: 700px;
	height: 700px;
	float: left;
	display: inline-block;
	}

	/**
	* Set rules for how the map overlays
	* (information box and legend) will be displayed
	* on the page. */
	.map-overlay {
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.8);
	margin-right: 20px;
	font-family: Arial, sans-serif;
	overflow: auto;
	border-radius: 3px;
	}

	#features {
	top: 0;
	height: 100px;
	margin-top: 20px;
	width: 250px;
	}

	#legend {
	padding: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	line-height: 18px;
	height: 150px;
	margin-bottom: 40px;
	width: 100px;
	}

	.legend-key {
	display: inline-block;
	border-radius: 20%;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">mapboxgl.accessToken = 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw';

	var map = new mapboxgl.Map({
	container: 'map', // container id
	style: 'mapbox://styles/mapbox/light-v10', //use a base map without any data
	center: [-74,40.7],
	zoom: 10,
	});

	map.on('load', function() {
	map.addSource('zipcode', {
	type: 'geojson',
	data:
	'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson',
	promoteId: 'zipcode',
	});


	map.addLayer({
	id: 'zipcode',
	source: 'zipcode',
	type: 'fill',
	paint:{
	'fill-opacity': 0.8,
	'fill-outline-color': '#444',
	'fill-color': '#007bff',
	},
	});


	// moved the above commented code inside d3
	d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json')
	.then(inspections => {

	let data = inspections.filter(d => d.total>1500),
	cuisines = data.map(d => d.cuisine),
	total = data.map(d => d.total),
	traces = [{
	x: total,
	y: cuisines,
	orientation: 'h',
	type: 'bar',
	marker: {
	color: 'LightGray',
	line: {
	color: 'black',
	width: 0.5,
	}
	},
	}],
	layout = {
	title: 'Inspections',
	width: 350,
	xaxis: {
	title: 'Number of Inspections',
	},
	yaxis: {
	title: 'Cuisines',
	ticks: 'outside',
	autorange: 'reversed',
	},
	},
	chart = document.getElementById('chart');

	Plotly.newPlot(chart, traces, layout);

	chart.on('plotly_hover', event => {
	// In order to change color, we need to update all
	// item colors, and give the specific one a different color
	let index = event.points[0].pointIndex, // index of the data element
	perZip = Object.entries(inspections[index].perZip);
	setStates(perZip);
	});


	function setStates(perZip) {
	perZip.forEach(d => {
	map.setFeatureState({
	source: 'zipcode',
	id: d[0],
	}, {
	count: d[1],
	});
	});

	let steps = 7,
	maxV = d3.max(perZip.map(d => d[1])),
	domain = d3.range(0, maxV, maxV/steps),
	colors = d3.schemeBlues[steps],
	filter = new Array();
	domain.slice(1).forEach((v, k) => {
	filter.push(['<', ['feature-state', 'count'], v]);
	filter.push(colors[k]);
	});
	filter.push(colors[colors.length-1]);
	filter = [
	'case',
	['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)',
	...filter,
	];
	map.setPaintProperty('zipcode', 'fill-color', filter);
	}
	});
	});





	</script></body>
	</html>