Created
June 20, 2020 00:51
-
-
Save pg1647/6e1623867452d01031729de4977853ba to your computer and use it in GitHub Desktop.
Data Vis. Summer 2020 || Lab 4 Task 1 - HW1 using Plotly// source https://jsbin.com/zocapir
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script id="jsbin-javascript"> | |
| d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json') | |
| .then(data => { | |
| let entries = [].concat(...data.map(d => Object.entries(d.perZip))), | |
| byZip = d3.nest() | |
| .key(d => d[0]) | |
| .entries(entries) | |
| .map(d => [d.key, d3.sum(d.values.map(e => e[1]))]); | |
| createPlot(byZip); | |
| }); | |
| function createPlot(byZip) { | |
| let zipcodes = byZip.map(d => d[0]), | |
| counts = byZip.map(d => d[1]), | |
| // can give more or less points like [0, 0.5, 1] or [0, 0.2, 0.4, 0.6, 0.8, 1] | |
| blues = [0, 0.2, 0.4, 0.6, 0.8, 1].map(d => [d, d3.interpolateBlues(d)]), | |
| data = [{ | |
| // we need both [ and { types of brackets because this "data" is a list of traces | |
| // so each {} contains one trace | |
| type: 'choroplethmapbox', | |
| name: 'Restaurant Inspection', | |
| geojson: 'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson', | |
| featureidkey: 'properties.zipcode', // used to link locations with geojson | |
| // read: https://plotly.com/javascript/reference/#choroplethmapbox | |
| locations: zipcodes, | |
| // hovertext: "Prachi", | |
| z: counts, | |
| zmin: d3.min(counts), | |
| zmax: d3.max(counts), | |
| colorbar: { | |
| title: { | |
| text: "Number of Inspections", | |
| side: "right", | |
| }, | |
| }, | |
| colorscale:blues, | |
| // colorscale: 'Greys' // 'Blues' // searcn in documentation - can use for different colors | |
| }], | |
| layout = { | |
| width: 800, | |
| height: 600, | |
| margin: {t: 0, b: 0, l: 0}, // try r:300 to see difference | |
| mapbox: { | |
| style: "light", // to use this style we need mapboxAccessToken as written in | |
| // https://plotly.com/javascript/mapbox-layers/#how-layers-work-in-mapbox-maps | |
| center: {lon: -73.975, lat: 40.7}, | |
| zoom: 9, | |
| }, | |
| }, | |
| config = { | |
| // this token is to be used from your mapbox account from here: | |
| // https://account.mapbox.com/ -> look in public tokens | |
| mapboxAccessToken: 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw', | |
| }; | |
| Plotly.newPlot('chart', data, layout, config); | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json') | |
| .then(data => { | |
| let entries = [].concat(...data.map(d => Object.entries(d.perZip))), | |
| byZip = d3.nest() | |
| .key(d => d[0]) | |
| .entries(entries) | |
| .map(d => [d.key, d3.sum(d.values.map(e => e[1]))]); | |
| createPlot(byZip); | |
| }); | |
| function createPlot(byZip) { | |
| let zipcodes = byZip.map(d => d[0]), | |
| counts = byZip.map(d => d[1]), | |
| // can give more or less points like [0, 0.5, 1] or [0, 0.2, 0.4, 0.6, 0.8, 1] | |
| blues = [0, 0.2, 0.4, 0.6, 0.8, 1].map(d => [d, d3.interpolateBlues(d)]), | |
| data = [{ | |
| // we need both [ and { types of brackets because this "data" is a list of traces | |
| // so each {} contains one trace | |
| type: 'choroplethmapbox', | |
| name: 'Restaurant Inspection', | |
| geojson: 'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson', | |
| featureidkey: 'properties.zipcode', // used to link locations with geojson | |
| // read: https://plotly.com/javascript/reference/#choroplethmapbox | |
| locations: zipcodes, | |
| // hovertext: "Prachi", | |
| z: counts, | |
| zmin: d3.min(counts), | |
| zmax: d3.max(counts), | |
| colorbar: { | |
| title: { | |
| text: "Number of Inspections", | |
| side: "right", | |
| }, | |
| }, | |
| colorscale:blues, | |
| // colorscale: 'Greys' // 'Blues' // searcn in documentation - can use for different colors | |
| }], | |
| layout = { | |
| width: 800, | |
| height: 600, | |
| margin: {t: 0, b: 0, l: 0}, // try r:300 to see difference | |
| mapbox: { | |
| style: "light", // to use this style we need mapboxAccessToken as written in | |
| // https://plotly.com/javascript/mapbox-layers/#how-layers-work-in-mapbox-maps | |
| center: {lon: -73.975, lat: 40.7}, | |
| zoom: 9, | |
| }, | |
| }, | |
| config = { | |
| // this token is to be used from your mapbox account from here: | |
| // https://account.mapbox.com/ -> look in public tokens | |
| mapboxAccessToken: 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw', | |
| }; | |
| Plotly.newPlot('chart', data, layout, config); | |
| }</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| d3.json('https://raw.githubusercontent.com/hvo/datasets/master/nyc_restaurants_by_cuisine.json') | |
| .then(data => { | |
| let entries = [].concat(...data.map(d => Object.entries(d.perZip))), | |
| byZip = d3.nest() | |
| .key(d => d[0]) | |
| .entries(entries) | |
| .map(d => [d.key, d3.sum(d.values.map(e => e[1]))]); | |
| createPlot(byZip); | |
| }); | |
| function createPlot(byZip) { | |
| let zipcodes = byZip.map(d => d[0]), | |
| counts = byZip.map(d => d[1]), | |
| // can give more or less points like [0, 0.5, 1] or [0, 0.2, 0.4, 0.6, 0.8, 1] | |
| blues = [0, 0.2, 0.4, 0.6, 0.8, 1].map(d => [d, d3.interpolateBlues(d)]), | |
| data = [{ | |
| // we need both [ and { types of brackets because this "data" is a list of traces | |
| // so each {} contains one trace | |
| type: 'choroplethmapbox', | |
| name: 'Restaurant Inspection', | |
| geojson: 'https://raw.githubusercontent.com/hvo/datasets/master/nyc_zip.geojson', | |
| featureidkey: 'properties.zipcode', // used to link locations with geojson | |
| // read: https://plotly.com/javascript/reference/#choroplethmapbox | |
| locations: zipcodes, | |
| // hovertext: "Prachi", | |
| z: counts, | |
| zmin: d3.min(counts), | |
| zmax: d3.max(counts), | |
| colorbar: { | |
| title: { | |
| text: "Number of Inspections", | |
| side: "right", | |
| }, | |
| }, | |
| colorscale:blues, | |
| // colorscale: 'Greys' // 'Blues' // searcn in documentation - can use for different colors | |
| }], | |
| layout = { | |
| width: 800, | |
| height: 600, | |
| margin: {t: 0, b: 0, l: 0}, // try r:300 to see difference | |
| mapbox: { | |
| style: "light", // to use this style we need mapboxAccessToken as written in | |
| // https://plotly.com/javascript/mapbox-layers/#how-layers-work-in-mapbox-maps | |
| center: {lon: -73.975, lat: 40.7}, | |
| zoom: 9, | |
| }, | |
| }, | |
| config = { | |
| // this token is to be used from your mapbox account from here: | |
| // https://account.mapbox.com/ -> look in public tokens | |
| mapboxAccessToken: 'pk.eyJ1IjoicGcxNjQ3IiwiYSI6ImNrYmp0Nm14MjBzZWEyd215ZnpoZmUxd2oifQ.t18TpHLX9w7Z943Tzcytjw', | |
| }; | |
| Plotly.newPlot('chart', data, layout, config); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment