Last active
June 12, 2020 16:24
-
-
Save pg1647/934e51d57256f0ff99b4f1f8a7eeb100 to your computer and use it in GitHub Desktop.
Data Vis. Summer 2020 || Lab 3 using Plotly // source https://jsbin.com/gipomib
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>DV2 - Lab</title> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <! <script src="plotly-latest.min.js"></script> > | |
| <script src='https://cdn.plot.ly/plotly-latest.min.js'></script> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script id="jsbin-javascript"> | |
| d3.csv('https://raw.githubusercontent.com/hvo/datasets/master/nyc_grads.csv') | |
| .then(grads => { | |
| var data = grads | |
| .filter(row => ((row.Type=='Borough Total') && | |
| (row.Cohort%2===0))) | |
| .map(row => [row.Advanced/row.Total*100, | |
| row.DroppedOut/row.Total*100, | |
| row.Cohort, | |
| row.Borough]); | |
| createPlot(data); | |
| }); | |
| function createPlot(data) { | |
| // to group data by cohort | |
| let byCohort = d3.nest() | |
| .key(d => d[2]) | |
| .entries(data); | |
| // console.log(byCohort); | |
| // color scheme for each cohort | |
| let colors = ['SteelBlue', 'SeaGreen', 'IndianRed']; | |
| // turn each cohort data group into a Plotly's trace | |
| // Scatterplot's template is taken from: | |
| // https://plotly.com/javascript/line-and-scatter/ | |
| let traces = byCohort.map((cohort, i) => ({ | |
| x: cohort.values.map(d => d[0]), | |
| y: cohort.values.map(d => d[1]), | |
| mode: 'markers', | |
| type: 'scatter', | |
| name: cohort.key, | |
| marker: { color: colors[i], // change color based on group id 'i' | |
| size: 10, | |
| line: { | |
| color: 'black', | |
| width: 1, | |
| }, | |
| }, | |
| })); | |
| let layout = { | |
| width: 500, | |
| height: 400, | |
| title: "NYC High School Graduate Statistics", | |
| xaxis: { | |
| title: "Advanced Regents (%)", | |
| range: [0, 30], | |
| nticks: 7, | |
| ticks: "outside", | |
| mirror: true, | |
| linewidth: 1, | |
| }, | |
| yaxis: { | |
| title: "Dropped Out (%)", | |
| range: [0, 30], | |
| nticks: 7, | |
| ticks: "outisde", | |
| mirror: true, | |
| linewidth: 1, | |
| }, | |
| }; | |
| Plotly.newPlot('chart', traces, layout); | |
| } | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">d3.csv('https://raw.githubusercontent.com/hvo/datasets/master/nyc_grads.csv') | |
| .then(grads => { | |
| var data = grads | |
| .filter(row => ((row.Type=='Borough Total') && | |
| (row.Cohort%2===0))) | |
| .map(row => [row.Advanced/row.Total*100, | |
| row.DroppedOut/row.Total*100, | |
| row.Cohort, | |
| row.Borough]); | |
| createPlot(data); | |
| }); | |
| function createPlot(data) { | |
| // to group data by cohort | |
| let byCohort = d3.nest() | |
| .key(d => d[2]) | |
| .entries(data); | |
| // console.log(byCohort); | |
| // color scheme for each cohort | |
| let colors = ['SteelBlue', 'SeaGreen', 'IndianRed']; | |
| // turn each cohort data group into a Plotly's trace | |
| // Scatterplot's template is taken from: | |
| // https://plotly.com/javascript/line-and-scatter/ | |
| let traces = byCohort.map((cohort, i) => ({ | |
| x: cohort.values.map(d => d[0]), | |
| y: cohort.values.map(d => d[1]), | |
| mode: 'markers', | |
| type: 'scatter', | |
| name: cohort.key, | |
| marker: { color: colors[i], // change color based on group id 'i' | |
| size: 10, | |
| line: { | |
| color: 'black', | |
| width: 1, | |
| }, | |
| }, | |
| })); | |
| let layout = { | |
| width: 500, | |
| height: 400, | |
| title: "NYC High School Graduate Statistics", | |
| xaxis: { | |
| title: "Advanced Regents (%)", | |
| range: [0, 30], | |
| nticks: 7, | |
| ticks: "outside", | |
| mirror: true, | |
| linewidth: 1, | |
| }, | |
| yaxis: { | |
| title: "Dropped Out (%)", | |
| range: [0, 30], | |
| nticks: 7, | |
| ticks: "outisde", | |
| mirror: true, | |
| linewidth: 1, | |
| }, | |
| }; | |
| Plotly.newPlot('chart', traces, layout); | |
| }</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.csv('https://raw.githubusercontent.com/hvo/datasets/master/nyc_grads.csv') | |
| .then(grads => { | |
| var data = grads | |
| .filter(row => ((row.Type=='Borough Total') && | |
| (row.Cohort%2===0))) | |
| .map(row => [row.Advanced/row.Total*100, | |
| row.DroppedOut/row.Total*100, | |
| row.Cohort, | |
| row.Borough]); | |
| createPlot(data); | |
| }); | |
| function createPlot(data) { | |
| // to group data by cohort | |
| let byCohort = d3.nest() | |
| .key(d => d[2]) | |
| .entries(data); | |
| // console.log(byCohort); | |
| // color scheme for each cohort | |
| let colors = ['SteelBlue', 'SeaGreen', 'IndianRed']; | |
| // turn each cohort data group into a Plotly's trace | |
| // Scatterplot's template is taken from: | |
| // https://plotly.com/javascript/line-and-scatter/ | |
| let traces = byCohort.map((cohort, i) => ({ | |
| x: cohort.values.map(d => d[0]), | |
| y: cohort.values.map(d => d[1]), | |
| mode: 'markers', | |
| type: 'scatter', | |
| name: cohort.key, | |
| marker: { color: colors[i], // change color based on group id 'i' | |
| size: 10, | |
| line: { | |
| color: 'black', | |
| width: 1, | |
| }, | |
| }, | |
| })); | |
| let layout = { | |
| width: 500, | |
| height: 400, | |
| title: "NYC High School Graduate Statistics", | |
| xaxis: { | |
| title: "Advanced Regents (%)", | |
| range: [0, 30], | |
| nticks: 7, | |
| ticks: "outside", | |
| mirror: true, | |
| linewidth: 1, | |
| }, | |
| yaxis: { | |
| title: "Dropped Out (%)", | |
| range: [0, 30], | |
| nticks: 7, | |
| ticks: "outisde", | |
| mirror: true, | |
| linewidth: 1, | |
| }, | |
| }; | |
| Plotly.newPlot('chart', traces, layout); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment