D3 and DC experiment #2

See external resources & run it.

by b_long

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://square.github.io/crossfilter/crossfilter.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.0/dc.css">
<link rel="stylesheet" href="https://dc-js.github.io/dc.js/css/bootstrap.min.css">
<script src="https://dc-js.github.io/dc.js/vc/vc.csv"></script>
<div class="container">
    <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>
        <a href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
    </div>

</div>

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) {
...