Skip to content

Instantly share code, notes, and snippets.

@pg1647

pg1647/index.html

Created June 25, 2020 21:31
Show Gist options
  • Save pg1647/13f444805974b57523efed652230e0a9 to your computer and use it in GitHub Desktop.
Save pg1647/13f444805974b57523efed652230e0a9 to your computer and use it in GitHub Desktop.
Download ZIP
Data Vis. Summer 2020 || Lab 5 Task 3 // source https://jsbin.com/botubit
Raw
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>
Raw
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;
}
Raw
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);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment