index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link type="text/css" href="style.css" rel="stylesheet" media="all" />
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.4/queue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
function geoStatJoinChart(options, d3, topojson, _, queue) {
var width = options.width;
var height = options.height;
var latLong = options.latLong;
var scale = options.scale;
var geoDataUrl = options.geoDataUrl;
var statDataUrl = options.statDataUrl;
var lng = latLong[0];
var lat = latLong[1];
var colorScale = d3.scale.threshold()
.domain([0.0039062, 0.0078125, 0.015625, 0.03125, 0.0625, 0.125, 0.25, 0.5, 1.0])
.range(["transparent", "#E0F3DB", "#CCEBC5", "#A8DDB5", "#7BCCC4", "#4EB3D3", "#2B8CBE" , "#0868AC", "#084081"]);
function capitalize(s){
return s.toLowerCase().replace( /\b./g, function(a){ return a.toUpperCase(); } );
};
function longName(s) {
return capitalize(s.replace("-"," ")) + ",CA,US";
};
var projection = d3.geo.albers()
.translate([(width / 2), (height / 2)])
.scale(scale)
.rotate([-lng,0])
.center([0,lat]);
var path = d3.geo.path()
.projection(projection);
var dsv = d3.dsv("|", "text/plain");
queue()
.defer(d3.json, geoDataUrl)
.defer(dsv, statDataUrl)
.await(ready);
function ready(error, geoData, statData) {
var domElement = document.querySelector("body");
var regions = document.querySelectorAll("#cities .region");
_.each(regions, function(region) {
var name = longName(region.id);
createChartWithCity({
highlightedCity: name,
domElement: region,
geoData: geoData,
statData: statData
});
});
}
function createChartWithCity(options) {
var highlightedCity = options.highlightedCity;
var domElement = options.domElement;
var geoData = options.geoData;
var statData = options.statData;
var svg = d3.select(domElement).append("svg")
.attr("width", width)
.attr("height", height);
var observedInHighlightedCity = _.filter(statData, function(d) {
return d.end_city == highlightedCity;
});
function fillColor(d) {
var ln = longName(d.id);
var cityData = _.find(observedInHighlightedCity, function(d) { return d.start_city == ln } );
var color;
if (cityData && cityData.prct) {
color = colorScale(cityData.prct);
}
else {
color = "transparent";
}
return color;
}
svg.append("path")
.datum(topojson.mesh(geoData, geoData.objects.state_border))
.attr("class", "state-boundary")
.attr("d", path);
svg.selectAll(".cities-fill")
.data(topojson.feature(geoData, geoData.objects.cities).features)
.enter().append("path")
.attr("class", function(d) {
if (d.id == highlightedCity.split(",")[0]) {
return "cities-fill highlighted"
}
else {
return "cities-fill";
}
})
.attr("fill", fillColor)
.attr("d", path);
svg.append("text")
.attr("class","observed-label")
.text(highlightedCity.split(",")[0])
.attr("dx",15)
.attr("dy",25)
}
var keySvg = d3.select("#key").append("svg")
.attr("class", "key")
.attr("width", 1800)
.attr("height", 80);
var x = d3.scale.linear()
.domain([0, 1])
.range([0, 1210]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickSize(13)
.tickValues(colorScale.domain())
.tickFormat(function(d) { return d >= 0.02 ? parseInt(d*100) : null; });
keySvg.selectAll("rect")
.data(colorScale.range().map(function(d, i) {
return {
x0: i ? x(colorScale.domain()[i - 1]) : x.range()[0],
x1: i < colorScale.domain().length ? x(colorScale.domain()[i]) : x.range()[1],
z: d
};
}))
.enter().append("rect")
.attr("height", 8)
.attr("x", function(d) { return d.x0; })
.attr("width", function(d) { return d.x1 - d.x0; })
.style("fill", function(d) { return d.z; });
keySvg.call(xAxis);
keySvg.append("text")
.attr("class","title")
.attr("dy", "60")
.attr("dx", "0")
.text("Percentage of People who say they are in a Stated Region who were seen in the Observed Region.")
}
</script>
</head>
<body>
<div class="page">
<ul id="cities">
<li id="santa-monica" class="region"></li>
<li id="los-angeles" class="region"></li>
<div id="key"></div>
</ul>
</div>
<script>
geoStatJoinChart({
width: 300,
height: 300,
latLong: [-118.2428,34.00],
scale: 18000,
geoDataUrl: "./los-angeles-cities.json",
statDataUrl: "./los-angeles-stats.csv"
}, d3, topojson, _, queue);
</script>
</body>
</html>