Side rulle diagrammer med D3 som du faktisk vet hva du gjør

0
23

Kart! Mine minst favoritt emne i tillegg til samfunnsfag. Men du vil ikke komme langt i denne bransjen før noen ønsker du å lage et diagram. Jeg vet ikke hva det er med folk og diagrammer, men tilsynelatende vi kan ikke ha en sivilisasjon uten et stolpediagram som viser Maggie ‘ s salg for siste måned, så for ALL del — la oss lage et diagram.

Ja, jeg vet dette er ikke hvordan du vil vise disse dataene. Jeg prøver å gjøre et poeng her.

For å forberede deg for det forestående “OMG jeg er nødt til å lage et diagram” eksistensiell krise som, mye som død, vi liker å late som aldri kommer til å skje, jeg skal vise deg hvordan du skal hånd-roll din egen scatter plott grafen med D3.js. Denne artikkelen er tung på koden side, og din første blikk på den ferdige koden er å gå å utløse din “fight or flight” – reaksjon. Men hvis du kan komme deg gjennom denne artikkelen, jeg tror du vil bli overrasket over hvor godt du forstår D3 og hvor sikker du er på at du kan gå til å gjøre noen andre diagram som du heller ikke gjøre.

Før vi gjør det, skjønt, det er viktig å snakke om HVORFOR du ville ønske å rulle din egen figur.

Bygningen kontra å Kjøpe

Når du har oversikten, vil du sannsynligvis strekke seg etter noe som kommer “ut av boksen”. Du ville aldri noensinne side-rulle kartet. På samme måte som du aldri ville sitte rundt og knuse tommelen med en hammer; det er ganske smertefullt, og det er mer produktive måter å bruke hammer. Listene er ganske komplisert brukergrensesnitt-elementer. Det er ikke som du center-justere noen tekst i en div her. Bibliotekene som Chart.js eller Kendo UI har pre-laget diagrammer som du bare kan peke på dine data. Utviklerne har brukt tusenvis av timer på å perfeksjonere disse diagrammene Du aldri noensinne ville bygge en av disse selv.

Eller ville du?

Kartlegging biblioteker er fantastisk, men de gjør innføre en viss grad av restriksjoner på deg…og noen ganger er de faktisk gjøre det vanskeligere å gjøre selv enkle ting. Som Peter Parker ‘ s bestefar sa før han over handlet sin døende scene i Spiderman, “Med stor kartlegging biblioteker, kommer stor trade-off i fleksibilitet.”

Toby aldri burde ha vært Spiderman. FITE MEG.

Dette er akkurat det scenariet jeg befinner meg i når min kollega, Jasmine Greenaway, og jeg bestemte meg for at vi kunne bruke diagrammer for å finne ut hvem @horse_js er. I tilfelle du ikke allerede er en stor @horse_js fan, det er en parodi konto som sitater folk ut av kontekst. Det er ekstremt fantastisk.

Vi dro hver tweet fra @horse_js for de siste to årene. Vi fast at i et Kosmos DB-database og deretter opprettet en Azure-Funksjonen endepunkt å eksponere data.

Og så, med en synkende følelse i våre mager, vi innså at vi trengte et diagram. Vi ønsket å være i stand til å se hvilke data som så ut som det skjedde over tid. Vi tenkte å være i stand til å se data visuelt i en tidsserie Analyse kan hjelpe oss identifisere noe mønster eller få litt innsikt om konto. Og ja, det gjorde det.

Vi kartlagt hver tweet som @horse_js har skrevet i de siste to årene. Når vi ser på som data på et scatter plot, det ser ut som dette:

Se Penn wYxYNd av Burke Holland (@burkeholland) på CodePen.

Forøvrig, dette er ting vi kommer til å bygge på i denne artikkelen.

Hver tweet vises med dato på x-aksen, og den tiden av døgnet på y. Jeg trodde dette ville være enkelt å gjøre med en kartlegging bibliotek, men alle de jeg prøvde var ikke egentlig rustet til å håndtere situasjonen på en dato på tvers av x-og en gang på y. Også jeg kunne ikke finne noen eksempler på at folk gjør det online. Jeg bryter ny mark her? Jeg er en visualisering av data pioneer?

Sannsynligvis. Definitivt.

Så, la oss ta en titt på hvordan vi kan bygge dette fantastisk scatter-plot med D3.

Komme i gang med D3

Her er saken om D3: det ser ganske forferdelig. Jeg vil bare få det ut, det så vi kan slutte å late som D3-koden er morsomt å se på. Det er det ikke. Det er ingen skam i å si det. Nå som vi har invitert som elefanten i rommet til tea party, tillater meg å antyde at selv om D3-koden ser ganske ille, det er faktisk ikke. Det er bare en masse av det.

For å komme i gang, trenger vi D3. Jeg bruker CDN inkluderer for D3 5 for disse eksemplene. Jeg er også med Øyeblikk til å jobbe med datoer, som vi kommer til senere.

https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js

D3 fungerer med SVG. Det er hva det gjør. Det er i utgangspunktet gifter SVG-filer med data og gir noen praktiske pre-bygget mekanismer for visualisering it — ting som akse. Eller Axees? Axises? Uansett flertall av “aksen” er. Men for nå, bare vet at det er som jQuery for SVG.

Så, er det første vi trenger er en SVG-element å jobbe med.

<svg id=”kart”></svg>

OK. Nå er vi klar for å starte D3 ‘ ing vår vei til data visualisering skjensel. Det første vi skal gjøre er å gjøre våre punktplott en klasse. Vi ønsker å gjøre denne ting så generelt som mulig, slik at vi kan bruke det på nytt, med andre sett av data. Vi vil starte med en konstruktør som tar to parametere. Den første vil være i klassen eller id for elementet vi er i ferd med å jobbe med (i vårt tilfelle det er, #diagram) og den andre er et objekt som vil tillate oss å passere i alle parametere som kan variere fra kart til kart (f.eks. data, bredde, osv.).

klasse ScatterPlot {
constructor(el), options (valg) {
}
}

Diagrammet kode i seg selv vil gå i en render funksjon, og det vil også kreve data set vi jobber med å bli passert.

klasse ScatterPlot {
constructor(el), options (valg) {
dette.render(valg.data);
}

render(data) {
}
}

Det første vi skal gjøre i vår render metoden er satt noen størrelse verdier og marginer for vår figur.

klasse ScatterPlot {
constructor(el), options (valg) {
dette.data = valg.data || [];
dette.bredde = valg.bredde || 500;
dette.høyde = valg.høyde || 400;

dette.render();
}

render() {
la margin = { top: 20, høyre: 20, nederst: 50, venstre: 60 };
la høyde = dette.høyde || 400;
la bredde = (denne.høyde || 400) – margin.topp – margin.nederst;
la data = dette.data;
}
}

Jeg nevnte at D3 er som jQuery for SVG, og jeg tror at analogien pinner. Så du kan se hva jeg mener, la oss lage en enkel SVG-tegning med D3.

For det første, du trenger for å velge den DOM-element som SVG-er kommer til å jobbe med. Når du gjør det, kan du begynne å legge til ting og sette sine attributter. D3, akkurat som jQuery, er bygget på konseptet av lenker, slik at hver funksjon du ringe returnerer en instans av elementet som du kalte det. På denne måten kan du holde på å legge til elementer og attributter til kuene kommer hjem.

For eksempel, la oss si at vi ønsket å tegne et kvadrat. Med D3, kan vi tegne et rektangel (SVG-det er en rektangulær), legge til de nødvendige egenskaper underveis.

Se Penn zmdpJZ av Burke Holland (@burkeholland) på CodePen.

NÅ. På dette tidspunktet vil du si, “Men jeg vet ikke SVG.” Vel, jeg ikke heller. Men jeg vet hvordan Google og det er ingen mangel på artikler om hvordan å gjøre ganske mye annet i SVG.

Så, hvordan får vi fra et rektangel til en figur? Dette er hvor D3 blir langt mer enn bare “jQuery for tegning.”

Først, la oss lage et diagram. Vi vil starte med et tomt SVG element i vår markering. Vi bruker D3 for å velge at tom svg-element (kalt #diagram) og definerer sin bredde og høyde samt marginer.

// opprette kart
dette.figur = d3.velg(denne.el)
.attr(‘bredde’, bredde + margin.høyre + margin.venstre)
.attr(‘høyde’, høyde + margin.topp + margin.nederst);

Og her er hva det ser ut som:

Se Penn EdpOqy av Burke Holland (@burkeholland) på CodePen.

FANTASTISK! Ingenting der. Hvis du åpner dev verktøy, vil du se at det er noe der. Det er bare en tom noe. Sånn som min sjel.

Det er din figur! La oss gå om å sette noen data i det. For at vi kommer til å trenge å definere vår x-og y-aksen.

Det er ganske lett i D3. Du kaller axisBottom metode. Her, jeg er også formatering avmerkingene med riktig dato format vises.

la xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b%y”));

Jeg er også passerer en “x” – parameteren til axisBottom metode. Hva er det? Som er kalt en skala.

D3 skalaer

D3 har noe som kalles vekter. Skalaer er bare en måte å fortelle D3 hvor du skal plassere dine data og D3 har mange forskjellige typer vekter. Den vanligste typen ville være lineær — som en skala av data fra 1 til 10. Den inneholder også en skala bare for tidsserier av data som er hva vi trenger for denne oversikten. Vi kan bruke scaleTime metode for å definere en “skala” for vår x-aksen.

// definerer x-aksen
la minDateValue = d3.min(data, d => {
tilbake new Dato(for øyeblikket(d.created_at).format (MM-DD-ÅÅÅÅ’));
});

la maxDateValue = d3.max(data, d => {
tilbake new Dato(for øyeblikket(d.created_at).format (MM-DD-ÅÅÅÅ’));
});

la x = d3.scaleTime()
.domene([minDateValue, maxDateValue])
.rekkevidde([0, width]);

la xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b%y”));

D3 skalaer bruke noen terminologi som er litt skremmende. Det er to sentrale begreper for å forstå her: domener og områder.

  • Domene: utvalget av mulige verdier i datasettet. I mitt tilfelle, jeg får minimum dato fra tabellen, og den maksimale dato fra tabellen. Alle andre verdier i datasettet som faller mellom disse to endepunktene — så de som er “endepunkter” definere mitt domene.
  • Område: området over å vise data set. Med andre ord, hvordan spredt ønsker du dine data? I vårt tilfelle ønsker vi det begrenset til bredden av tabellen, så vi bare pass bredde som andre parameter. Hvis vi passerte en verdi som, si, 10000, våre data ut over 10 000 piksler bred. Hvis vi passerte noen verdi i det hele tatt, det ville tegne alle data på toppen av seg selv alle på venstre side av diagrammet… som på følgende bilde.

Y-aksen er bygget på samme måte. Bare for det, vi kommer til å bli formatering våre data er for tiden, ikke dato.

// definerer y-aksen
la minTimeValue = new Date().setHours(0, 0, 0, 0);
la maxTimeValue = new Date().setHours(23, 59, 59, 999);

la y = d3.scaleTime()
.domene([minTimeValue, maxTimeValue])
.nice(d3.timeDay)
.rekkevidde([høyde, 0]);

la y-aksen = d3.axisLeft(y).flått(24).tickFormat(d3.timeFormat(‘%H:%M”));

Den ekstra fin metode samtale på y-skala forteller y-aksen for å formatere denne gangen skala pent. Hvis vi ikke tar med den, det vil ikke ha en etikett for topp-mest hake av på venstre side fordi det bare går til 11:59:59 PM, snarere enn helt til midnatt. Det er en egenskap, men vi lager ikke dritt her. Vi trenger etiketter på alle våre flått.

Nå er vi klar til å trekke våre aksen i diagrammet. Husk at figuren vår har noen marginer på det. For å kunne plassere elementer på innsiden av figuren vår, vi kommer til å lage en gruppering (g) element og sette sin bredde og høyde. Så, vi kan tegne alle våre elementer i denne containeren.

la main = dette.diagrammet.append(‘g’)
.attr(‘transform’, `oversette(${margin.venstre}, ${margin.topp})`)
.attr(‘bredde’, bredde)
.attr(‘høyde’, høyde)
.attr(‘class’, ‘main’);

Vi tegner våre container, regnskap for margin og sette sin bredde og høyde. Ja. Jeg vet. Det er kjedelig. Men slik er tilstanden av å legge ting ut i en nettleser. Når var siste gang du prøvde å horisontalt og vertikalt center innholdet i en div? Ja, ikke så kjempebra før Flexbox og CSS Rutenett.

Nå, vi kan trekke våre x-aksen:

