Mit d3.layout.stack() und Parsen von csv-bar-chart

In der Gestapelt-auf-Beispiel für das gruppieren von Mike Bostock er verwendet die folgenden zu generieren seiner Daten. Ich habe meine eigenen Daten in eine CSV-Datei, damit die Entschlüsselung dieser und wie kann ich das beseitigen und meine eigenen Daten aus dem CSV-Format, ist hier der Schlüssel.

//Inspired by Lee Byron's test data generator.
function bumpLayer(n, o) {

  function bump(a) {
    var x = 1 / (.1 + Math.random()),
        y = 2 * Math.random() - .5,
        z = 10 / (.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
  for (i = 0; i < 5; ++i) bump(a);
  return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}

Dies ist schwierig zu verstehen, wie bereits erwähnt, vor allem, da es dann manipuliert Sie wie folgt vor:

n = 6, //number of layers
m = 12, //number of samples per layer
stack = d3.layout.stack(),
layers = stack(d3.range(n).map(function() { return bumpLayer(m, .1); })),

Jeder Schritt wird protokolliert, in der Konsole in mein Arbeits-code-Beispiel hier: http://tributary.io/inlet/8827504

ZIEL: meine csv-Datei und Bearbeiten in 2D-array an der d3 behandeln kann.

Etwas wie dieses, die nicht für mich arbeiten, könnte einen Ausgangspunkt.

//store the names of each column in csv file in array
var headers = ["Under $1000","$1000-$9999","$10000-19999","$20000-99999","100K - $999999","Over $1 Million"];


var myData = function(mycsv){

    d3.layout.stack()(headers
              .map(function(value){
                      return mycsv.map(function(d) {

                        return {x: d.Category, y: +d[value]};
                      });
                 }))
};

Dank!

*BEARBEITEN***

In einem anderen Beispiel unter Verwendung von d3.layout.stack() und csv-code zu analysieren, geht wie folgt vor:

d3.csv("crimea.csv", function(crimea) {

  //Transpose the data into layers by cause.
  var causes = d3.layout.stack()(["wounds", "other", "disease"].map(function(cause) {
    return crimea.map(function(d) {
      return {x: parse(d.date), y: +d[cause]};
    });
  }));

  //Compute the x-domain (by date) and y-domain (by top).
  x.domain(causes[0].map(function(d) { return d.x; }));
  y.domain([0, d3.max(causes[causes.length - 1], function(d) { return d.y0 + d.y; })]);

Beispiel: http://bl.ocks.org/mbostock/1134768

  • so wie ich das verstehe, möchten Sie eigene Daten statt bumpLayer generator?
  • Ja, ich habe meine eigenen Daten in der csv-Datei finden Sie den link zu meinem code oben in den Zeilen 3 - 16 Nebenfluss.io/Einlass/8827504
InformationsquelleAutor DeBraid | 2014-02-13
Schreibe einen Kommentar