Friday, November 25, 2016

Reading in Data with D3 - CSV, JSON, TSV and Custom

The following code, creates the same pie chart from four different file types; JSON, TSV, CSV and custom.


Source Code

<!DOCTYPE html>
<head>
    <title>Parsing files with D3 | Gliesians</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
</head>
<body>
    <h2>JSON Parse</h2>
    <div id="json-read"></div>
    <script type="text/javascript">
        var svg1 = dimple.newSvg("#json-read", 800, 600);
        d3.json("/data/mdlp-k23b-a819872.json", function (data) {
            var myChart1 = new dimple.chart(svg1, data);
            myChart1.setBounds(20, 20, 460, 360);
            myChart1.addMeasureAxis("p", "Percent");
            myChart1.addSeries("Population", dimple.plot.pie);
            myChart1.addLegend(500, 20, 90, 300, "left");
            myChart1.draw();
        });
    </script> 

    <h2>TSV Parse</h2>

    <div id="tsv-read"></div>
    <script type="text/javascript">
        var svg2 = dimple.newSvg("#tsv-read", 800, 600);
        d3.tsv("/data/mdlp-k23b-a819872.tsv", function (data) {
            var myChart2 = new dimple.chart(svg2, data);
            myChart2.setBounds(20, 20, 460, 360);
            myChart2.addMeasureAxis("p", "Percent");
            myChart2.addSeries("Population", dimple.plot.pie);
            myChart2.addLegend(500, 20, 90, 300, "left");
            myChart2.draw();
        });
    </script>

    <h2>CSV Parse</h2>

    <div id="csv-read"></div>
    <script type="text/javascript">
        var svg3 = dimple.newSvg("#csv-read", 800, 600);
        d3.csv("/data/mdlp-k23b-a819872.csv", function (data) {
            var myChart3 = new dimple.chart(svg3, data);
            myChart3.setBounds(20, 20, 460, 360);
            myChart3.addMeasureAxis("p", "Percent");
            myChart3.addSeries("Population", dimple.plot.pie);
            myChart3.addLegend(500, 20, 90, 300, "left");
            myChart3.draw();
        });
    </script>

    <h2>Custom Delimeter Parse</h2>

    <div id="pipe-read"></div>
    <script type="text/javascript">
        var svg4 = dimple.newSvg("#pipe-read", 800, 600);
        var psv = d3.dsv("|", "text/plain");
        psv("/data/mdlp-k23b-a819872.txt", function (data) {
            var myChart4 = new dimple.chart(svg4, data);
            myChart4.setBounds(20, 20, 460, 360);
            myChart4.addMeasureAxis("p", "Percent");
            myChart4.addSeries("Population", dimple.plot.pie);
            myChart4.addLegend(500, 20, 90, 300, "left");
            myChart4.draw();
        });
    </script>
</body>

Data Files

CSV File (mdlp-k23b-a819872.csv)

Population,Percent
Ancestral_Altaic,1.42
South_Central_Asian,9.59
Caucasian,29.11
European_Early_Farmers,29.72
Near_East,5.76
North_African,4.80
Paleo_Siberian,.23
European_Hunters_Gatherer,18.58

TSV File (mdlp-k23b-a819872.tsv)

Population    Percent
Ancestral_Altaic    1.42
South_Central_Asian    9.59
Caucasian    29.11
European_Early_Farmers    29.72
Near_East    5.76
North_African    4.80
Paleo_Siberian    .23
European_Hunters_Gatherer    18.58

TXT File (mdlp-k23b-a819872.txt)

Population|Percent
Ancestral_Altaic|1.42
South_Central_Asian|9.59
Caucasian|29.11
European_Early_Farmers|29.72
Near_East|5.76
North_African|4.80
Paleo_Siberian|.23
European_Hunters_Gatherer|18.58

JSON File (mdlp-k23b-a819872.json)

[
    {
        "Population": "Ancestral_Altaic",
        "Percent": "1.42"
    },
    {
        "Population": "South_Central_Asian",
        "Percent": "9.59"
    },
    {
        "Population": "Caucasian",
        "Percent": "29.11"
    },
    {
        "Population": "European_Early_Farmers",
        "Percent": "29.72"
    },
    {
        "Population": "Near_East",
        "Percent": "5.76"
    },
    {
        "Population": "North_African",
        "Percent": "4.80"
    },
    {
        "Population": "Paleo_Siberian",
        "Percent": ".23"
    },
    {
        "Population": "European_Hunters_Gatherer",
        "Percent": "18.58"
    }
]

No comments:

Post a Comment

Landing Spicoli in the Wind

Many know by now that I have three Blade 200 S RC helicopters in my fleet: Speck - for training Spot - for maintenance exercises Spicol...