come creare un grafico a più righe usando dc.js

Sto creando un grafico a più linee utilizzando la libreria javascript di Densionamento di diteggiatura dimensionale, che si basa su d3 e crossfilter. Sono nuovo nella libreria dc.js. Sto cercando di visualizzare il grafico multilinea usando il file CSV. Non riesco a capire come creare un grafico multilinea seguendo il formato CSV.come creare un grafico a più righe usando dc.js

mio formato di colonna CSV è

Age_19_Under Age_19_64 Age_65_84 Age_85_and_Over 
    26.9    62.3   9.8    0.9 
    23.5    60.3   14.5    1.8 
    24.3    62.5   11.6    1.6 
    24.6    63.3   10.9    1.2 
    24.5    62.1   12.1    1.3 
    24.7    63.2   10    2.2 
    25.6    58.5   13.6    2.4 
    24.1    61.6   12.7    1.5 
    24.8    59.5   13.5    2.2

sto provando codice foolowing:

{% extends "base.html" %} 
{% load staticfiles %} 
{% block content %} 
<head> 
<link href="{% static 'css/dc.css' %}" rel="stylesheet" media="screen"> 
<link href="{% static 'css/example-styles.css' %}" rel="stylesheet" media="screen"> 
</head> 
<div class="container" style="margin-top: 140px"> 

    <div class="col-lg-12" id="chart-row-Poverty1"> 
    </div> 
</div> 
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script> 
<script type="text/javascript" src="{% static 'js/crossfilter.js' %}"></script> 
<script type="text/javascript" src="{% static 'js/dc.js' %}"></script> 
<script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script> 
<script type="text/javascript" src="{% static 'js/d3.js' %}"></script> 
<script type="text/javascript" src="{% static 'js/index.js' %}"></script> 
<script type="text/javascript"> 

    var lineChart1=dc.compositeChart("#chart-row-Poverty1"); 
var g; 

d3.csv("{% static 'sampledata/helthdata.csv' %}", function(error, experiments) { 

var dateFormat = d3.time.format("%Y"); 
var numberFormat = d3.format(",f"); 

var ndx = crossfilter(experiments); 
var all = ndx.groupAll(); 

var runDimension = ndx.dimension(function(d) {return [+d.Age_19_Under, +d.Age_19_64, +d.Age_65_84,+d.Age_85_and_Over]; }); 
var runGroup = runDimension.group().reduceSum(function(d) { return 1; }); 

lineChart1.width(1160) 
.height(250) 
.margins({top: 10, right: 10, bottom: 20, left: 40}) 
.dimension(runDimension) 
.group(runGroup) 
.transitionDuration(500) 
.elasticY(true) 
.brushOn(false) 
.valueAccessor(function (d) { 
       return d.value; 
      }) 
.title(function(d){ 
    return "\nNumber of Povetry: "+d.key; 

    }) 
.x(d3.scale.linear().domain([4, 27])) 
.xAxis(); 

dc.renderAll(); 


}); 

</script> 
{% endblock %}

fonte

2014-04-12 pramod24

Può aiutare a pensare alla dimensione come i valori che si desidera vedere lungo l'asse X e i gruppi sono come si desidera che i dati di ogni coordinata sull'asse X siano raggruppati in un unico valore Y. In questo modo, un gruppo rappresenta i dati per una riga sul grafico multilinea. Una volta che hai capito, devi creare grafici N + 1 in dc.js. Cioè un diagramma di riga per ogni grafico che vuoi vedere e poi un compositeChart per riunirli tutti insieme. I singoli LineCharts possono essere piuttosto semplici perché erediteranno molte proprietà dal compositeChart in cui sono contenuti.

Non è stato fino a quando ho finito di mettere insieme il codice qui sotto ho notato i valori reali impostati per l'asse X e ho capito che penso di aver interpretato erroneamente ciò che stai davvero cercando di fare. Mi dispiace per quello Spero che continui a illustrare le idee fondamentali per te.

