Skip to content

Instantly share code, notes, and snippets.

@ericd9799

ericd9799/.block

Last active April 12, 2018 00:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ericd9799/d93cdded30aa9eadae838171fcff945d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ericd9799/d93cdded30aa9eadae838171fcff945d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ericd9799 revised this gist Apr 12, 2018. 1 changed file with 17 additions and 3 deletions.
    20 changes: 17 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -20,10 +20,25 @@
    stroke: steelblue;
    stroke-width: 1.5px;
    }

    .selectCountry {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    }

    p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    }

    </style>
    <body>
    <div>
    <p>
    Clean water and sanitation is key to human survival. Without these readily available, the chance for diseases increases. Most importantly, children are more susceptible to water-borne diseases since their immune system is developing. The number one water-borne disease is diarrhoeal diseases. In the graph below, we explore how access to basic drinking water and sanitation effects the proportion of children under 5 years dying because of diarrhoeal diseases in rural areas of South American countries.
    </p>
    </div>
    <div class="selectCountry">
    Select a country:
    <select id="countrySelection" onchange="updateCountry()">
    <option value="bolivia">Bolivia</option>
    @@ -39,7 +54,6 @@
    <option value="venezuela">Venezuela</option>
    </select>
    </div>

    <!-- load the d3.js library -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    @@ -181,9 +195,9 @@

    svg.append("g").attr("class", "source").append("text")
    .attr("x", margin.left-70)
    .attr("y", margin.bottom+465)
    .attr("y", margin.bottom+460)
    .attr("text-anchor", "start")
    .style("font", "15px sans-serif")
    .style("font", "13px sans-serif")
    .style("fill", "#808080")
    .text("Source: World Health Organization")

  2. ericd9799 revised this gist Apr 11, 2018. 1 changed file with 16 additions and 7 deletions.
    23 changes: 16 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,7 +24,7 @@
    </style>
    <body>
    <div>
    Select a country:
    Select a country:
    <select id="countrySelection" onchange="updateCountry()">
    <option value="bolivia">Bolivia</option>
    <option value="brazil">Brazil</option>
    @@ -39,6 +39,7 @@
    <option value="venezuela">Venezuela</option>
    </select>
    </div>

    <!-- load the d3.js library -->
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    @@ -53,7 +54,7 @@

    var svg = d3.select("body").append("svg")
    .attr("width", 960)
    .attr("height", 500)
    .attr("height", 600)
    .append("g")
    .attr("transform", "translate(" + margin.left +", "+margin.top+")");

    @@ -171,13 +172,21 @@
    .attr("fill", "#000000")
    .text("Percentage of Population(%)");

    svg.append("text")
    svg.append("g").attr("class", "title").append("text")
    .attr("x", width/2)
    .attr("y", 5 - margin.top/2)
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .style("font", "16px sans-serif")
    .text("Access to Basic Drinking Water / Sanitation in Rural Areas vs. Mortality caused by Diarrhoeal Diseases for Children < 5 Years")

    svg.append("g").attr("class", "source").append("text")
    .attr("x", margin.left-70)
    .attr("y", margin.bottom+465)
    .attr("text-anchor", "start")
    .style("font", "15px sans-serif")
    .style("fill", "#808080")
    .text("Source: World Health Organization")

    var category = svg.selectAll(".category")
    .data(categories)
    .enter().append("g")
    @@ -192,9 +201,9 @@
    .attr("class", "label")
    .datum(function(d){return {id: d.id, value: d.values[d.values.length - 1]};})
    .attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";})
    //.attr("x", 5)
    //.attr("dy", "0.75em")
    .style("font", "10px sans-serif")
    .attr("x", 5)
    .attr("dy", "0.75em")
    .style("font", "13px sans-serif")
    .text(function(d){return d.id;});

    var focus = svg.append("g")
  3. ericd9799 revised this gist Apr 10, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -176,7 +176,7 @@
    .attr("y", 5 - margin.top/2)
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .text("Correlation of Access to Basic Drinking Water and Sanitation to Mortality caused by Diarrhoeal Diseases")
    .text("Access to Basic Drinking Water / Sanitation in Rural Areas vs. Mortality caused by Diarrhoeal Diseases for Children < 5 Years")

    var category = svg.selectAll(".category")
    .data(categories)
  4. ericd9799 revised this gist Apr 9, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -24,6 +24,7 @@
    </style>
    <body>
    <div>
    Select a country:
    <select id="countrySelection" onchange="updateCountry()">
    <option value="bolivia">Bolivia</option>
    <option value="brazil">Brazil</option>
  5. ericd9799 revised this gist Apr 9, 2018. 1 changed file with 10 additions and 4 deletions.
    14 changes: 10 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -301,13 +301,19 @@
    svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);

    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);
    console.log(data[0].drinking);
    for (var i = 0; i < 3; i++){
    svg.select(".focus"+i).attr("transform", "translate(0,"+y(data[0].drinking)+")").transition().duration(750);
    }
    console.log(x(data[1].date)+","+y(data[1].drinking));
    svg.select(".focus"+1).attr("transform", "translate("+x(data[1].date)+","+y(data[1].drinking)+")").transition().duration(750);


    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);

    var series = [
    {date: data[1].date, value: data[1].drinking},
    {date: data[1].date, value: data[1].sanitation},
    {date: data[1].date, value: data[1].diarrhoea}
    ];

    console.log(series);

    });
    }
  6. ericd9799 revised this gist Apr 9, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -301,9 +301,9 @@
    svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);

    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);

    console.log(data[0].drinking);
    for (var i = 0; i < 3; i++){
    svg.select(".focus"+i).attr("transform", "translate("+x(d.value.date)+","+y(d.value.rates)+")").transition().duration(750);
    svg.select(".focus"+i).attr("transform", "translate(0,"+y(data[0].drinking)+")").transition().duration(750);
    }

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);
  7. ericd9799 revised this gist Apr 9, 2018. 1 changed file with 6 additions and 1 deletion.
    7 changes: 6 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -211,11 +211,12 @@
    for(var i=0; i < 3; i++){
    focus.append("g")
    .attr("class", "focus"+i)
    .attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
    .append("circle")
    .attr("class", "highlight")
    .style("stroke", "red")
    .style("fill", "red")
    //.attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")

    .attr("r", 2);

    svg.select(".focus"+i)
    @@ -301,6 +302,10 @@

    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);

    for (var i = 0; i < 3; i++){
    svg.select(".focus"+i).attr("transform", "translate("+x(d.value.date)+","+y(d.value.rates)+")").transition().duration(750);
    }

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);


  8. ericd9799 revised this gist Apr 9, 2018. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -199,16 +199,16 @@
    var focus = svg.append("g")
    .attr("class", "focus")
    .style("display", "none");

    /*focus.append("line")
    /*
    focus.append("line")
    .attr("class", "y")
    .attr("stroke", "black")
    //.attr("stroke-dasharray", "3,3")
    .attr("stroke-dasharray", "3,3")
    .style("opacity", 0.5)
    .attr("y1", 0)
    .attr("y2", height);*/

    for(var i=0; i < data.length; i++){
    for(var i=0; i < 3; i++){
    focus.append("g")
    .attr("class", "focus"+i)
    .append("circle")
  9. ericd9799 revised this gist Apr 9, 2018. No changes.
  10. ericd9799 revised this gist Apr 9, 2018. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -301,7 +301,9 @@

    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);
    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);


    });
    }

  11. ericd9799 revised this gist Apr 9, 2018. No changes.
  12. ericd9799 revised this gist Apr 8, 2018. No changes.
  13. ericd9799 revised this gist Apr 8, 2018. 2 changed files with 6 additions and 6 deletions.
    1 change: 0 additions & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,5 +5,4 @@
    - [d3-time-format](https://github.com/d3/d3-time-format)
    - [Update on button press](http://bl.ocks.org/d3noob/7030f35b72de721622b8)
    - [Mike Bostock's Multi-Series Line Chart](https://bl.ocks.org/mbostock/3884955)
    - [Update on button press 2](https://bl.ocks.org/oikonang/c645e2aa3a4fe313269afc1c39c8a05d)
    - [Multi-series line chart by Ben Collins](https://bl.ocks.org/benlcollins/2d7fb36cd0c295c00882)
    11 changes: 6 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -240,15 +240,15 @@
    .on("mouseover", function() { focus.style("display", null); })
    .on("mouseout", function() { focus.style("display", "none"); })
    .on("mousemove", mousemove);

    //console.log(data);
    function mousemove() {

    var x0 = x.invert(d3.mouse(this)[0]);
    var i = bisectDate(data, x0, 1),
    d0 = data[i - 1],
    d1 = data[i],
    d = x0 - d0.date > d1.date - x0 ? d1 : d0;

    console.log(data[0]+", "+data[0].drinking)
    //console.log(i);

    //focus.attr("transform", "translate(" + x(d.date) + "," + y(d.drinking) + ")");
    //focus.select("text").text(d.drinking);
    @@ -258,12 +258,13 @@
    {date: data[i].date, value: data[i].sanitation},
    {date: data[i].date, value: data[i].diarrhoea}
    ];

    for(var i=0; i < series.length; i++){
    var selectedFocus = svg.selectAll(".focus"+i);
    selectedFocus.attr("transform", "translate("+x(series[i].date)+","+y(series[i].value)+")");
    selectedFocus.select("text").text(series[i].value);
    }

    }

    });
    @@ -282,7 +283,7 @@
    })
    }
    });

    //console.log(data);
    x.domain(d3.extent(data, function(d){return d.date;}));

    y.domain([
  14. ericd9799 revised this gist Apr 8, 2018. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -247,6 +247,8 @@
    d0 = data[i - 1],
    d1 = data[i],
    d = x0 - d0.date > d1.date - x0 ? d1 : d0;

    console.log(data[0]+", "+data[0].drinking)

    //focus.attr("transform", "translate(" + x(d.date) + "," + y(d.drinking) + ")");
    //focus.select("text").text(d.drinking);
  15. ericd9799 revised this gist Apr 8, 2018. No changes.
  16. ericd9799 revised this gist Apr 8, 2018. No changes.
  17. ericd9799 revised this gist Apr 8, 2018. No changes.
  18. ericd9799 revised this gist Apr 8, 2018. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -298,8 +298,7 @@

    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);
    });
    }

  19. ericd9799 revised this gist Apr 8, 2018. 1 changed file with 2 additions and 8 deletions.
    10 changes: 2 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -250,26 +250,20 @@

    //focus.attr("transform", "translate(" + x(d.date) + "," + y(d.drinking) + ")");
    //focus.select("text").text(d.drinking);

    //console.log(i);



    var series = [
    {date: data[i].date, value: data[i].drinking},
    {date: data[i].date, value: data[i].sanitation},
    {date: data[i].date, value: data[i].diarrhoea}
    ];

    //console.log(series);

    for(var i=0; i < series.length; i++){
    var selectedFocus = svg.selectAll(".focus"+i);
    selectedFocus.attr("transform", "translate("+x(series[i].date)+","+y(series[i].value)+")");
    selectedFocus.select("text").text(series[i].value);
    }
    }



    });

    function updateCountry(){
  20. ericd9799 revised this gist Apr 8, 2018. 1 changed file with 7 additions and 16 deletions.
    23 changes: 7 additions & 16 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -212,14 +212,15 @@
    focus.append("g")
    .attr("class", "focus"+i)
    .append("circle")
    .attr("class", "highlight")
    .style("stroke", "red")
    .style("fill", "red")
    .attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
    //.attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
    .attr("r", 2);

    svg.select(".focus"+i)
    .append("text")
    .attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
    //.attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
    .attr("x", 30)
    .attr("dy", ".35em");
    }
    @@ -266,8 +267,6 @@
    selectedFocus.attr("transform", "translate("+x(series[i].date)+","+y(series[i].value)+")");
    selectedFocus.select("text").text(series[i].value);
    }


    }


    @@ -297,23 +296,15 @@

    //z.domain(categories.map(function(c){return c.id;}));

    var svg = d3.select("body");
    var svg = d3.select("body");

    //console.log(categories);

    svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);
    //console.log(function(d){return d.values.length;});
    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);
    console.log(data.length);
    svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);

    for(var i=0; i < data.length; i++){
    console.log("here");
    svg.select(".focus"+i).attr("transform", function(d){return "translate("+x(data[i].date)+","+y(data[i].rates)+")";}).transition().duration(750);

    }

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);
    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);

    });
    }
  21. ericd9799 revised this gist Apr 8, 2018. 1 changed file with 8 additions and 7 deletions.
    15 changes: 8 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -275,7 +275,7 @@

    function updateCountry(){
    var country = d3.select("#countrySelection").property("value");
    console.log(country);
    //console.log(country);
    d3.csv(country+".csv",type,function(error,data){
    if(error) throw error;

    @@ -299,16 +299,17 @@

    var svg = d3.select("body");

    console.log(categories);
    //console.log(categories);

    svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);

    svg.selectAll(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";}).transition().duration(750);

    //console.log(function(d){return d.values.length;});
    svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);
    console.log(data.length);

    for(var i=0; i < data.length; i++){
    svg.select(".focus"+i).attr("transform", function(d){return "translate("+x(parseTime(data[i].date))+","+y(data[i].rates)+")";}).transition().duration(750);
    console.log(data[i].date);
    console.log("here");
    svg.select(".focus"+i).attr("transform", function(d){return "translate("+x(data[i].date)+","+y(data[i].rates)+")";}).transition().duration(750);

    }

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);
  22. ericd9799 revised this gist Apr 8, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -313,6 +313,7 @@

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);


    });
    }

  23. ericd9799 revised this gist Apr 8, 2018. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -191,22 +191,22 @@
    .attr("class", "label")
    .datum(function(d){return {id: d.id, value: d.values[d.values.length - 1]};})
    .attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";})
    .attr("x", 5)
    .attr("dy", "0.75em")
    //.attr("x", 5)
    //.attr("dy", "0.75em")
    .style("font", "10px sans-serif")
    .text(function(d){return d.id;});

    var focus = svg.append("g")
    .attr("class", "focus")
    .style("display", "none");

    focus.append("line")
    /*focus.append("line")
    .attr("class", "y")
    .attr("stroke", "black")
    //.attr("stroke-dasharray", "3,3")
    .style("opacity", 0.5)
    .attr("y1", 0)
    .attr("y2", height);
    .attr("y2", height);*/

    for(var i=0; i < data.length; i++){
    focus.append("g")
  24. ericd9799 revised this gist Apr 8, 2018. No changes.
  25. ericd9799 revised this gist Apr 7, 2018. No changes.
  26. ericd9799 revised this gist Apr 7, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -172,7 +172,7 @@

    svg.append("text")
    .attr("x", width/2)
    .attr("y", 15 - margin.top/2)
    .attr("y", 5 - margin.top/2)
    .attr("text-anchor", "middle")
    .style("font-size", "16px")
    .text("Correlation of Access to Basic Drinking Water and Sanitation to Mortality caused by Diarrhoeal Diseases")
  27. ericd9799 revised this gist Apr 7, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -212,8 +212,8 @@
    focus.append("g")
    .attr("class", "focus"+i)
    .append("circle")
    .style("stroke", "black")
    .style("fill", "black")
    .style("stroke", "red")
    .style("fill", "red")
    .attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
    .attr("r", 2);

  28. ericd9799 revised this gist Apr 7, 2018. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -212,8 +212,8 @@
    focus.append("g")
    .attr("class", "focus"+i)
    .append("circle")
    .style("stroke", z(data[i].id))
    .style("fill", z(data[i].id))
    .style("stroke", "black")
    .style("fill", "black")
    .attr("transform", "translate("+x(data[i].date)+","+y(data[i].rates)+")")
    .attr("r", 2);

    @@ -305,11 +305,11 @@

    svg.selectAll(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";}).transition().duration(750);

    /*

    for(var i=0; i < data.length; i++){
    svg.select(".focus"+i).attr("transform", function(d){return "translate("+x(parseTime(data[i].date))+","+y(data[i].rates)+")";}).transition().duration(750);
    console.log(data[i].date);
    }*/
    }

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);

  29. ericd9799 revised this gist Apr 7, 2018. 1 changed file with 3 additions and 2 deletions.
    5 changes: 3 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -304,11 +304,12 @@
    svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);

    svg.selectAll(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";}).transition().duration(750);


    /*
    for(var i=0; i < data.length; i++){
    svg.select(".focus"+i).attr("transform", function(d){return "translate("+x(parseTime(data[i].date))+","+y(data[i].rates)+")";}).transition().duration(750);
    console.log(data[i].date);
    }
    }*/

    svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);

  30. ericd9799 revised this gist Apr 7, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -303,7 +303,7 @@

    svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);

    //svg.selectAll(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";}).transition().duration(750);
    svg.selectAll(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";}).transition().duration(750);

    for(var i=0; i < data.length; i++){
    svg.select(".focus"+i).attr("transform", function(d){return "translate("+x(parseTime(data[i].date))+","+y(data[i].rates)+")";}).transition().duration(750);