Skip to content

Instantly share code, notes, and snippets.

@kent37

kent37/Development_Log_Summary2.json

Last active August 29, 2015 14:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kent37/9d4b091e9a129133e221 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kent37/9d4b091e9a129133e221 to your computer and use it in GitHub Desktop.
Download ZIP
Cambridge Development by Year and Neighborhood
Raw
Development_Log_Summary2.json
[
{
"Neighborhood": ["Agassiz"],
"data": [
{
"Year": 1999,
"Units": 0
},
{
"Year": 2000,
"Units": 0
},
{
"Year": 2005,
"Units": 0
},
{
"Year": 2007,
"Units": 0
},
{
"Year": 2008,
"Units": 0
},
{
"Year": 2010,
"Units": 0
},
{
"Year": 2011,
"Units": 0
},
{
"Year": 2015,
"Units": 0
}
]
},
{
"Neighborhood": ["Area IV"],
"data": [
{
"Year": 1999,
"Units": 0
},
{
"Year": 2000,
"Units": 8
},
{
"Year": 2001,
"Units": 0
},
{
"Year": 2002,
"Units": 20
},
{
"Year": 2003,
"Units": 42
},
{
"Year": 2004,
"Units": 0
},
{
"Year": 2005,
"Units": 13
},
{
"Year": 2007,
"Units": 13
},
{
"Year": 2008,
"Units": 20
},
{
"Year": 2009,
"Units": 38
},
{
"Year": 2010,
"Units": 9
},
{
"Year": 2011,
"Units": 11
},
{
"Year": 2014,
"Units": 0
},
{
"Year": 2015,
"Units": 97
}
]
},
{
"Neighborhood": ["Cambridge Highlands"],
"data": [
{
"Year": 1999,
"Units": 0
},
{
"Year": 2004,
"Units": 71
},
{
"Year": 2006,
"Units": 25
},
{
"Year": 2008,
"Units": 72
},
{
"Year": 2009,
"Units": 0
},
{
"Year": 2013,
"Units": 90
},
{
"Year": 2014,
"Units": 429
},
{
"Year": 2015,
"Units": 61
}
]
},
{
"Neighborhood": ["Cambridgeport"],
"data": [
{
"Year": 1997,
"Units": 0
},
{
"Year": 1998,
"Units": 0
},
{
"Year": 1999,
"Units": 301
},
{
"Year": 2000,
"Units": 80
},
{
"Year": 2001,
"Units": 697
},
{
"Year": 2002,
"Units": 135
},
{
"Year": 2003,
"Units": 120
},
{
"Year": 2004,
"Units": 0
},
{
"Year": 2005,
"Units": 271
},
{
"Year": 2008,
"Units": 72
},
{
"Year": 2009,
"Units": 17
},
{
"Year": 2010,
"Units": 31
},
{
"Year": 2012,
"Units": 40
},
{
"Year": 2013,
"Units": 32
},
{
"Year": 2015,
"Units": 96
}
]
},
{
"Neighborhood": ["East Cambridge"],
"data": [
{
"Year": 1997,
"Units": 111
},
{
"Year": 1998,
"Units": 635
},
{
"Year": 1999,
"Units": 0
},
{
"Year": 2000,
"Units": 8
},
{
"Year": 2001,
"Units": 4
},
{
"Year": 2002,
"Units": 0
},
{
"Year": 2003,
"Units": 0
},
{
"Year": 2004,
"Units": 37
},
{
"Year": 2005,
"Units": 0
},
{
"Year": 2006,
"Units": 435
},
{
"Year": 2007,
"Units": 29
},
{
"Year": 2008,
"Units": 1129
},
{
"Year": 2009,
"Units": 190
},
{
"Year": 2010,
"Units": 0
},
{
"Year": 2011,
"Units": 8
},
{
"Year": 2013,
"Units": 144
},
{
"Year": 2015,
"Units": 3411
}
]
},
{
"Neighborhood": ["Mid-Cambridge"],
"data": [
{
"Year": 1999,
"Units": 22
},
{
"Year": 2000,
"Units": 20
},
{
"Year": 2001,
"Units": 10
},
{
"Year": 2002,
"Units": 10
},
{
"Year": 2005,
"Units": 0
},
{
"Year": 2008,
"Units": 8
},
{
"Year": 2010,
"Units": 0
},
{
"Year": 2011,
"Units": 45
},
{
"Year": 2012,
"Units": 20
},
{
"Year": 2014,
"Units": 0
},
{
"Year": 2015,
"Units": 40
}
]
},
{
"Neighborhood": ["MIT / Area 2"],
"data": [
{
"Year": 1999,
"Units": 0
},
{
"Year": 2000,
"Units": 0
},
{
"Year": 2001,
"Units": 0
},
{
"Year": 2002,
"Units": 0
},
{
"Year": 2004,
"Units": 0
},
{
"Year": 2005,
"Units": 0
},
{
"Year": 2006,
"Units": 0
},
{
"Year": 2008,
"Units": 0
},
{
"Year": 2009,
"Units": 0
},
{
"Year": 2010,
"Units": 0
},
{
"Year": 2011,
"Units": 0
},
{
"Year": 2013,
"Units": 0
},
{
"Year": 2015,
"Units": 280
}
]
},
{
"Neighborhood": ["Neighborhood 10"],
"data": [
{
"Year": 1999,
"Units": 8
},
{
"Year": 2000,
"Units": 0
},
{
"Year": 2001,
"Units": 0
},
{
"Year": 2005,
"Units": 55
},
{
"Year": 2008,
"Units": 0
},
{
"Year": 2009,
"Units": 0
},
{
"Year": 2014,
"Units": 0
},
{
"Year": 2015,
"Units": 0
}
]
},
{
"Neighborhood": ["Neighborhood 9"],
"data": [
{
"Year": 1998,
"Units": 99
},
{
"Year": 1999,
"Units": 0
},
{
"Year": 2005,
"Units": 6
},
{
"Year": 2007,
"Units": 43
},
{
"Year": 2008,
"Units": 14
},
{
"Year": 2010,
"Units": 54
},
{
"Year": 2012,
"Units": 20
},
{
"Year": 2013,
"Units": 38
},
{
"Year": 2015,
"Units": 166
}
]
},
{
"Neighborhood": ["North Cambridge"],
"data": [
{
"Year": 1998,
"Units": 317
},
{
"Year": 1999,
"Units": 18
},
{
"Year": 2000,
"Units": 12
},
{
"Year": 2001,
"Units": 32
},
{
"Year": 2002,
"Units": 324
},
{
"Year": 2003,
"Units": 10
},
{
"Year": 2005,
"Units": 0
},
{
"Year": 2006,
"Units": 164
},
{
"Year": 2007,
"Units": 82
},
{
"Year": 2008,
"Units": 15
},
{
"Year": 2010,
"Units": 8
},
{
"Year": 2011,
"Units": 0
},
{
"Year": 2012,
"Units": 56
},
{
"Year": 2013,
"Units": 139
},
{
"Year": 2014,
"Units": 268
},
{
"Year": 2015,
"Units": 1257
}
]
},
{
"Neighborhood": ["Riverside"],
"data": [
{
"Year": 1999,
"Units": 76
},
{
"Year": 2001,
"Units": 20
},
{
"Year": 2004,
"Units": 18
},
{
"Year": 2007,
"Units": 33
},
{
"Year": 2008,
"Units": 0
},
{
"Year": 2013,
"Units": 0
},
{
"Year": 2015,
"Units": 0
}
]
},
{
"Neighborhood": ["Strawberry Hill"],
"data": [
{
"Year": 2009,
"Units": 0
}
]
},
{
"Neighborhood": ["Wellington Harrington"],
"data": [
{
"Year": 1998,
"Units": 14
},
{
"Year": 2001,
"Units": 0
},
{
"Year": 2002,
"Units": 30
},
{
"Year": 2006,
"Units": 0
},
{
"Year": 2011,
"Units": 19
},
{
"Year": 2012,
"Units": 19
}
]
}
]
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cambridge Yearly Development by Neighborhood</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
path:hover {
stroke: orange;
stroke-width: 4;
}
</style>
</head>
<body>
<h1>Cambridge Yearly Development by Neighborhood</h1>
<p>Number of residential units built in Cambridge since 1977, by neighborhood. 2015 numbers include all projected
future units.</p>
<p>Sources: <a href="https://data.cambridgema.gov/Planning/Development-Log-Current-Edition/wjwg-93qh">Current</a>
and <a href="https://data.cambridgema.gov/Planning/Development-Log-Historical-Projects/a5ud-8kjv">historical</a> data
from <a href="http://data.cambridgema.gov">Cambridge Open Data Portal</a>.
<script type="text/javascript">
//Dimensions and padding
var w = 800;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up scales
var xScale = d3.scale.linear()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Configure axis generators
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(d3.format());
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(d.Year);
})
.y(function(d) {
return yScale(d.Units);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var years = ["1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", '2011', '2012', '2013', '2014', '2015'];
//Load data
d3.json("Development_Log_Summary2.json", function(data) {
//Uncomment to log the original data to the console
console.log(data);
//Set scale domains
xScale.domain([
d3.min(years, function(d) {
return +d;
}),
d3.max(years, function(d) {
return +d;
})
]);
yScale.domain([ 1500,
//d3.max(data,
// function(d) {
// return d3.max(d.data, function(dd) {
// return +dd.Units;
// });
// }),
0
]);
//Make a group for each neighborhood
var groups = svg.selectAll("g")
.data(data)
.enter()
.append("g")
.attr('class', 'lineg');
//Append a title with the name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.Neighborhood[0];
});
//Within each group, create a new line/path,
//binding just the units data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.data ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 3);
// Set up a mouseover to sort the groups and show/hide the E Cambridge callout
groups.on("mouseover", function(selected) {
d3.selectAll('.lineg').sort(function(a, b) {
if (a.Neighborhood[0] === selected.Neighborhood[0]) {
return 1;
} else {
if (b.Neighborhood[0] === selected.Neighborhood[0]) {
return -1;
} else {
return 0;
}
}
});
d3.select('.callout')
.attr('visibility', selected.Neighborhood[0]=='East Cambridge' ?
'visible' : 'hidden');
});
groups.on('mouseout', function() {d3.select('.callout').attr('visibility', 'hidden')});
// Add a text callout for East Cambridge 2015
svg.append('text')
.attr({
x: xScale(2013.5),
y: yScale(1500),
'text-anchor': 'end',
fill: 'orange',
transform: "rotate(-86.5 "+ xScale(2013.5)+ ","+ yScale(1500)+ ")",
visibility: 'hidden',
'class': 'callout'
})
.text('East Cambridge 2015 - 3411 units -->');
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
});
//End data load function
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment