Skip to content

Instantly share code, notes, and snippets.

@mtandre

mtandre/.block

Last active October 23, 2017 14:36
Show Gist options
  • Save mtandre/016b5c0dc8783ae002f5a506028f767e to your computer and use it in GitHub Desktop.
Save mtandre/016b5c0dc8783ae002f5a506028f767e to your computer and use it in GitHub Desktop.
Download ZIP
City Population Rank 1790-2010
Raw
.block
height: 400
Raw
census-city-rank.csv
city 1790 1800 1810 1820 1830 1840 1850 1860 1870 1880 1890 1900 1910 1920 1930 1940 1950 1960 1970 1980 1990 2000 2010
Philadelphia, PA 2 2 2 2 3 4 4 2 2 2 3 3 3 3 3 3 3 4 4 4 5 5 5
New York, NY 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
Baltimore, MD 5 3 3 3 2 2 2 4 6 7 7 6 7 8 8 7 6 6 7 10 12 17 0
Boston, MA 3 4 4 4 4 5 3 5 7 5 6 5 5 7 9 9 10 13 16 20 20 20 0
Washington, DC 0 0 14 9 11 13 18 14 12 14 14 15 16 14 14 11 9 9 9 15 19 0 0
New Orleans, LA 0 0 7 5 5 3 5 6 9 10 12 12 15 17 16 15 16 15 19 0 0 0 0
Detroit, MI 0 0 0 0 0 0 0 19 18 18 15 13 9 4 4 4 5 5 5 6 7 10 18
Chicago, IL 0 0 0 0 0 0 0 9 5 4 2 2 2 2 2 2 2 2 2 2 3 3 3
San Francisco, CA 0 0 0 0 0 0 0 15 10 9 8 9 11 12 11 12 11 12 13 13 14 13 13
Milwaukee, WI 0 0 0 0 0 0 0 20 19 19 16 14 12 13 12 13 13 11 12 16 17 19 0
Pittsburgh, PA 0 0 0 0 17 17 13 17 16 12 13 11 8 9 10 10 12 16 0 0 0 0 0
Cincinnati, OH 0 0 0 14 8 6 6 7 8 8 9 10 13 16 17 17 18 0 0 0 0 0 0
St Louis, MO 0 0 0 0 0 0 8 8 4 6 5 4 4 6 7 8 8 10 18 0 0 0 0
Cleveland, OH 0 0 0 0 0 0 0 0 15 11 10 7 6 5 6 6 7 8 10 18 0 0 0
Buffalo, NY 0 0 0 0 0 0 16 10 11 13 11 8 10 11 13 14 15 20 0 0 0 0 0
Los Angeles, CA 0 0 0 0 0 0 0 0 0 0 0 0 17 10 5 5 4 3 3 3 2 2 2
Providence, RI 9 9 11 13 12 14 17 16 0 20 0 20 0 0 0 0 0 0 0 0 0 0 0
Newark, NJ 0 0 0 0 0 0 19 11 13 15 17 16 14 15 18 18 0 0 0 0 0 0 0
Albany, NY 19 17 10 11 9 9 10 13 20 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Houston, TX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 7 6 5 4 4 4
Charleston, SC 4 5 5 6 6 10 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Northern Liberties, PA 6 6 6 7 7 8 11 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Southwark, PA 10 7 8 8 10 12 20 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Brooklyn, NY 0 0 0 0 18 7 7 3 3 3 4 0 0 0 0 0 0 0 0 0 0 0 0
Minneapolis, MN 0 0 0 0 0 0 0 0 0 0 18 19 18 18 15 16 17 0 0 0 0 0 0
Louisville, KY 0 0 0 0 0 16 14 12 14 16 20 18 0 0 0 0 0 0 0 0 0 0 0
Richmond, VA 18 13 12 12 13 20 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
San Antonio, TX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17 15 11 10 9 7
Dallas, TX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 14 8 7 8 8 9
Indianapolis, IN 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 20 0 0 11 12 13 12 12
San Diego, CA 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 18 14 8 6 7 8
Memphis, TN 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17 14 18 18 20
Jersey City, NJ 0 0 0 0 0 0 0 0 17 17 19 17 19 0 0 0 0 0 0 0 0 0 0
Kansas City, MO 0 0 0 0 0 0 0 0 0 0 0 0 20 19 19 19 20 0 0 0 0 0 0
Salem, MA 7 8 9 10 14 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Phoenix, AZ 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 20 9 9 6 6
Seattle, WA 0 0 0 0 0 0 0 0 0 0 0 0 0 20 20 0 19 19 0 0 0 0 0
Norfolk, VA 20 10 13 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Columbus, OH 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 19 16 15 15
Portsmouth, NH 14 15 19 20 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
San Jose, CA 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17 11 11 10
Newport, RI 8 11 15 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Kensington, PA 0 0 0 0 15 15 12 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Spring Garden, PA 0 0 0 0 20 11 9 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Portland, ME 0 0 18 15 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Newburyport, MA 13 12 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Sherburne, MA 15 14 20 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Jacksonville, FL 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 15 14 11
Austin, TX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 16 14
Rochester, NY 0 0 0 0 0 19 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Marblehead, MA 10 19 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Gloucester, MA 12 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Alexandria, DC 0 0 17 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Fort Worth, TX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 16
El Paso, TX 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 19
Schenectady, NY 0 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Troy, NY 0 0 0 0 19 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Charlotte, NC 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 17
Lowell, MA 0 0 0 0 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Middleborough, MA 16 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Savannah, GA 0 0 0 18 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Georgetown, DC 0 0 0 19 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
New London, CT 0 20 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
New Haven, CT 17 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>multi line chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
body {margin: 0;}
svg {cursor: crosshair;}
text { font-family: monospace; font-size: 10px; alignment-baseline: middle; fill: #000; }
.tick text {fill: #000;}
.line { fill: none; stroke-width: 2px; transition: stroke-width .3s ease-in-out }
</style>
</head>
<body>
<svg></svg>
<script type="text/javascript">
var w = 960,
h = 400,
margin = {top: 20, right: 110, bottom: 20, left: 20};
var svg, city, dataset, xScale, yScale, zScale, xAxis, yAxis, line;
var rowConverter = function(d) {
ranks = [];
for (var i = 1790; i <= 2010; i+= 10) {
ranks.push({ 'year': i, 'rank': +d[i] });
}
return { 'ranks': ranks, 'city': d['city'] };
}
d3.csv('census-city-rank.csv', rowConverter, function(dataset) {
xScale = d3.scaleLinear()
.domain([1790, 2010])
.range([margin.left, w - margin.right]);
yScale = d3.scaleLinear()
.domain([20, 1])
.range([h - margin.top, margin.bottom]);
zScale = d3.scaleOrdinal(d3.schemeCategory20)
.domain(dataset.map(function(d) { return d.city; }));
xAxis = d3.axisBottom()
.scale(xScale)
.ticks(dataset.columns.length - 1)
.tickFormat(d3.format('d'));
yAxis = d3.axisLeft()
.scale(yScale)
.ticks(20)
.tickSize(0);
line = d3.line()
.curve(d3.curveMonotoneX)
.defined(function(d) { return d.rank > 0; })
.x(function(d) { return xScale(d.year); })
.y(function(d) { return yScale(d.rank); });
svg = d3.select('svg')
.attr('width', w)
.attr('height', h);
svg.append('clipPath')
.attr('id', 'chart-area')
.append('rect')
.attr('x', margin.left)
.attr('y', margin.top)
.attr('width', w - margin.right)
.attr('height', h - margin.left);
city = svg.selectAll('.city')
.data(dataset)
.enter().append('g')
.attr('class', 'city');
city.append('path')
.attr('class', 'line')
.attr('clip-path', 'url(#chart-area)')
.attr('d', function(d){ return line(d.ranks); })
.style('stroke', function(d){ return zScale(d.city); })
.on('mouseover', handleMouseOver)
.on('mouseout', handleMouseOut)
.append('title')
.text(function(d) { return d['city']; });
city.append('text')
.filter(function(d){ return d['ranks'][22]['rank'] > 0; })
.attr('x', xScale(2010) + 3)
.attr('y', function(d) { return yScale(d['ranks'][22]['rank']); })
.text(function(d) { return d['city']; });
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + (h - margin.bottom) + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',0)')
.call(yAxis);
});
var handleMouseOver = function(d, i) {
d3.selectAll('.city .line')
.style('stroke-width', '1');
d3.select(this)
.style('stroke-width', '4');
d3.selectAll('.city text')
.style('fill', '#ccc');
d3.select(this.parentNode)
.select('text')
.style('fill', '#000');
}
var handleMouseOut = function(d, i) {
d3.selectAll('.city .line')
.style('stroke-width', '2');
d3.selectAll('.city text')
.style('fill', '#000' );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment