Created
June 7, 2020 23:19
-
-
Save angelialau/225a4a7b88d5a49a1443e982ef505246 to your computer and use it in GitHub Desktop.
HW1// source https://jsbin.com/digozuv
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>HW1</title> | |
| <script src="https://d3js.org/d3.v5.min.js"></script> | |
| <style id="jsbin-css"> | |
| .bar { | |
| fill: LightGray; | |
| } | |
| #ylabel { | |
| font-family: Helvetica; | |
| font-size: 14px; | |
| fill: Black; | |
| text-anchor:middle; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chart"></div> | |
| <script id="jsbin-javascript"> | |
| d3.json('https://raw.githubusercontent.com/hvo/datasets/master/us-refugees.json') | |
| .then(refugees => { | |
| var data = refugees.map(x => ([x.Year, | |
| Object.entries(x) | |
| .filter(item=>(item[0]!='Year')) | |
| .reduce((total, item)=>(total+item[1]), 0) | |
| ])); | |
| createPlot(data); | |
| }); | |
| function createPlot(data) { | |
| const canvasSize = [300, 1000]; | |
| const xPad = 60; | |
| const chartLeft = 20; //left alignment for both chart title and year labels | |
| const rowHeight = 20; | |
| var chart = d3.select("#chart"); | |
| var canvas = chart.append("svg") | |
| .attr('width', canvasSize[0]) | |
| .attr('height', canvasSize[1]); | |
| var maxValue = d3.max(data.map(x=>x[1])); | |
| var widthScale = d3.scaleLinear() | |
| .domain([0, d3.max(data.map(x=>x[1]))]) | |
| .range([0, canvasSize[0]]); | |
| let barGroup = canvas.selectAll('.legendGroup') | |
| .data(data) | |
| .enter() | |
| .append('g'); | |
| // bar labels | |
| barGroup.append('text') | |
| .attr('x', 20) | |
| .attr('y', (d, i) => 65+i*rowHeight) | |
| .text(d=>`${d[0]} -`); | |
| // the actual bar | |
| barGroup.append('rect') | |
| .attr('class', 'bar') | |
| .attr('x', xPad) | |
| .attr('y', (d, i)=>(50 + i*rowHeight)) | |
| .attr('width', d=>widthScale(d[1])) | |
| .attr('height', rowHeight-2) | |
| .on('mouseover', (d, i) => { | |
| d3.select(event.currentTarget) | |
| .transition().duration(120) | |
| .style('fill', 'SteelBlue') | |
| .attr('x', chartLeft) | |
| .attr('width', canvasSize[0]+xPad) | |
| }) | |
| .on('mouseout', d => { | |
| d3.select(event.currentTarget) | |
| .transition().duration(120) | |
| .style('fill', 'LightGrey') | |
| .attr('x', xPad) | |
| .attr('width', widthScale(d[1])) | |
| }); | |
| // title | |
| canvas.append('text') | |
| .attr('x', chartLeft) | |
| .attr('y', rowHeight) | |
| .text('Refugees'); | |
| // y axis title | |
| const yLabelPos = [chartLeft-10, canvasSize[1]*2/5] | |
| canvas.append('text') | |
| .attr('class', '#ylabel') | |
| .attr('x', yLabelPos[0]) | |
| .attr('y', yLabelPos[1]) | |
| .attr('transform',`rotate(-90, ${yLabelPos[0]}, ${yLabelPos[1]})`) | |
| .text('Year'); | |
| } | |
| </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
| .bar { | |
| fill: LightGray; | |
| } | |
| #ylabel { | |
| font-family: Helvetica; | |
| font-size: 14px; | |
| fill: Black; | |
| text-anchor:middle; | |
| } |
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/us-refugees.json') | |
| .then(refugees => { | |
| var data = refugees.map(x => ([x.Year, | |
| Object.entries(x) | |
| .filter(item=>(item[0]!='Year')) | |
| .reduce((total, item)=>(total+item[1]), 0) | |
| ])); | |
| createPlot(data); | |
| }); | |
| function createPlot(data) { | |
| const canvasSize = [300, 1000]; | |
| const xPad = 60; | |
| const chartLeft = 20; //left alignment for both chart title and year labels | |
| const rowHeight = 20; | |
| var chart = d3.select("#chart"); | |
| var canvas = chart.append("svg") | |
| .attr('width', canvasSize[0]) | |
| .attr('height', canvasSize[1]); | |
| var maxValue = d3.max(data.map(x=>x[1])); | |
| var widthScale = d3.scaleLinear() | |
| .domain([0, d3.max(data.map(x=>x[1]))]) | |
| .range([0, canvasSize[0]]); | |
| let barGroup = canvas.selectAll('.legendGroup') | |
| .data(data) | |
| .enter() | |
| .append('g'); | |
| // bar labels | |
| barGroup.append('text') | |
| .attr('x', 20) | |
| .attr('y', (d, i) => 65+i*rowHeight) | |
| .text(d=>`${d[0]} -`); | |
| // the actual bar | |
| barGroup.append('rect') | |
| .attr('class', 'bar') | |
| .attr('x', xPad) | |
| .attr('y', (d, i)=>(50 + i*rowHeight)) | |
| .attr('width', d=>widthScale(d[1])) | |
| .attr('height', rowHeight-2) | |
| .on('mouseover', (d, i) => { | |
| d3.select(event.currentTarget) | |
| .transition().duration(120) | |
| .style('fill', 'SteelBlue') | |
| .attr('x', chartLeft) | |
| .attr('width', canvasSize[0]+xPad) | |
| }) | |
| .on('mouseout', d => { | |
| d3.select(event.currentTarget) | |
| .transition().duration(120) | |
| .style('fill', 'LightGrey') | |
| .attr('x', xPad) | |
| .attr('width', widthScale(d[1])) | |
| }); | |
| // title | |
| canvas.append('text') | |
| .attr('x', chartLeft) | |
| .attr('y', rowHeight) | |
| .text('Refugees'); | |
| // y axis title | |
| const yLabelPos = [chartLeft-10, canvasSize[1]*2/5] | |
| canvas.append('text') | |
| .attr('class', '#ylabel') | |
| .attr('x', yLabelPos[0]) | |
| .attr('y', yLabelPos[1]) | |
| .attr('transform',`rotate(-90, ${yLabelPos[0]}, ${yLabelPos[1]})`) | |
| .text('Year'); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment