right JSON-Formatstruktur für Streamgraph-Beispiel D3
Ich habe versucht, einige Beispiele mit diesem @ zu mach streamgraph layout von D3.js. Meine Daten haben dieses Format. Also hat mein Objekt Objekte mit dem Namen des Landes und in diesen Objekten habe ich mehrere Arrays mit unterschiedlichen Werten pro Monat und dem Datum für jeden Monat ("Datum")
{
"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": [
0,
0,
0,
0,
0,
0,
0,
0,
0,
0
],
"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"
]
}
}
Für das Streamgraph brauche ich .values und ich habe verstanden, dass es einige x- und y-Werte zurückgeben muss, auf die ich mit dieser Funktion zugreife (0 ist zum Beispiel Irak, aber am Ende muss ich alle Länder durchlaufen). Ich denke, das ist keine dauerhafte Lösung. Aber wie sollten meine Daten im Allgemeinen aussehen, da mir klar wurde, dass das Verschachteln für mich ziemlich verwirrend ist?So Welche Struktur ist erforderlich, damit ich die Funktionen zur Visualisierung des Streamgraphen verwenden kann?
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d){
for (var i = 0; i < d[countries[0]].Datum.length; i++) {
var dx = d[countries[0]].Datum[i];
var dy = d[countries[0]].InsgesamtMonat[i];
//console.log("Countries with InsgesamtMonat "+ countries[i]+" "+test);
dStack[i] = { x: dx, y: dy};
}
return dStack;
});
//.values(function(d) { return d[countries[0]].values; })
.x(function(d) { return d[countries[0]].Datum; })
.y(function(d) { return d[countries[0]].InsgesamtMonat; });
Brauche ich noch die .x und die .y?
Hier ist mein vollständiger Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Streamgraph</title>
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<!--Place all DOM elements here -->
<script>
d3.json("data.json", function(error, data){
console.log(data)
plot(data);
//console.log(data);
})
function plot(data) {
var dStack = [];
var w = 800;
var h = 450;
var margin = {
top: 100,
bottom: 0,
left: 80,
right: 40
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("id", "chart")
.attr("width", w)
.attr("height", h)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var dateParser = d3.time.format("%Y-%m-%d").parse;
var colorScale = d3.scale.category20();
var n = Object.keys(data).length;
var m = 10 // number of samples per layer
//console.log(data[Object.keys("Asylberechtigt")[13]])
//var test = Object.keys(data).Asylberechtigt;
var countries = Object.keys(data);
console.log(countries);
var stack = d3.layout.stack()
.offset("wiggle")
.values(function(d){
for (var i = 0; i < d[countries[0]].Datum.length; i++) {
var dx = d[countries[0]].Datum[i];
var dy = d[countries[0]].InsgesamtMonat[i];
//console.log("Countries with InsgesamtMonat "+ countries[i]+" "+test);
dStack[i] = { x: dx, y: dy};
}
return dStack;
});
//.values(function(d) { return d[countries[0]].values; })
.x(function(d) { return d[countries[0]].Datum; })
.y(function(d) { return d[countries[0]].InsgesamtMonat; });
var nest = d3.nest()
.key(function(d) { return d.countries });
console.log(nest);
var area = d3.svg.area()
.interpolate("cardinal")
.x(function(d){
var xStack = []
for (var i = 0; i < d[countries[0]].Datum.length; i++) {
var dx = d[countries[0]].Datum[i];
xStack[i] = dx;
}
return xStack })
.y0(function(d) { return y(d.y0); })
.y1(function(d) { return y(d.y0 + d.y); });
var layers = stack(nest.countries(data)); //Do i need to nest again because i already have the Countries as objects
var x = d3.time.scale()
.domain(d3.extent(data, function(d, i){
var date = dateParser(Object.keys(d).Datum(i)); // Do't know if this is legit either
// date= 0;
return date;
}))
.range([0+margin.left,width]);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d){
return d.value;
})])
.range([height,0+margin.top]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
//enter()
svg.selectAll(".point")
.data(layers)
.enter()
}
</script>
</body>
</html>Ich weiß nicht genau, wie ich den Layer für meine Daten deklarieren soll. Kannst du mir auch dabei helfen?