DC.js - Choropleth Chart Labels
HTML
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.7/crossfilter.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/dc/1.7.1/dc.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
<div id="us-chart">
</div>
</div>
JavaScript
var chartExample = {
initChart: function (statesJson, csv, labels) {
var numberFormat = d3.format(".2f");
var usChart = dc.geoChoroplethChart("#us-chart");
var xf = crossfilter(csv);
var states = xf.dimension(function (d) {
return d["State"];
});
var stateRaisedSum = states.group().reduceSum(function (d) {
return d["Raised"];
});
usChart.width(990)
.height(500)
.dimension(states)
.group(stateRaisedSum)
.colors(d3.scale.quantize().range(
["#E2F2FF", "#C4E4FF", "#9ED2FF", "#81C5FF", "#6BBAFF", "#51AEFF", "#36A2FF", "#1E96FF", "#0089FF", "#0061B5"]))
.colorDomain([0, 200])
.colorCalculator(function (d) { return d ? usChart.colors()(d) : '#ccc'; })
.overlayGeoJson(statesJson.features, "state", function (d) {
return d.properties.name;
});
dc.renderAll();
var labelG = d3.select("svg")
.append("svg:g")
.attr("id", "labelG")
.attr("class", "Title");
var project = d3.geo.albersUsa();
labelG.selectAll("text")
.data(labels.features)
.enter().append("svg:text")
.text(function(d){return d.properties.name;})
.attr("x", function(d){return project(d.geometry.coordinates)[0];})
.attr("y", function(d){return project(d.geometry.coordinates)[1];})
.attr("dx", "-1em");
},
initData: function () {
var states =...