main.diagrammet.append(‘g’)
.attr(‘transform’, `oversette(0, ${høyde})`)
.attr(‘class’, ‘main aksen dato’)
.ring(xAxis);

Vi gjør en container element, og deretter “ring” xAxis som vi definerte tidligere. D3 trekker ting begynner øverst til venstre, så vi bruker forvandle attributtet til å motregne x-aksen fra toppen slik at den vises på bunnen. Hvis vi ikke gjør det, vår diagram ville se ut som dette…

Ved å angi forvandle, som vi skyver den til bunnen. Nå for y-aksen:

main.append(‘g’)
.attr(‘class’, ‘main aksen dato’)
.ring(y-aksen);

La oss se på all den koden vi har så langt, og så får vi se hva dette utganger til skjermen.

klasse ScatterPlot {
constructor(el), options (valg) {
dette.el = el;

hvis du (valg) {
dette.data = valg.data || [];
dette.tooltip = valg.verktøytips;
dette.pointClass = valg.pointClass || “;

dette.data = valg.data || [];
dette.bredde = valg.bredde || 500;
dette.høyde = valg.høyde || 400;

dette.render();
}
}

render() {
la margin = { top: 20, høyre: 15, nederst: 60, venstre: 60 };
la høyde = dette.høyde || 400;
la bredde = (denne.bredde || 500) – margin.i høyre marg.til venstre;
la data = dette.data;

// opprette kart
la diagram = d3.velg(denne.el)
.attr(‘bredde’, bredde + margin.høyre + margin.venstre)
.attr(‘høyde’, høyde + margin.topp + margin.nederst);

// definerer x-aksen
la minDateValue = d3.min(data, d => {
tilbake new Dato(for øyeblikket(d.created_at).format (MM-DD-ÅÅÅÅ’));
});

la maxDateValue = d3.max(data, d => {
tilbake new Dato(for øyeblikket(d.created_at).format (MM-DD-ÅÅÅÅ’));
});

la x = d3.scaleTime()
.domene([minDateValue, maxDateValue])
.rekkevidde([0, width]);

la xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b%y”));

// definerer y-aksen
la minTimeValue = new Date().setHours(0, 0, 0, 0);
la maxTimeValue = new Date().setHours(23, 59, 59, 999);

la y = d3.scaleTime()
.domene([minTimeValue, maxTimeValue])
.nice(d3.timeDay)
.rekkevidde([høyde, 0]);

la y-aksen = d3.axisLeft(y).flått(24).tickFormat(d3.timeFormat(‘%H:%M”));

// definerer innholdet vårt område
la main = diagram.append(‘g’)
.attr(‘transform’, `oversette(${margin.venstre}, ${margin.topp})`)
.attr(‘bredde’, bredde)
.attr(‘høyde’, høyde)
.attr(‘class’, ‘main’);

// trekke x-aksen
main.append(‘g’)
.attr(‘transform’, `oversette(0, ${høyde})`)
.attr(‘class’, ‘main aksen dato’)
.ring(xAxis);

// draw-y-aksen
main.append(‘g’)
.attr(‘class’, ‘main aksen dato’)
.ring(y-aksen);
}
}

Se Penn oaeybM av Burke Holland (@burkeholland) på CodePen.

Vi har fått et diagram! Ring dine venner! Samtale med foreldrene dine! UMULIG ER INGENTING!

Aksen etiketter

La oss nå legge til noen diagram etiketter. Nå har du kanskje funnet ut at når det kommer til D3, du gjør det ganske mye alt for hånd. Legge til aksen etiketter er ikke annerledes. Alle vi kommer til å gjøre er å legge en svg-tekst-element, og det er verdi og posisjon. Det er alt.
​​
For x-aksen, kan vi legge til tekst etikett og plasser den bruker oversette. Vi satte det er x-posisjonen til midten (bredde / 2) av kartet. Deretter kan vi trekke den venstre margen for å sørge for at vi er sentrert under bare diagrammet for. Jeg er også å bruke en CSS-klasse for akse-etiketten som har en tekst-anker: midten for å sørge for at vår tekst er som stammer fra midten av tekst-element.
​​

// text label for x-aksen
diagrammet.append(“tekst”)
.attr(“transform”,
“translate(” + ((bredde/2) + margin.venstre side) + ” ,” +
(høyde + margin.topp + margin.nederst) + “)”)
.attr(‘class’, ‘axis-label’)
.tekst(“Dato For Tweet”);

​​
Y-aksen er den samme konseptet — en tekst-element som vi manuelt posisjon. Dette er posisjonert med absolutt x-og y-attributter. Dette er fordi våre forvandle brukes til å rotere etiketten, så vi bruker x-og y-egenskaper til å plassere det.
​​
Husk: Når du rotere et element, x og y rotere med det. Det betyr at når teksten elementet er på sin side som det er her, y nå skyver den venstre og høyre, og x presser den opp og ned. Forvirret ennå? Det er OK, du er i flott selskap.
​​

// text label for y-aksen
diagrammet.append(“tekst”)
.attr(“transform”, “roter(-90)”)
.attr(“y”, 10)
.attr(“x”,0 – ((høyde / 2) + (margin.topp + margin.nederst))
.attr(‘class’, ‘axis-label’)
.tekst(“Time of Tweet – CST (-6)”);

​​
​​

Se Penn oaeybM av Burke Holland (@burkeholland) på CodePen.

Nå, som jeg sa — det er MYE av koden. Det er unektelig. Men det er ikke super kompleks kode. Det er som LEGO: LEGO-klosser er enkelt, men du kan bygge ganske komplekse ting med dem. Det jeg prøver å si er at det er et svært avansert interlocking murstein system.

Nå som vi har et diagram, er det på tide å trekke våre data.
​​

Tegning av data poeng

Denne er ganske grei. Som vanlig kan vi lage en gruppering å sette alle våre sirkler. Da vi loop over hvert element i våre data og tegne en SVG-sirkel. Vi har å angi posisjonen til hver sirkel (cx og cy) basert på gjeldende data elementet dato og tid verdi. Til slutt, vi satt sin radius (r), som styrer hvor stor sirkelen er.

la sirkler = main.append(‘g’);

data.forEach(item => {
sirkler.append(‘svg:circle”)
.attr(‘class’, dette.pointClass)
.attr(‘cx’, d => {
tilbake x(ny Dato(element.created_at));
})
.attr(‘cy’, d => {
la idag = new Date();
la tiden = new Dato(element.created_at);
tilbake y(i dag.setHours(tid.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()));
})
.attr(‘r’, 5);
});

Når vi setter cx og cy verdier, må vi bruke skalaen (x eller y) som vi definerte tidligere. Vi passerer skala dato eller klokkeslett for verdien av det aktuelle data element og omfanget vil gi oss tilbake i riktig posisjon på kartet for dette elementet.

Og, min gode venn, har vi en ekte diagram med noen reelle dataene i den.

Se Penn VEzdrR av Burke Holland (@burkeholland) på CodePen.

Til slutt, la oss legge til noen animasjon til denne oversikten. D3 har noen fine lettelser funksjoner som vi kan bruke her. Hva vi gjør er å definere en overgang på hver og en av våre sirkler. I utgangspunktet, noe som kommer etter overgangen metoden blir animerte. Siden D3 trekker alt fra øverst til venstre, kan vi sette x-posisjon først og animer y. Resultatet er prikkene ser ut som de er å falle på plass. Vi kan bruke D3 er flott easeBounce lettelser funksjon for å lage disse prikkene sprette når de faller.

data.forEach(item => {
sirkler.append(‘svg:circle”)
.attr(‘class’, dette.pointClass)
.attr(‘cx’, d => {
tilbake x(ny Dato(element.created_at));
})
.overgang()
.varighet(Matematikk.gulv(Matematikk.tilfeldig() * (3000-2000) + 1000))
.enkel(d3.easeBounce)
.attr(‘cy’, d => {
la idag = new Date();
la tiden = new Dato(element.created_at);
tilbake y(i dag.setHours(tid.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()));
})
.attr(‘r’, 5);

OK, så en gang til, alle sammen nå…

klasse ScatterPlot {
constructor(el), options (valg) {
dette.el = el;
dette.data = valg.data || [];
dette.bredde = valg.bredde || 960;
dette.høyde = valg.høyde || 500;

dette.render();
}

render() {
la margin = { top: 20, høyre: 20, nederst: 50, venstre: 60 };
la høyde = dette.høyde – margin.nedre marg.topp;
la bredde = dette.bredde – margin.i høyre marg.til venstre;
la data = dette.data;

// opprette kart
la diagram = d3.velg(denne.el)
.attr(‘bredde’, bredde + margin.høyre + margin.venstre)
.attr(‘høyde’, høyde + margin.topp + margin.nederst);

// definerer x-aksen
la minDateValue = d3.min(data, d => {
tilbake new Dato(for øyeblikket(d.created_at).format (MM-DD-ÅÅÅÅ’));
});

la maxDateValue = d3.max(data, d => {
tilbake new Dato(for øyeblikket(d.created_at).format (MM-DD-ÅÅÅÅ’));
});

la x = d3.scaleTime()
.domene([minDateValue, maxDateValue])
.rekkevidde([0, width]);

la xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b%y”));

// definerer y-aksen
la minTimeValue = new Date().setHours(0, 0, 0, 0);
la maxTimeValue = new Date().setHours(23, 59, 59, 999);

la y = d3.scaleTime()
.domene([minTimeValue, maxTimeValue])
.nice(d3.timeDay)
.rekkevidde([høyde, 0]);

la y-aksen = d3.axisLeft(y).flått(24).tickFormat(d3.timeFormat(‘%H:%M”));

// definerer innholdet vårt område
la main = diagram.append(‘g’)
.attr(‘transform’, `oversette(${margin.venstre}, ${margin.topp})`)
.attr(‘bredde’, bredde)
.attr(‘høyde’, høyde)
.attr(‘class’, ‘main’);

// trekke x-aksen
main.append(‘g’)
.attr(‘transform’, `oversette(0, ${høyde})`)
.attr(‘class’, ‘main aksen dato’)
.ring(xAxis);

// draw-y-aksen
main.append(‘g’)
.attr(‘class’, ‘main aksen dato’)
.ring(y-aksen);

// text label for y-aksen
diagrammet.append(“tekst”)
.attr(“transform”, “roter(-90)”)
.attr(“y”, 10)
.attr(“x”,0 – ((høyde / 2) + margin.topp + margin.nederst)
.attr(‘class’, ‘axis-label’)
.tekst(“Time of Tweet – CST (-6)”);

// tegne data poeng
la sirkler = main.append(‘g’);

data.forEach(item => {
sirkler.append(‘svg:circle”)
.attr(‘class’, dette.pointClass)
.attr(‘cx’, d => {
tilbake x(ny Dato(element.created_at));
})
.overgang()
.varighet(Matematikk.gulv(Matematikk.tilfeldig() * (3000-2000) + 1000))
.enkel(d3.easeBounce)
.attr(‘cy’, d => {
la idag = new Date();
la tiden = new Dato(element.created_at);
tilbake y(i dag.setHours(tid.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()));
})
.attr(‘r’, 5);
});
}
}

Vi kan nå gjøre en samtale for noen data, og gjengi dette diagrammet…

// få data
la data = hent(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/4548/time-series.json’).deretter(d => d.json()).deretter(data => {

// massasje data litt for å få det i riktig format
la horseData = data.kart(item => {
tilbake varen.hest;
})

// opprette kart
la diagram = new ScatterPlot(‘#diagram’, {
data: horseData,
bredde: 960
});
});

Og her er hele greia, komplett med en oppfordring til våre Azure Funksjon som returnerer data fra Kosmos DB. Det er MASSEVIS av data, så vær tålmodig mens vi tygge opp alle dine båndbredde.

Se Penn GYvGep av Burke Holland (@burkeholland) på CodePen.

Hvis du har gjort det så langt, jeg…vel, jeg er imponert. D3 er ikke en enkel ting å komme inn. Det rett og slett ikke ser ut som det kommer til å bli noe moro. MEN, ingen tommelen ble knust her, og vi har nå full kontroll i dette diagrammet. Vi kan gjøre hva vi vil med det.

Sjekk ut noen av disse ekstra ressurser for D3, og lykke til med din figur. Du kan gjøre det! Eller du ikke kan. Uansett, noen har til å lage et diagram, og det kan like godt være deg.

For data og API:

  • Komme i gang med Kosmos DB
  • Komme I Gang Med Azure Funksjoner

Mer på D3:

  • La oss lage et stolpediagram
  • Enkel D3 verktøytips
  • Å bygge interaktive bar diagrammer med D3