dc
Version:
A multi-dimensional charting library built to work natively with crossfilter and rendered using d3.js
249 lines (218 loc) • 9.78 kB
HTML
<html lang="en">
<head>
<title>dc.js - US Venture Capital Landscape 2011</title>
<meta charset="UTF-8">
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/dc.css"/>
</head>
<body>
<div class="container">
<h2>US Venture Capital Landscape 2011</h2>
<p>
This is a <a href="../index.html">dc.js</a> example showing how GeoJson Polygon can be associated with
crossfilter
dimension and group using a choropleth chart. Different regions can be colored differently based on different
calculation (amount raised). Like any other dc.js chart a choropleth chart can then be mixed with other dc.js
chart
or your own custom d3 drawing. In this example we have shown how it can work with multiple bubble chart.
</p>
<p>
Public data source
<a href="http://buzzdata.com/azad2002/the-united-states-of-venture-capital-2011#!/data" target="_blank">BuzzData.com</a>.
</p>
<div id="us-chart">
<strong>VC Distribution by States (color: total amount raised)</strong>
<a class="reset" href="javascript:usChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<span class="reset" style="display: none;"> | Current filter: <span class="filter"></span></span>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div id="industry-chart">
<strong>By Industries</strong> (y: number of deals, x: total amount raised in millions, radius: amount raised)
<a class="reset" href="javascript:industryChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div id="round-chart">
<strong>By Rounds</strong> (y: number of deals, x: total amount raised in millions, radius: amount raised)
<a class="reset" href="javascript:roundChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div>
<a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
</div>
</div>
<a href="https://github.com/dc-js/dc.js"><img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"
alt="Fork me on GitHub"></a>
<script type="text/javascript" src="../js/d3.js"></script>
<script type="text/javascript" src="../js/crossfilter.js"></script>
<script type="text/javascript" src="../js/dc.js"></script>
<script type="text/javascript">
var numberFormat = d3.format(".2f");
var usChart = dc.geoChoroplethChart("#us-chart");
var industryChart = dc.bubbleChart("#industry-chart");
var roundChart = dc.bubbleChart("#round-chart");
d3.csv("vc.csv", function (csv) {
var data = crossfilter(csv);
var states = data.dimension(function (d) {
return d["State"];
});
var stateRaisedSum = states.group().reduceSum(function (d) {
return d["Raised"];
});
var industries = data.dimension(function (d) {
return d["Industry Group"];
});
var statsByIndustries = industries.group().reduce(
function (p, v) {
p.amountRaised += +v["Raised"];
p.deals += +v["Deals"];
return p;
},
function (p, v) {
p.amountRaised -= +v["Raised"];
if (p.amountRaised < 0.001) p.amountRaised = 0; // do some clean up
p.deals -= +v["Deals"];
return p;
},
function () {
return {amountRaised: 0, deals: 0}
}
);
var rounds = data.dimension(function (d) {
return d["RoundClassDescr"];
});
var statsByRounds = rounds.group().reduce(
function (p, v) {
p.amountRaised += +v["Raised"];
p.deals += +v["Deals"];
return p;
},
function (p, v) {
p.amountRaised -= +v["Raised"];
if (p.amountRaised < 0.001) p.amountRaised = 0; // do some clean up
p.deals -= +v["Deals"];
return p;
},
function () {
return {amountRaised: 0, deals: 0}
}
);
d3.json("../geo/us-states.json", function (statesJson) {
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;
})
.valueAccessor(function(kv) {
console.log(kv);
return kv.value;
})
.title(function (d) {
return "State: " + d.key + "\nTotal Amount Raised: " + numberFormat(d.value ? d.value : 0) + "M";
});
industryChart.width(990)
.height(200)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(industries)
.group(statsByIndustries)
.colors(d3.scale.category10())
.keyAccessor(function (p) {
return p.value.amountRaised;
})
.valueAccessor(function (p) {
return p.value.deals;
})
.radiusValueAccessor(function (p) {
return p.value.amountRaised;
})
.x(d3.scale.linear().domain([0, 5000]))
.r(d3.scale.linear().domain([0, 4000]))
.minRadiusWithLabel(15)
.elasticY(true)
.yAxisPadding(100)
.elasticX(true)
.xAxisPadding(200)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key
+ "\n"
+ "Amount Raised: " + numberFormat(p.value.amountRaised) + "M\n"
+ "Number of Deals: " + numberFormat(p.value.deals);
});
industryChart.yAxis().tickFormat(function (s) {
return s + " deals";
});
industryChart.xAxis().tickFormat(function (s) {
return s + "M";
});
roundChart.width(990)
.height(200)
.margins({top: 10, right: 50, bottom: 30, left: 60})
.dimension(rounds)
.group(statsByRounds)
.colors(d3.scale.category10())
.keyAccessor(function (p) {
return p.value.amountRaised;
})
.valueAccessor(function (p) {
return p.value.deals;
})
.radiusValueAccessor(function (p) {
return p.value.amountRaised;
})
.x(d3.scale.linear().domain([0, 5000]))
.r(d3.scale.linear().domain([0, 9000]))
.minRadiusWithLabel(15)
.elasticY(true)
.yAxisPadding(150)
.elasticX(true)
.xAxisPadding(300)
.maxBubbleRelativeSize(0.07)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.renderLabel(true)
.renderTitle(true)
.title(function (p) {
return p.key
+ "\n"
+ "Amount Raised: " + numberFormat(p.value.amountRaised) + "M\n"
+ "Number of Deals: " + numberFormat(p.value.deals);
});
roundChart.yAxis().tickFormat(function (s) {
return s + " deals";
});
roundChart.xAxis().tickFormat(function (s) {
return s + "M";
});
dc.renderAll();
});
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33628816-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>