Crearea unei diagrame circulare simple folosind dc.js (Programare, Javascript, D3.Js, Vizualizare De Date, Dc.Js, Crossfilter)

user5279393 a intrebat.

Încerc să creez un număr de diagrame circulare interactive folosind dc.js pentru a reprezenta statisticile unei echipe de baschet. Un grafic cu plăcintă ar avea punctele fiecărui jucător, altul salariul lor, etc., reprezentate ca o parte din totalul echipei.

Nu prea înțeleg cum să folosesc crossfilter-ul. .dimension() și .group() . Și reduceSum() chiar trebuie să fie acolo? Tot ce obțin este un grafic cu plăcintă gol. Alte exemple pe care le-am văzut au date structurate diferit și nu se aplică în această situație.

Iată o parte din codul relevant pentru o diagramă circulară a salariilor:

var data = [
{"player":"boomhauer", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"bill", "rebound_avg":4.2, "salary":3000, "point_avg":20},
{"player":"hank", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"dale", "rebound_avg":16.1, "salary":6000, "point_avg":4},
];

var ndx = crossfilter(data);
var playerDim = ndx.dimension(function(d) {return d.player;});  

var salaryPerPlayer = playerDim.group().reduceSum(function(d) {return d.salary;});

var salaryGroupPerPlayer = salaryPerPlayer.group(function(d) {return d.player; });

var salaryRingChart = dc.pieChart("#chart-ring-salary");

salaryRingChart
        .width(200)
        .height(200)
        .slicesCap(17)
        .innerRadius(10)
        .dimension(salaryPerPlayer)
        .group(salaryGroupPerPlayer)
        .renderLabel(true);


dc.renderAll();

Tot ce obțin este un grafic circular gol.

Vă mulțumesc pentru ajutor!

1 răspunsuri
Ethan Jewett

Cred că trebuie doar să pierdeți salaryGroupPerPlayer:

var data = [
{"player":"boomhauer", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"bill", "rebound_avg":4.2, "salary":3000, "point_avg":20},
{"player":"hank", "rebound_avg":12.1, "salary":4000, "point_avg":15},
{"player":"dale", "rebound_avg":16.1, "salary":6000, "point_avg":4},
];

var ndx = crossfilter(data);
var playerDim = ndx.dimension(function(d) {return d.player;});  

var salaryPerPlayer = playerDim.group().reduceSum(function(d) {return d.salary;});

var salaryRingChart = dc.pieChart("#chart-ring-salary");

salaryRingChart
        .width(200)
        .height(200)
        .slicesCap(17)
        .innerRadius(10)
        .dimension(salaryPerPlayer)
        .group(salaryPerPlayer)
        .renderLabel(true);


dc.renderAll();

Aici este un tutorial bun Crossfilter: http://blog.rusty.io/2012/09/17/crossfilter-tutorial/

ReduceSum este necesar pentru că agregarea implicită a unui grup în Crossfilter este o numărătoare. Aceasta ar număra doar numărul de înregistrări pentru fiecare jucător, care este 1. Deci, nu este foarte interesant!

Totuși, m-aș întreba de ce folosiți Crossfilter. Datele sunt toate preagregate și veți avea doar o singură dimensiune (jucător). Filtrarea pe aceste diagrame nu va avea niciun sens. Crossfilter este conceput mai mult pentru scenarii în care aveți date dezagregate (poate 1 înregistrare pentru fiecare jucător din fiecare meci, sau chiar date de joc după joc) și doriți să agregați datele și să filtrați în mod dinamic pe diferite dimensiuni.

Comentarii

  • Vă mulțumim! Aveți dreptate… cred că nu am nevoie de crossfilter pentru acest tip de set de date. Îmi plac piegramele din dc.js, așa că poate voi găsi o modalitate de a le crea fără a folosi crossfilter. Scăpând de salaryGroupPerPlayer, tot rămân cu un piechart gol. Cred că va trebui să mă concentrez cu adevărat asupra crossfilter, dc.js și mapreduce înainte de a mai încerca o dată. Mulțumesc pentru tutorial, voi trece prin el. –  > Por user5279393.
  • dc.js așteaptă doar obiecte cu anumite proprietăți/funcții specifice care furnizează datele care urmează să fie transmise metodelor sale dimension() și group(). IIRC, obiectele de dimensiune au nevoie de filter, , filterExact, , filterRange, , și filterFunction în timp ce obiectele de grup au nevoie de o metodă all (sau, uneori, o metodă top). Dacă le treceți doar obiecte goale și apoi consultați consola de erori, aceasta vă va spune ce metodă lipsește. Mult succes! –  > Por Ethan Jewett.
  • Nu cred că este foarte rău să folosești crossfilter atunci când nu este necesar. S-ar putea să fie puțin mai lent, dar probabil că nu veți observa acest lucru. Cea mai mare parte a costurilor de vizualizare sunt elementele DOM, nu calculele. Deci, poate că este mai ușor să îl folosiți până când aveți un motiv să nu o faceți. –  > Por Gordon.
  • Vă înțeleg punctul de vedere. Dar există probleme structurale pe care le vedeți în acest cod? Încă produce un grafic cu plăcintă gol. Creează o vizualizare, deci trebuie să fim pe drumul cel bun. –  > Por user5279393.
  • @user527939393 Aș fi de acord cu Gordon că utilizarea Crossfilter nu va face rău. Deși API-ul său și staful-ness-ul său poate fi confuz pe cont propriu. În ceea ce privește vizualizarea ta – nu văd nimic în mod special greșit. Poți să creezi un jsFiddle te rog și să ne arăți problema? –  > Por Ethan Jewett.