Skip to content

Instantly share code, notes, and snippets.

@emilyw15

emilyw15/.block

Last active October 17, 2017 03:15
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 emilyw15/e00f75f68780fce57b60a40fdb7c3d74 to your computer and use it in GitHub Desktop.
Save emilyw15/e00f75f68780fce57b60a40fdb7c3d74 to your computer and use it in GitHub Desktop.
Download ZIP
2017 MTA Average Ridership
Raw
.block
license: mit
Raw
.index.html.swp
b0VIM 8.0#:�YrR"Bcurranneon~curran/topInternetViz/index.html 3210#"! Utppyad0 p�����S��������oX?� � � � � � � ` S R - � � { z V /  � � � i �
�
�
�
~
W
2

� � � � z N $
�����hGF. ����~e!�����ih@%�����qXW.
���`ED( ���q% .a .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', ' .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr( .attr('dy', '0.1em'); .attr('dy', '0.1em'); .attr('dy', '0.1em'); .selectAll('.cell text') .att yAxisG.call yAxisG.call(yAxis); xAxisG.call(xAxis); .attr('r', 8); .attr('fill-opacity', 0.6) .attr('fill', 'black') .attr('cy', d => yScale(yValue(d))) .attr('cx', d => xScale(xValue(d))) .enter().append('circle') g.selectAll('circle').data(data) .nice(yTicks); .range([innerHeight, 0]) .domain(d3.extent(data, yValue)) yScale .range([0, innerWidth]); .domain(data.map(xValue)) xScale data = top5(data); d3.csv('data.csv', row, data => { const top5 = data => data.slice(0, 5); }; }; netUsers: +netUsersWithCommas.replace(/,/g, '') country: d['Country or Region'], return { const netUsersWithCommas = d['Internet Users 31 Mar 2017']; const row = d => { .tickSize(-innerWidth); .tickFormat(d3.format('.0s')) .tickPadding(15) .ticks(yTicks) .scale(yScale) const yAxis = d3.axisLeft() const yTicks = 5; .tickSize(-innerHeight); .tickPadding(15) .scale(xScale) const xAxis = d3.axisBottom() const yScale = d3.scaleLinear(); const xScale = d3.scalePoint(); .text(yLabel); .style('text-anchor', 'middle') .attr('transform', `rotate(-90)`) .attr('y', -100) .attr('x', -innerHeight / 2) .attr('class', 'axis-label') yAxisG.append('text') .text(xLabel); .attr('y', 90) .attr('x', innerWidth / 2) .attr('class', 'axis-label') xAxisG.append('text') const yAxisG = g.append('g'); .attr('transform', `translate(0, ${innerHeight})`); const xAxisG = g.append('g') .attr('transform', `translate(${margin.left},${margin.top})`); const g = svg.append('g') const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const height = svg.attr('height'); const width = svg.attr('width'); const svg = d3.select('svg'); const margin = { left: 150, right: 70, top: 20, bottom: 110 }; const yLabel = 'Internet Users'; const yValue = d => d.netUsers; const xLabel = 'Country'; const xValue = d => d.country; <script> <svg width="960" height="500"></svg> <body> </head> </style> } font-family: sans-serif; font-size: 40pt; fill: #635F5D; .axis-label { } font-family: sans-serif; font-size: 20pt; fill: #8E8883; .tick text { } stroke: #C0C0BB; .tick line { } display: none; .domain { } margin: 0px; body { <style> <title>Top Internet Countries Visualization</title> <script src="https://d3js.org/d3.v4.min.js"></script> <meta name="viewport" content="width=device-width"> <meta charset="utf-8"> <head><html><!DOCTYPE html>ad������</html> </body> </script> });
Raw
README.md
Raw
commuter_data.csv
Month Avg_Riders Type
Jan 37667 Metro
Feb 37428 Metro
Mar 34319 Metro
Apr 36558 Metro
May 36684 Metro
Jun 39484 Metro
Jan 18225 Light Rail
Feb 20202 Light Rail
Mar 22669 Light Rail
Apr 23613 Light Rail
May 20547 Light Rail
Jun 23981 Light Rail
Jan 6539 MARC Brunswick
Feb 7084 MARC Brunswick
Mar 6824 MARC Brunswick
Apr 7114 MARC Brunswick
May 7333 MARC Brunswick
Jun 7497 MARC Brunswick
Jan 3669 MARC Camden
Feb 4110 MARC Camden
Mar 4186 MARC Camden
Apr 4575 MARC Camden
May 4896 MARC Camden
Jun 4684 MARC Camden
Jan 20978 MARC Penn
Feb 21515 MARC Penn
Mar 21659 MARC Penn
Apr 23475 MARC Penn
May 23508 MARC Penn
Jun 24267 MARC Penn
Jan 994 CB Baltimore
Feb 1181 CB Baltimore
Mar 1174 CB Baltimore
Apr 1114 CB Baltimore
May 1139 CB Baltimore
Jun 1110 CB Baltimore
Jan 10353 CB Washington
Feb 14049 CB Washington
Mar 13725 CB Washington
Apr 13422 CB Washington
May 13567 CB Washington
Jun 13450 CB Washington
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<title>2017 Average Commuter Ridership in Maryland</title>
<style>
body {
margin: 0px;
}
.domain {
display: none;
}
.tick line {
stroke: #C0C0BB;
}
.tick text, .legendCells text {
fill: #8E8883;
font-size: 12pt;
font-family: sans-serif;
}
.axis-label, .legend-label {
fill: #635F5D;
font-size: 15pt;
font-family: sans-serif;
}
#chart {
position: fixed;
left:0px;
right:0px;
top:0px;
bottom:0px;
}
</style>
</head>
<body>
<svg width="960" height="500"></svg>
<div id = "chart"></div>
<script>
const xValue = d => d.Month;
const xLabel = 'Month';
const yValue = d => d.Avg_Riders;
const yLabel = 'Average Ridership';
const colorValue = d => d.Type;
const colorLabel = 'Type';
const margin = { left: 100, right: 250, top: 20, bottom: 120 };
const row = d => {
d.Month = d['Month']
d.Avg_Riders = +d.Avg_Riders
return d;
};
var chartDiv = document.getElementById("chart")
var svg = d3.select(chartDiv).append("svg");
const xScale = d3.scalePoint();
const yScale = d3.scaleLinear();
const colorScale = d3.scaleOrdinal()
.range(d3.schemeCategory10);
const colorLegend = d3.legendColor()
.scale(colorScale)
.shape('circle');
const g = svg.append('g');
const datag = g.append('g');
const xAxisG = g.append('g');
const xText = xAxisG.append('text')
.attr('class','axis-label')
const yAxisG = g.append('g');
const yText = yAxisG.append('text')
.attr('class','axis-label')
const colorLegendG = g.append('g')
function redraw() {
var width = chartDiv.clientWidth;
var height = chartDiv.clientHeight;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
svg
.attr("width",width)
.attr("height",height);
g.attr('transform', `translate(${margin.left},${margin.top})`);
xAxisG
.attr('transform', `translate(0, ${innerHeight})`);
xText
.attr('x', innerWidth/2)
.attr('y',70)
.text(xLabel);
yText
.attr('x',-innerHeight/2)
.attr('y',-75)
.attr('transform',`rotate(-90)`)
.style('text-anchor','middle')
.text(yLabel)
colorLegendG.attr('transform', `translate(${innerWidth + 60}, 150)`);
const xAxis = d3.axisBottom()
.scale(xScale)
.tickPadding(15)
.tickSize(-innerHeight);
const yTicks = 5;
const yAxis = d3.axisLeft()
.scale(yScale)
.ticks(yTicks)
.tickPadding(15)
.tickSize(-innerWidth);
d3.csv('commuter_data.csv', row, data => {
xScale
.domain(data.map(xValue))
.range([0, innerWidth]);
yScale
.domain(d3.extent(data, yValue))
.range([innerHeight, 0])
.nice(yTicks);
var circles = datag.selectAll('circle').data(data)
circles
.enter()
.append('circle')
.attr('fill-opacity', 0.6)
.merge(circles)
.attr('cx', d => xScale(xValue(d)))
.attr('cy', d => yScale(yValue(d)))
.attr('fill', d => colorScale(colorValue(d)))
.attr('r', 8);
xAxisG.call(xAxis);
yAxisG.call(yAxis);
colorLegendG.call(colorLegend)
.selectAll('.cell text')
.attr('dy', '0.1em');
});
}
redraw();
window.addEventListener("resize",redraw);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment