Skip to content

Instantly share code, notes, and snippets.

@angelialau

angelialau/index.html

Last active June 4, 2020 20:05
Show Gist options
  • Save angelialau/432eafc01eb690e7827e1efe1fa18d4b to your computer and use it in GitHub Desktop.
Save angelialau/432eafc01eb690e7827e1efe1fa18d4b to your computer and use it in GitHub Desktop.
Download ZIP
DV2 - Lab// source https://jsbin.com/tavokis
Raw
index.html
<!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>
<style id="jsbin-css">
#plotTitle {
font-family: Helvetica;
font-size: 16px;
}
.axisLabel {
font-family: Helvetica;
font-size: 14px;
fill: Black;
text-anchor:middle;
}
.legendText {
font-family: Helvetica;
font-size: 12px;
}
.tickLabel {
font-family: Helvetica;
font-size: 8px;
}
#background {
fill: white;
}
#legendBox {
fill: LightGray;
stroke: black;
}
.tickMark {
stroke: black;
fill: none;
}
.dot,.legendItem {
stroke: black;
}
.c2002 {
fill: SteelBlue;
}
.c2004 {
fill: SeaGreen;
}
.c2006 {
fill: IndianRed;
}
</style>
</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 updateDots(data, canvas, x, y){
let dots = canvas.selectAll('.dot')
.data(data, d => [d[2], d[3]]) // impt: key function for data join
dots.enter()
.append('circle')
.attr('cx', x(15))
.attr('cy', x(15))
.attr('class', d=>`c${d[2]} dot`)
.style('opacity', 0)
.merge(dots)
.transition().duration(1000)
.attr('cx', d=>x(d[0]))
.attr('cy', d=>y(d[1]))
.attr('r', 5)
.style('opacity', 1);
dots.exit()
.style('opacity', 0); // .remove()
}
function createPlot(data){
const canvasSize = [400, 400];
const tickSize = 5;
const pArea = [50, 30, 390, 360]; // left, top, right, bottom
const pSize = [pArea[2]-pArea[0], pArea[3]-pArea[1]];
var chart = d3.select("#chart"); // equiv of document.selectElementById
var canvas = chart.append("svg")
.attr('width', canvasSize[0])
.attr('height', canvasSize[1]);
canvas.append('text')
.attr('id', 'plotTitle')
.attr('x', 90)
.attr('y', 25)
.text("NYC High School Graduate Statistics");
canvas.append('rect')
.attr('id', 'background')
.attr('x', pArea[0])
.attr('y', pArea[1])
.attr('width', pSize[0])
.attr('height', pSize[1])
.on('click', () => {
updateDots(data, canvas, x, y);
})
;
var x = d3.scaleLinear()
.domain([0, 0.3*100])
.range([pArea[0], pArea[2]]); // pArea = [50, 30, 390, 370];
var y = d3.scaleLinear()
.domain([0, 0.3*100])
.range([pArea[3], pArea[1]]); // pArea = [50, 30, 390, 370];
canvas.append('rect')
.attr('id', 'legendBox')
.attr('x', pArea[2]-65)
.attr('y', pArea[1]+5)
.attr('width', 60)
.attr('height', 60)
let cohorts = [2002,2004,2006];
let legendGroups = canvas.selectAll('.legendGroup')
.data(cohorts)
.enter().append('g')
.on('click', d => {
let filteredData = data.filter(row => row[2]==d);
updateDots(filteredData, canvas, x, y);
});
legendGroups.append('rect')
.attr('class', d => `c${d} legendItem`)
.attr('x', pArea[2]-60)
.attr('y', (d, i) => pArea[1]+10+i*20)
.attr('width', 10)
.attr('height', 10)
legendGroups.append('text')
.attr('class', 'legendText')
.attr('x', pArea[2]-40)
.attr('y', (d, i) => pArea[1]+19+i*20)
.text(d=>d);
// axis ticks and labels: x axis
canvas.append('g')
.attr('class', 'axis axis--x')
.attr('transform', `translate(0, ${pArea[3]})`) // shifts axis from top of page to bottom of canvas
.call(d3.axisBottom(x).ticks(5, 'I')) // says ticks should be pointing downwards, have 5 ticklabels, and ticklabels are integers
.append('text')
.attr('class', 'axisLabel')
.attr('x', (x.range()[0]+x.range()[1])/2)
.attr('y', 35)
.text('Advanced Regents (%)');
// axis ticks and labels: y axis
canvas.append('g')
.attr('class', 'axis axis--y')
.attr('transform', `translate(${pArea[0]}, 0)`) // shifts axis from top of page to bottom of canvas
.call(d3.axisLeft(y).ticks(5, 'I')) // says ticks should be pointing left, have 5 ticklabels, and ticklabels are integers
.append('text')
.attr('class', 'axisLabel')
.attr('transform', 'rotate(-90)')
.attr('x', -(y.range()[0]+y.range()[1])/2)
.attr('y', -35)
.text('Dropped Out (%)');
updateDots(data, canvas, x, y);
}
</script>
</body>
</html>
Raw
jsbin.tavokis.css
#plotTitle {
font-family: Helvetica;
font-size: 16px;
}
.axisLabel {
font-family: Helvetica;
font-size: 14px;
fill: Black;
text-anchor:middle;
}
.legendText {
font-family: Helvetica;
font-size: 12px;
}
.tickLabel {
font-family: Helvetica;
font-size: 8px;
}
#background {
fill: white;
}
#legendBox {
fill: LightGray;
stroke: black;
}
.tickMark {
stroke: black;
fill: none;
}
.dot,.legendItem {
stroke: black;
}
.c2002 {
fill: SteelBlue;
}
.c2004 {
fill: SeaGreen;
}
.c2006 {
fill: IndianRed;
}
Raw
jsbin.tavokis.js
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 updateDots(data, canvas, x, y){
let dots = canvas.selectAll('.dot')
.data(data, d => [d[2], d[3]]) // impt: key function for data join
dots.enter()
.append('circle')
.attr('cx', x(15))
.attr('cy', x(15))
.attr('class', d=>`c${d[2]} dot`)
.style('opacity', 0)
.merge(dots)
.transition().duration(1000)
.attr('cx', d=>x(d[0]))
.attr('cy', d=>y(d[1]))
.attr('r', 5)
.style('opacity', 1);
dots.exit()
.style('opacity', 0); // .remove()
}
function createPlot(data){
const canvasSize = [400, 400];
const tickSize = 5;
const pArea = [50, 30, 390, 360]; // left, top, right, bottom
const pSize = [pArea[2]-pArea[0], pArea[3]-pArea[1]];
var chart = d3.select("#chart"); // equiv of document.selectElementById
var canvas = chart.append("svg")
.attr('width', canvasSize[0])
.attr('height', canvasSize[1]);
canvas.append('text')
.attr('id', 'plotTitle')
.attr('x', 90)
.attr('y', 25)
.text("NYC High School Graduate Statistics");
canvas.append('rect')
.attr('id', 'background')
.attr('x', pArea[0])
.attr('y', pArea[1])
.attr('width', pSize[0])
.attr('height', pSize[1])
.on('click', () => {
updateDots(data, canvas, x, y);
})
;
var x = d3.scaleLinear()
.domain([0, 0.3*100])
.range([pArea[0], pArea[2]]); // pArea = [50, 30, 390, 370];
var y = d3.scaleLinear()
.domain([0, 0.3*100])
.range([pArea[3], pArea[1]]); // pArea = [50, 30, 390, 370];
canvas.append('rect')
.attr('id', 'legendBox')
.attr('x', pArea[2]-65)
.attr('y', pArea[1]+5)
.attr('width', 60)
.attr('height', 60)
let cohorts = [2002,2004,2006];
let legendGroups = canvas.selectAll('.legendGroup')
.data(cohorts)
.enter().append('g')
.on('click', d => {
let filteredData = data.filter(row => row[2]==d);
updateDots(filteredData, canvas, x, y);
});
legendGroups.append('rect')
.attr('class', d => `c${d} legendItem`)
.attr('x', pArea[2]-60)
.attr('y', (d, i) => pArea[1]+10+i*20)
.attr('width', 10)
.attr('height', 10)
legendGroups.append('text')
.attr('class', 'legendText')
.attr('x', pArea[2]-40)
.attr('y', (d, i) => pArea[1]+19+i*20)
.text(d=>d);
// axis ticks and labels: x axis
canvas.append('g')
.attr('class', 'axis axis--x')
.attr('transform', `translate(0, ${pArea[3]})`) // shifts axis from top of page to bottom of canvas
.call(d3.axisBottom(x).ticks(5, 'I')) // says ticks should be pointing downwards, have 5 ticklabels, and ticklabels are integers
.append('text')
.attr('class', 'axisLabel')
.attr('x', (x.range()[0]+x.range()[1])/2)
.attr('y', 35)
.text('Advanced Regents (%)');
// axis ticks and labels: y axis
canvas.append('g')
.attr('class', 'axis axis--y')
.attr('transform', `translate(${pArea[0]}, 0)`) // shifts axis from top of page to bottom of canvas
.call(d3.axisLeft(y).ticks(5, 'I')) // says ticks should be pointing left, have 5 ticklabels, and ticklabels are integers
.append('text')
.attr('class', 'axisLabel')
.attr('transform', 'rotate(-90)')
.attr('x', -(y.range()[0]+y.range()[1])/2)
.attr('y', -35)
.text('Dropped Out (%)');
updateDots(data, canvas, x, y);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment