D3 Examples - Streamgraph

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<title>Streamgraph</title>
<style>
    button {
        position: absolute;
        left: 10px;
        top: 10px;
    }
​
    .tooltip {
        position: absolute;
        width: auto;
        height: auto;
        pointer-events: none;
        background-color: white;
        border-radius: 10px;
        padding: 10px;
    }
    body, html {
    width:100%;
    height:95%;
    }
    #chart {
    width:100%;
    height:100%;
    }
    svg {
    width: 100%;
    height: 100%;
    }
​
​
</style>
<button onclick="transition()">Update</button>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
<div id="chart" class='chart'>
<svg></svg>
</div>
<script>
​
var data = {
    resource_id: '3e68c5d5-2c96-44fd-b43d-1c3445d41739', // the resource id
    limit: 1000,
};
var parseTime = d3.timeParse("%Y");
​
var tooltip= d3.select("body")
    .append("div")
    .attr("class", "tooltip")
    .attr("id", "tooltip")
    .text(' ')
    // .style("position", "absolute")
    // .style("z-index", "10")
    .style("visibility", "hidden")
    // .style("color", "#222")
    // .style("padding", "8px")
    // .style("background-color", "white")
    // .style("border-radius", "6px")
    // .style("font", "14 px sans-serif")
​
​
var test
$.ajax({
    url: 'https://catalogue.data.gov.bc.ca/api/action/datastore_search',
    data: data,
    dataType: 'json',
    success: function(data) {
        var cats = [];
        // dat = data.result.records;
        data = data.result.records;
        test = data
        const unique = [...new Set(data.map(item => item.Species))]
        n = unique.length
        m = data.length
​
        var nested = d3.nest()
            .key(function(d) {
                return d.Year
            })
            .entries(data);
​
​
        landata = nested.map(function(d) {
            var obj = {
                Year: d.key
            }
            d.values.forEach(function(v) {
                // console.log(v["Landings ('000 tonnes)"])
                obj[v['Species']] = +v["Landings ('000 tonnes)"];
            })
            return obj
        });
        valdata = nested.map(function(d) {
            var obj = {
                Year: d.key
            }
            d.values.forEach(function(v) {
                // console.log(v)
                obj[v['Species']] = +v["Wholesale Values ($millions)"];
            })
            return obj
        });
    
​
        var stack = d3.stack()
            .keys(unique)
            .order(d3.stackOrderNone)
            .offset(d3.stackOffsetWiggle);
​
        var series = stack(landata)
        var series1 = stack(valdata)
        // console.log(series)
​
​
        var svg = d3.select("svg").style("width", "90%").style("height", "100%");
​
​
        var margin = {
                top: 20,
                right: 20,
                bottom: 30,
                left: 40
        },
        screenHeight = parseFloat(d3.select("svg").node().clientHeight || d3.select("svg").node().parentNode.clientHeight);
    screenWidth = parseFloat(d3.select("svg").node().clientWidth - 40 || d3.select("svg").node().parentNode.clientWidth);
​
        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
​
​
        var x = d3.scaleTime()
            .range([0, screenWidth]);
​
            x.domain(d3.extent(data, function(d) {
                // console.log(parseTime(d.Year))
             return parseTime(d.Year); }))
​
​
​
        var y = d3.scaleLinear()
            .domain([d3.min(series, stackMin), d3.max(series, stackMax)])
            .range([screenHeight-50, 10]);
​
        // var xAxis = d3.axisBottom()
        //     .scale(x)
        //     .tickSize(0)
        //     .tickPadding(0.1);
​
        var yAxis = d3.axisLeft(y).ticks(6, "s");
​
        var z = d3.interpolateCool;
​
​
        x.domain(d3.extent(data, function(d) {
            // console.log(parseTime(d.Year))
             return parseTime(d.Year); }));
​
        var area = d3.area()
            .x(function(d, i) {
                return x(parseTime(d.data.Year));
            })
            .y0(function(d) {
                return y(d[0]);
            })
            .y1(function(d) {
                return y(d[1]);
            });
​
        var tooltip = d3.select("body").append("div")
            .attr("class", "tooltip");
​
        g.selectAll("path")
            .data(series)
            .enter().append("path")
            .attr("d", area)
            .attr("fill", function(d) {
​
                return z(Math.random());
            })
            .on('mouseover', function(d) {
                // console.log(d)
                // d3.select(this).style('fill', d3.rgb(d3.select(this).style("fill")).brighter());
                // d3.select("#major").text(d.key);
                tooltip.html(d.key)
                tooltip.style("visibility", "visible");
        
            })
            .on("mousemove", function() {
                return tooltip.style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 20) + "px");
            })
            .on('mouseout', function(d) {
                // d3.select(this).style('fill',
                //     d3.rgb(d3.select(this).style("fill")).darker());
                return tooltip.style("visibility", "hidden");
                // d3.select("#major").text("Mouse over");
                // tooltip.transition()
                //              .duration(500)
                //              .style("opacity", 0);
            })
​
        // g.append("g")
        //     .attr("class", "axis axis--x")
        //     .attr("transform", "translate(0," + screenHeight + ")")
        //     .call(d3.axisBottom(x));
​
        g.append("g")
            .attr("class", "axis axis--x")
            .attr("transform", "translate(0," + (screenHeight-45) + ")")
            .call(d3.axisBottom(x)
                .tickSize(0)
                .tickPadding(6));
​
        g.append("g")
            .attr("class", "axis axis--y")
            .call(yAxis)
            .append("text")
            .attr("x", 2)
            .attr("y", y(y.ticks(8).pop()))
            .attr("dy", "-0.95em")
            .attr("text-anchor", "start")
            .attr("fill", "#000")
            .text("Number of Foreign Involvement Transactions");
           
​
        function stackMin(layer) {
            return d3.min(layer, function(d) {
                return d[0];
            });
        }
​
        function stackMax(layer) {
            return d3.max(layer, function(d) {
                return d[1];
            });
        }
​
​
​
​
    }
​
})
​
​
    // function transition() {
    //     console.log('ji')
    //     var t;
    //     d3.selectAll("path")
    //     .data((t = series, layers1 = series1))
    //     .transition()
    //       .duration(2500)
    //       .attr("d", area);
    //     }
</script>
    