D3OG

All examples By author By category About

jaimeps

Full window Github gist

Project 2

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

body { font: 12px Arial;}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.legend {
    font-weight: bold;
    text-anchor: middle;
    font: 16px futura;
}

.title {
    color: black;
    text-align: center;
    font: 16px futura;
}

.area.above {
    fill: #bad6e8;
}

.area.below {
    fill: #e2cacd;
}

.line {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
}

</style>
<div id="area1"></div>
<div id="area2"></div>
<div id="area3"></div>
<div id="area4"></div>

<body>

<script src="https://d3js.org/d3.v3.min.js"></script>

// Set the dimensions of the canvas / graph
    var margin = {top: 20, right: 20, bottom: 40, left: 60},
            width = 600 - margin.left - margin.right,
            height = 200 - margin.top - margin.bottom;

// Parse the date / time
    var parseDate = d3.time.format("%Y").parse;

// Set the ranges
    var x = d3.time.scale().range([0, width]);
    var y = d3.scale.linear().range([height, 0]);

// Define the axes
    var xAxis = d3.svg.axis().scale(x)
            .orient("bottom").ticks(5);

var yAxis = d3.svg.axis().scale(y)
            .orient("left").ticks(5);

// Define the line
    var priceline = d3.svg.line()
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d.price); });

var test = ["#95c3ee", "#227dd2", "#aaaaaa" , "#c2b593", '#595959']

// CHART 1 //////////////////////////////////////////////////////////////

// Adds the svg canvas
    var chart1 = d3.select("#area1")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");

// Get the data
    d3.csv("data_v4.csv", function(error, data) {
        data.forEach(function(d) {
            d.date = parseDate(d.year);
            d.price = +d.occurrence;
        });

// Scale the range of the data
        x.domain(d3.extent(data, function(d) { return d.date; }));
        y.domain([0, d3.max(data, function(d) { return d.price; })]);

// Add y label
        chart1.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", -50)
                .attr("dy", ".71em")
                .attr("x", -height/2)
                .style("text-anchor", "middle")
                .text("No. of occurrences");

// Nest the entries by symbol
        var dataNest = d3.nest()
                .key(function(d) {return d.disaster_type;})
                .entries(data);

var color = d3.scale.ordinal()
                .range(test);

legendSpace = width/dataNest.length; // spacing for the legend

// Loop through each symbol / key
        dataNest.forEach(function(d,i) {

chart1.append("path")
                    .attr("class", "line")
                    .style("stroke", function() { // Add the colours dynamically
                        return d.color = color(d.key); })
                    .attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
                    .attr("d", priceline(d.values));

});

// Add the X Axis
        chart1.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

// Add the Y Axis
        chart1.append("g")
                .attr("class", "y axis")
                .call(yAxis);

chart1.append("text")
                .attr('class', 'title')
                .text('Number of natural disasters')
                .attr("x", 160);
    });

// CHART 2 //////////////////////////////////////////////////////////////

// Adds the svg canvas
    var chart2 = d3.select("#area2")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");

// Get the data
    d3.csv("data_v4.csv", function(error, data2) {
        data2.forEach(function(d2) {
            d2.date = parseDate(d2.year);
            d2.price = +d2.Total_affected / 1000000;
        });

// Scale the range of the data
        x.domain(d3.extent(data2, function(d2) { return d2.date; }));
        y.domain([0, d3.max(data2, function(d2) { return d2.price; })]);

// Add y label
        chart2.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", -50)
                .attr("dy", ".71em")
                .attr("x", -height/2)
                .style("text-anchor", "middle")
                .text("No. of people affected (m.)");

// Nest the entries by symbol
        var dataNest2 = d3.nest()
                .key(function(d2) {return d2.disaster_type;})
                .entries(data2);

var color2 = d3.scale.ordinal().range(test);

legendSpace2 = width/dataNest2.length; // spacing for the legend

// Loop through each symbol / key
        dataNest2.forEach(function(d2,i) {

chart2.append("path")
                    .attr("class", "line")
                    .style("stroke", function() { // Add the colours dynamically
                        return d2.color2 = color2(d2.key); })
                    .attr("id", 'tag2'+d2.key.replace(/\s+/g, '')) // assign ID
                    .attr("d", priceline(d2.values));

});

// Add the X Axis
        chart2.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

// Add the Y Axis
        chart2.append("g")
                .attr("class", "y axis")
                .call(yAxis);

chart2.append("text")
                .attr('class', 'title')
                .text('Affected population')
                .attr("x", 180);

});

// Adds the svg canvas
    var chart3 = d3.select("#area3")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom + 40)
            .append("g")
            .attr("transform",
                    "translate(" + margin.left + "," + margin.top + ")");

// CHART 3 /////////////////////////////////////////////////////////////////

// Get the data
    d3.csv("data_v4.csv", function(error, data2) {
        data2.forEach(function(d2) {
            d2.date = parseDate(d2.year);
            d2.price = +d2.Total_damage / 1000000;
        });

// Scale the range of the data
        x.domain(d3.extent(data2, function(d2) { return d2.date; }));
        y.domain([0, d3.max(data2, function(d2) { return d2.price; })]);

// Add y label
        chart3.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", -50)
                .attr("dy", ".71em")
                .attr("x", -height/2)
                .style("text-anchor", "middle")
                .text("Damage ($m.)");

// Nest the entries by symbol
        var dataNest2 = d3.nest()
                .key(function(d2) {return d2.disaster_type;})
                .entries(data2);

var color2 = d3.scale.ordinal().range(test);

legendSpace2 = width/dataNest2.length; // spacing for the legend

// Loop through each symbol / key
        dataNest2.forEach(function(d2,i) {

chart3.append("path")
                    .attr("class", "line")
                    .style("stroke", function() { // Add the colours dynamically
                        return d2.color2 = color2(d2.key); })
                    .attr("id", 'tag3'+d2.key.replace(/\s+/g, '')) // assign ID
                    .attr("d", priceline(d2.values));

// Add the Legend
            chart3.append("text")
                    .attr("x", (legendSpace2/2)+i*(legendSpace2+20) - 70)  // space legend
                    .attr("y", height + (margin.bottom/2)+ 35)
                    .attr("class", "legend")    // style the legend
                    .style("fill", function() { // Add the colours dynamically
                        return d2.color2 = color2(d2.key); })
                    .on("click", function(){
                        // Determine if current line is visible
                        var active2   = d2.active2 ? false : true,
                                newOpacity2 = active2 ? 0 : 1;
                        // Hide or show the elements based on the ID
                        d3.select("#tag2"+d2.key.replace(/\s+/g, ''))
                                .transition().duration(100)
                                .style("opacity", newOpacity2);
                        d3.select("#tag"+d2.key.replace(/\s+/g, ''))
                                .transition().duration(100)
                                .style("opacity", newOpacity2);
                        d3.select("#tag3"+d2.key.replace(/\s+/g, ''))
                                .transition().duration(100)
                                .style("opacity", newOpacity2);
                        // Update whether or not the elements are active
                        d2.active2 = active2;
                    })
                    .text(d2.key);

});

// Add the X Axis
        chart3.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

// Add the Y Axis
        chart3.append("g")
                .attr("class", "y axis")
                .call(yAxis);

chart3.append("text")
                .attr('class', 'title')
                .text('Damage')
                .attr("x", 200);

chart3.append("text")
                .attr("y",170)
                .attr("x", 0)
                .text('Source: CRED')
                .style("font-size","10px");

});

var line = d3.svg.area()
            .interpolate("basis")
            .x(function(d) { return x(d.date); })
            .y(function(d) { return y(d["Value"]); });

var area = d3.svg.area()
            .interpolate("basis")
            .x(function(d) { return x(d.date); })
            .y1(function(d) { return y(d["Value"]); });

var chart4 = d3.select("#area4").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom + 20)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.tsv("temperature4.txt", function(error, data) {
        if (error) throw error;

data.forEach(function(d) {
            d.date = parseDate(d.Year);
            d["Value"]= +d["Value"];
            d["Value2"] = +d["Value2"];
        });

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

y.domain([
            d3.min(data, function(d) { return Math.min(d["Value"], d["Value2"]); }),
            d3.max(data, function(d) { return Math.max(d["Value"], d["Value2"])+1.5; })
        ]);

chart4.datum(data);

chart4.append("clipPath")
                .attr("id", "clip-below")
                .append("path")
                .attr("d", area.y0(height));

chart4.append("clipPath")
                .attr("id", "clip-above")
                .append("path")
                .attr("d", area.y0(0));

chart4.append("path")
                .attr("class", "area above")
                .attr("clip-path", "url(#clip-above)")
                .attr("d", area.y0(function(d) { return y(d["Value2"]); }));

chart4.append("path")
                .attr("class", "area below")
                .attr("clip-path", "url(#clip-below)")
                .attr("d", area);

chart4.append("path")
                .attr("class", "line")
                .attr("d", line);

chart4.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);

chart4.append("g")
                .attr("class", "y axis")
                .call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", -50)
                .attr("dy", ".71em")
                .attr("x", -height/2)
                .style("text-anchor", "middle")
                .text("Temperature*  (ºC)");

chart4.append("text")
                .attr("y",33)
                .attr("x", 50)
                .text("Paris Agreement 2030 limit");

chart4.append("text")
                .attr("y",60)
                .attr("x", 50)
                .text("Paris Agreement 2030 target");

chart4.append("text")
                .attr('class', 'title')
                .text('Global average temperature')
                .attr("x", 150);

chart4.append("text")
                .attr("y",170)
                .attr("x", 0)
                .text("Source: NOAA")
                .style("font-size","10px");

chart4.append("text")
                .attr("y",180)
                .attr("x", 0)
                .text("*Deviation from 20th century average")
                .style("font-size","10px");

chart4.append("svg:line")
                .attr("x1", 0)
                .attr("x2", width)
                .attr("y1", 22)
                .attr("y2", 22)
//                .attr("stroke-dasharray")
                .style("stroke", "#89383a");

chart4.append("svg:line")
                .attr("x1", 0)
                .attr("x2", width)
                .attr("y1", 48)
                .attr("y2", 48)
                .style("stroke", "#316ab4")
    });

</script>
</body>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js