Right Json Format Structure For Streamgraph Example D3

August 20, 2024 Post a Comment

I was trying to do some examples with this streamgraph layout of D3.js. My data has this format. So the my object has objects with the name of the country andy in those objects i h

Solution 1:

I double-backed to this question, mostly out of boredom, but I think I was a bit to harsh in my comments. As I said, your data has too many "by" variables, so let's assume that we want to stream graph by country with an optional filter of "InsgesamtMonat", "EntscheidungenInsgesamt", etc... So the question becomes how do we get this data, in JavaScript, into a format that d3.layout.stack will understand?

// give a stack defined as...var stack = d3.layout.stack()
    .offset("wiggle")
    .values(function(d) {
      return d.values;
    });

  // convert data// varToStackOn is "EntscheidungenInsgesamt"var properData = [];
  for (country in json) {
    var obj = {};
    obj.name = country;
    obj.values = [];
    json[country][varToStackOn].forEach(function(d, i) {
      obj.values.push({
        x: format.parse(json[country]["Datum"][i]),
        y: d
      });
    })
    properData.push(obj);
  }

  // and stack itvar stackedData = stack(properData);

Once this is done, following the examples becomes easy.

Here it all is all together:

<!DOCTYPE html><metacharset="utf-8"><style>body {
    font: 10px sans-serif;
  }
  
  .chart {
    background: #fff;
  }
  
  p {
    font: 12px helvetica;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    stroke-width: 2px;
    shape-rendering: crispEdges;
  }
  
  button {
    position: absolute;
    right: 50px;
    top: 10px;
  }
</style><body><scriptsrc="http://d3js.org/d3.v3.js"></script><divclass="chart"></div><script>var json = {
      "Irak": {
        "Asylberechtigt": [65, 60, 54, 47, 47, 30, 25, 21, 12, 6],
        "EntscheidungenInsgesamt": [8645, 7559, 6533, 5425, 4351, 3336, 2643, 2022, 1270, 645],
        "InsgesamtMonat": [1086, 1026, 1108, 1074, 1015, 693, 621, 752, 625, 645],
        "Datum": ["2015-10-01", "2015-09-01", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01"]
      },
      "Mazedonien": {
        "Asylberechtigt": [50, 20, 10, 14, 10, 6, 18, 32, 30, 12],
        "EntscheidungenInsgesamt": [4734, 4091, 3527, 3268, 2715, 2238, 1923, 1489, 1094, 604],
        "InsgesamtMonat": [643, 564, 259, 553, 477, 315, 434, 395, 490, 604],
        "Datum": ["2015-10-01", "2015-09-01", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01",
          "2015-02-01", "2015-01-01"
        ]
      }
    }

    var format = d3.time.format("%Y-%d-%m");

    var stack = d3.layout.stack()
      .offset("wiggle")
      .values(function(d) {
        return d.values;
      });

    var width = 300,
      height = 300;

    var x = d3.time.scale()
      .range([0, width])
      .domain(d3.extent(["2015-10-01", "2015-09-01", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01"], function(d) {
        return format.parse(d);
      }));

    var y = d3.scale.linear()
      .range([height, 0]);

    var color = d3.scale.category10()

    var area = d3.svg.area()
      .x(function(d) {
        returnx(d.x);
      })
      .y0(function(d) {
        returny(d.y0);
      })
      .y1(function(d) {
        returny(d.y0 + d.y);
      });

    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
      
    var stackOn = "InsgesamtMonat";
    setInterval(function(){
      if (stackOn === "InsgesamtMonat")
        stackOn = "EntscheidungenInsgesamt";
      elseif (stackOn === "Asylberechtigt")
        stackOn = "InsgesamtMonat";
      elseif (stackOn === "EntscheidungenInsgesamt")
        stackOn = "Asylberechtigt";
  
      updateGraph(stackOn);
    }, 1000);

    functionupdateGraph(varToStackOn) {

      var properData = [];
      for (country in json) {
        var obj = {};
        obj.name = country;
        obj.values = [];
        json[country][varToStackOn].forEach(function(d, i) {
          obj.values.push({
            x: format.parse(json[country]["Datum"][i]),
            y: d
          });
        })
        properData.push(obj);
      }
      
      var stackedData = stack(properData);

      y.domain([0, d3.max(stackedData, function(layer) {
        return d3.max(layer.values, function(d) {
          return d.y0 + d.y;
        });
      })]);

      var paths = svg.selectAll("path")
        .data(stack(properData))
      
      paths
        .enter().append("path")
        .style("fill", function(d, i) {
          returncolor(i);
        });
      
      paths.transition()
        .attr("d", function(d) {
          returnarea(d.values);
        });
    }
  </script></body></html>

javascript html php

Right Json Format Structure For Streamgraph Example D3

Solution 1:

Post a Comment for "Right Json Format Structure For Streamgraph Example D3"