Skip to content

Instantly share code, notes, and snippets.

@pg1647

pg1647/index.html

Created June 25, 2020 21:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pg1647/fa9b55ea14086fd36e22dfc7b8b9908a to your computer and use it in GitHub Desktop.
Save pg1647/fa9b55ea14086fd36e22dfc7b8b9908a to your computer and use it in GitHub Desktop.
Download ZIP
Data Vis. Summer 2020 || Lab 5 Task 2 // source https://jsbin.com/yezahaf
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 2</title>
<script src="https://d3js.org/d3.v5.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 */
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/**
* 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='map'></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',
});
// // lab 5 task 2 part 1
// map.addLayer({
// id: 'zipcode',
// source: 'zipcode',
// type: 'fill',
// paint:{
// 'fill-opacity': 0.8,
// 'fill-outline-color': '#444',
// // 'fill-color': '#007bff', //everything in blue
// 'fill-color': [
// 'case',
// ['==', ['get', 'zipcode'], '11201'], '#dc3545',
// '#007bff',
// ],
// },
// });
///////// only till here we can get part 1 of task 2 lab 5
// // // adding in the very end after alternative way of task 2 part 1
// // let steps = 5,
// // maxV = 1000,
// // 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])
// // lab 5 task 2 part 2 - another way of doing the same thing
// // only these two were there until before the end
// // ['>', ['feature-state', 'count'], 1000], '#dc3545',
// // '#007bff',
// map.addLayer({
// id: 'zipcode',
// source: 'zipcode',
// type: 'fill',
// paint:{
// 'fill-opacity': 0.8,
// 'fill-outline-color': '#444',
// 'fill-color': [
// 'case',
// ['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)', // so that places with no restaurants have no color
// ...filter,
// // ['<', ['feature-state', 'count'], domain[1]], colors[0],
// // ['<', ['feature-state', 'count'], domain[2]], colors[1],
// // ['<', ['feature-state', 'count'], domain[3]], colors[2],
// // ['<', ['feature-state', 'count'], domain[4]], colors[3],
// // colors[4],
// // ['>', ['feature-state', 'count'], 1000], '#dc3545',
// // '#007bff',
// ],
// },
// });
// // using https://docs.mapbox.com/help/tutorials/data-joins-with-mapbox-boundaries/#feature-state
// function setStates() {
// map.setFeatureState({
// source: 'zipcode',
// id: '11201',
// }, {
// count: 100,
// });
// }
// // Check if `statesData` source is loaded.
// function setAfterLoad(e) {
// if (e.sourceId === 'zipcode' && e.isSourceLoaded) {
// setStates();
// map.off('sourcedata', setAfterLoad);
// }
// }
// // If `statesData` source is loaded, call `setStates()`.
// if (map.isSourceLoaded('zipcode')) {
// setStates();
// } else {
// map.on('sourcedata', setAfterLoad);
// }
// till here was just alternative way of coloring one part red
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 perZip = Object.entries(inspections[0].perZip);
function setStates() {
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);
}
// Check if `statesData` source is loaded.
function setAfterLoad(e) {
if (e.sourceId === 'zipcode' && e.isSourceLoaded) {
setStates();
map.off('sourcedata', setAfterLoad);
}
}
// If `statesData` source is loaded, call `setStates()`.
if (map.isSourceLoaded('zipcode')) {
setStates();
} else {
map.on('sourcedata', setAfterLoad);
}
})
});
</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 */
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/**
* 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',
});
// // lab 5 task 2 part 1
// map.addLayer({
// id: 'zipcode',
// source: 'zipcode',
// type: 'fill',
// paint:{
// 'fill-opacity': 0.8,
// 'fill-outline-color': '#444',
// // 'fill-color': '#007bff', //everything in blue
// 'fill-color': [
// 'case',
// ['==', ['get', 'zipcode'], '11201'], '#dc3545',
// '#007bff',
// ],
// },
// });
///////// only till here we can get part 1 of task 2 lab 5
// // // adding in the very end after alternative way of task 2 part 1
// // let steps = 5,
// // maxV = 1000,
// // 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])
// // lab 5 task 2 part 2 - another way of doing the same thing
// // only these two were there until before the end
// // ['>', ['feature-state', 'count'], 1000], '#dc3545',
// // '#007bff',
// map.addLayer({
// id: 'zipcode',
// source: 'zipcode',
// type: 'fill',
// paint:{
// 'fill-opacity': 0.8,
// 'fill-outline-color': '#444',
// 'fill-color': [
// 'case',
// ['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)', // so that places with no restaurants have no color
// ...filter,
// // ['<', ['feature-state', 'count'], domain[1]], colors[0],
// // ['<', ['feature-state', 'count'], domain[2]], colors[1],
// // ['<', ['feature-state', 'count'], domain[3]], colors[2],
// // ['<', ['feature-state', 'count'], domain[4]], colors[3],
// // colors[4],
// // ['>', ['feature-state', 'count'], 1000], '#dc3545',
// // '#007bff',
// ],
// },
// });
// // using https://docs.mapbox.com/help/tutorials/data-joins-with-mapbox-boundaries/#feature-state
// function setStates() {
// map.setFeatureState({
// source: 'zipcode',
// id: '11201',
// }, {
// count: 100,
// });
// }
// // Check if `statesData` source is loaded.
// function setAfterLoad(e) {
// if (e.sourceId === 'zipcode' && e.isSourceLoaded) {
// setStates();
// map.off('sourcedata', setAfterLoad);
// }
// }
// // If `statesData` source is loaded, call `setStates()`.
// if (map.isSourceLoaded('zipcode')) {
// setStates();
// } else {
// map.on('sourcedata', setAfterLoad);
// }
// till here was just alternative way of coloring one part red
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 perZip = Object.entries(inspections[0].perZip);
function setStates() {
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);
}
// Check if `statesData` source is loaded.
function setAfterLoad(e) {
if (e.sourceId === 'zipcode' && e.isSourceLoaded) {
setStates();
map.off('sourcedata', setAfterLoad);
}
}
// If `statesData` source is loaded, call `setStates()`.
if (map.isSourceLoaded('zipcode')) {
setStates();
} else {
map.on('sourcedata', setAfterLoad);
}
})
});
</script></body>
</html>
Raw
jsbin.yezahaf.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 */
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
/**
* 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.yezahaf.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',
});
// // lab 5 task 2 part 1
// map.addLayer({
// id: 'zipcode',
// source: 'zipcode',
// type: 'fill',
// paint:{
// 'fill-opacity': 0.8,
// 'fill-outline-color': '#444',
// // 'fill-color': '#007bff', //everything in blue
// 'fill-color': [
// 'case',
// ['==', ['get', 'zipcode'], '11201'], '#dc3545',
// '#007bff',
// ],
// },
// });
///////// only till here we can get part 1 of task 2 lab 5
// // // adding in the very end after alternative way of task 2 part 1
// // let steps = 5,
// // maxV = 1000,
// // 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])
// // lab 5 task 2 part 2 - another way of doing the same thing
// // only these two were there until before the end
// // ['>', ['feature-state', 'count'], 1000], '#dc3545',
// // '#007bff',
// map.addLayer({
// id: 'zipcode',
// source: 'zipcode',
// type: 'fill',
// paint:{
// 'fill-opacity': 0.8,
// 'fill-outline-color': '#444',
// 'fill-color': [
// 'case',
// ['==', ['feature-state', 'count'], null], 'rgba(0,0,0,0)', // so that places with no restaurants have no color
// ...filter,
// // ['<', ['feature-state', 'count'], domain[1]], colors[0],
// // ['<', ['feature-state', 'count'], domain[2]], colors[1],
// // ['<', ['feature-state', 'count'], domain[3]], colors[2],
// // ['<', ['feature-state', 'count'], domain[4]], colors[3],
// // colors[4],
// // ['>', ['feature-state', 'count'], 1000], '#dc3545',
// // '#007bff',
// ],
// },
// });
// // using https://docs.mapbox.com/help/tutorials/data-joins-with-mapbox-boundaries/#feature-state
// function setStates() {
// map.setFeatureState({
// source: 'zipcode',
// id: '11201',
// }, {
// count: 100,
// });
// }
// // Check if `statesData` source is loaded.
// function setAfterLoad(e) {
// if (e.sourceId === 'zipcode' && e.isSourceLoaded) {
// setStates();
// map.off('sourcedata', setAfterLoad);
// }
// }
// // If `statesData` source is loaded, call `setStates()`.
// if (map.isSourceLoaded('zipcode')) {
// setStates();
// } else {
// map.on('sourcedata', setAfterLoad);
// }
// till here was just alternative way of coloring one part red
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 perZip = Object.entries(inspections[0].perZip);
function setStates() {
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);
}
// Check if `statesData` source is loaded.
function setAfterLoad(e) {
if (e.sourceId === 'zipcode' && e.isSourceLoaded) {
setStates();
map.off('sourcedata', setAfterLoad);
}
}
// If `statesData` source is loaded, call `setStates()`.
if (map.isSourceLoaded('zipcode')) {
setStates();
} else {
map.on('sourcedata', setAfterLoad);
}
})
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment