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

The source code for gliesians.com is for sale on Ebay.

I've decided to shut down gliesians.com and sell the source code. If anyone is looking to purchase the related source, you can find it...