var experiments = [ 
    { Run: 1, Age_19_Under: 26.9, Age_19_64: 62.3, Age_65_84: 9.8, Age_85_and_Over: 0.9 }, 
    { Run: 2, Age_19_Under: 23.5, Age_19_64: 60.3, Age_65_84: 14.5, Age_85_and_Over: 1.8 }, 
    { Run: 3, Age_19_Under: 24.3, Age_19_64: 62.5, Age_65_84: 11.6, Age_85_and_Over: 1.6 }, 
    { Run: 4, Age_19_Under: 24.6, Age_19_64: 63.3, Age_65_84: 10.9, Age_85_and_Over: 1.2 }, 
    { Run: 5, Age_19_Under: 24.5, Age_19_64: 62.1, Age_65_84: 12.1, Age_85_and_Over: 1.3 }, 
    { Run: 6, Age_19_Under: 24.7, Age_19_64: 63.2, Age_65_84: 10, Age_85_and_Over: 2.2 }, 
    { Run: 7, Age_19_Under: 25.6, Age_19_64: 58.5, Age_65_84: 13.6, Age_85_and_Over: 2.4 }, 
    { Run: 8, Age_19_Under: 24.1, Age_19_64: 61.6, Age_65_84: 12.7, Age_85_and_Over: 1.5 }, 
    { Run: 9, Age_19_Under: 24.8, Age_19_64: 59.5, Age_65_84: 13.5, Age_85_and_Over: 2.2 }, 
]; 

var ndx = crossfilter(experiments); 
var all = ndx.groupAll(); 

var runDimension = ndx.dimension(function (d) { return d.Run; }); 

var age19UnderGroup = runDimension.group().reduceSum(function (d) { return d.Age_19_Under; }); 
var age19To64Group = runDimension.group().reduceSum(function (d) { return d.Age_19_64; }); 
var age65To84Group = runDimension.group().reduceSum(function (d) { return d.Age_65_84; }); 
var age85AndOverGroup = runDimension.group().reduceSum(function (d) { return d.Age_85_and_Over; }); 

lineChart1.width(1160) 
    .height(250) 
    .margins({ top: 10, right: 10, bottom: 20, left: 40 }) 
    .dimension(runDimension) 
    .transitionDuration(500) 
    .elasticY(true) 
    .brushOn(false) 
    .valueAccessor(function (d) { 
     return d.value; 
    }) 
    .title(function (d) { 
     return "\nNumber of Povetry: " + d.key; 

    }) 
    .x(d3.scale.linear().domain([4, 27])) 
    .compose([ 
     dc.lineChart(lineChart1).group(age19UnderGroup), 
     dc.lineChart(lineChart1).group(age19To64Group), 
     dc.lineChart(lineChart1).group(age65To84Group), 
     dc.lineChart(lineChart1).group(age85AndOverGroup) 
    ]) 
; 

dc.renderAll();

Notate come ho inserito una proprietà "Run" nei dati per creare un valore unificante per la dimensione. Ho scelto gli interi perché sono semplici, ma i valori potrebbero anche essere date, nomi di esperimenti o qualsiasi cosa crei una riga nei dati. I valori nel set di dati vengono visualizzati direttamente nel grafico perché la mia scelta di dimensione ha tutti i valori univoci. Se ci fossero stati valori ripetuti (ad esempio una decima riga con Measurement = 9 e un valore di 10 per ogni fascia di età), tutti i dati per i valori di una determinata dimensione sarebbero stati sommati insieme dal metodo .reduceSum() (quindi, un valore di 34,8 per 9 sull'asse X).

fonte

2014-04-20 20:03:28

comporre non funziona per me .. qualche idea perché. Ricevo la funzione sconosciuta –

@Dilip - Difficile dire senza vedere il codice reale. Una cosa generale che posso dire è che se si stanno concatenando metodi come nell'esempio precedente, l'ordine può avere importanza perché, come ricordo, i metodi non restituiscono tutti lo stesso identico tipo di oggetto. È facile cadere nella trappola di pensare che '' '' 'espressione()' viene richiamato su 'lineChart1' quando viene effettivamente chiamato su qualunque cosa viene restituito dalla chiamata a' .x() '. –

Se si verifica un errore durante la composizione non è una funzione, assicurarsi di impostare il tipo di grafico originale su compositeChart. (ad esempio var lineChart1 = dc.compositeChart ("# chart-row-Poverty1");) Quindi è possibile definire il tipo di grafico individuale per ogni argomento che si deve comporre. –

come creare un grafico a più righe usando dc.js

risposta

Problemi correlati