Hand roll grafieken met D3 als je niet weet wat je aan het doen bent

0
38

Grafieken! Mijn minst favoriete onderwerp naast Sociale Studies. Maar je zult niet ver komen in deze sector, voordat iemand wil dat je een grafiek maken. Ik weet niet wat het is met mensen en grafieken, maar blijkbaar kunnen we geen beschaving zonder een bar grafiek met Maggie ‘ s verkoop voor vorige maand dus — laten we een grafiek maken.

Ja, ik weet het dit is niet hoe je zou weergave van deze gegevens. Ik ga proberen om een punt te maken hier.

Om je voor te bereiden die dreigende “OMG ik ga te hebben om een diagram” existentiële crisis die, net als de dood, zoals we doen alsof het nooit gaat gebeuren, ik ga u tonen hoe om met de hand uw eigen rol spreidingsdiagram grafiek met D3.js. Dit artikel is zwaar op de code zijde en uw eerste blik op de afgewerkte code zal leiden tot je “vecht of vlucht” reactie. Maar als je door dit artikel, ik denk dat u zult verrast zijn hoe goed u begrijpt D3 en hoe zeker bent u dat u kunt gaan een aantal andere grafiek die je liever niet zou willen maken.

Voordat we dat doen, hoewel, het is belangrijk om te praten over WAAROM je zou willen om uw eigen roll-diagram.

Gebouw versus Kopen

Als je naar de grafiek, dan zult u waarschijnlijk bereiken voor iets dat komt “uit de doos”. Zou je nooit met de hand rollen van een grafiek. Op dezelfde manier zou je nooit zitten en sla je duim met een hamer; het is nogal pijnlijk en er zijn meer productieve manieren om het gebruik van uw hamer. Grafieken zijn een vrij complexe user interface items. Het is niet alsof je midden uitlijnen van tekst in een < div > hier. Bibliotheken als Chart.js of Kendo UI pre-made grafieken die u kunt gewoon bij uw gegevens. Ontwikkelaars hebben duizenden uren doorgebracht met het perfectioneren van deze grafieken zou Je nooit bouwen aan een van deze zelf.

Of zou je?

In kaart brengen bibliotheken zijn fantastisch, maar ze doen het opleggen van een bepaalde hoeveelheid beperkingen op u…en soms zijn ze eigenlijk maakt het moeilijker om te doen, zelfs de simpele dingen. Als Peter Parker ‘s grootvader zei, voordat hij over-geacteerd zijn stervende scène in Spiderman,’ Met grote kaart brengen van bibliotheken, komt grote trade-off tussen flexibiliteit.”

Toby nooit moeten Spiderman. FITE MIJ.

Dit is precies het scenario vond ik mezelf in toen mijn collega, Jasmijn Greenaway en ik besloten dat we konden gebruik maken van diagrammen om erachter te komen wie @horse_js is. In het geval u niet al een groot @horse_js fan, het is een parodie-account dat de citaten van mensen uit de context. Het is uiterst geweldig.

We trokken elke tweet van @horse_js voor de afgelopen twee jaar. We zitten in een Kosmos DB database en vervolgens ontstond een Azuurblauwe Functie eindpunt bloot te leggen gegevens.

En dan, met een zinkend gevoel in onze magen, realiseerden we ons dat we nodig hadden een grafiek. We wilden in staat zijn om te zien wat de gegevens die eruitzag, zoals dat voorkwam in de tijd. We dachten om de gegevens visueel in een tijdreeks Analyse kan ons helpen identificeren sommige patroon of inzicht te krijgen over het account. En inderdaad, dat gebeurde ook.

Schetsen We elke tweet die @horse_js heeft geboekt in de afgelopen twee jaar. Wanneer we kijken naar die gegevens op een scatter plot, het kijkt als dit:

Zie de Pen wYxYNd van Burke Holland (@burkeholland) op CodePen.

Toevallig is dit het ding dat we gaan bouwen in dit artikel.

Elke tweet is weergegeven met de datum op de x-as en de tijd van de dag op de y. Ik dacht dat dit makkelijk te doen met een bibliotheek in kaart brengen, maar al degenen die ik probeerde waren niet echt uitgerust voor het afhandelen van het scenario van een datum in de x-en op de y. Ook ik kon het niet vinden geen voorbeelden van mensen die het doen online. Ben ik baanbrekend hier? Ben ik een data visualisatie pionier?

Waarschijnlijk. Zeker.

Dus, laten we eens kijken hoe we kunnen bouwen van deze adembenemende scatter plot met D3.

Aan de slag met D3

Hier is het ding over D3: het ziet er verschrikkelijk mooi. Ik wil gewoon dat die er zijn, zodat we kunnen stoppen met doen alsof, zoals D3 code is leuk om naar te kijken. Dat is het niet. Er is geen schaamte bij het zeggen. Nu we uitgenodigd die olifant in de kamer naar de tea party, staat u mij toe om te insinueren dat, hoewel D3 code ziet er echt slecht is het eigenlijk niet. Er is gewoon te veel van.

Aan de slag, we moeten D3. Ik ben met behulp van de CDN zijn voor D3 5 voor deze voorbeelden. Ik ben ook met behulp Moment om te werken met de data, die we later.

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 werkt met SVG. Dat is wat het doet. In principe, trouwt SVG-gegevens en biedt een aantal handige ingebouwde mechanismen voor visualisatie — dingen zoals as. Of Axees? Axises? Wat is het meervoud van “as” is. Maar voor nu, weet gewoon dat het is zoals jQuery voor SVG.

Dus, het eerste ding dat we nodig hebben is een SVG-element om mee te werken.

<svg id=”tabel”></svg>

OK. Nu zijn we klaar om te beginnen D3 ‘ onze manier om data visualisatie schande. Het eerste wat we gaan doen is het maken van onze scatter plot van een klasse. Wij willen dit ding zo algemeen mogelijk, zodat we opnieuw kunnen gebruiken met andere sets van gegevens. We beginnen met een constructor die twee parameters heeft. De eerste zal de class of id van het element dat we willen werken met (in ons geval is dat, #chart) en de tweede is een object dat zal ons toelaten om in de parameters die kunnen variëren van de kaart-naar-diagram (bv. gegevens, breedte, enz.).

klasse ScatterPlot {
constructor(el, opties) {
}
}

De grafiek code zelf zal gaan in een render functie, die zal ook eisen dat de gegevens stellen we werken met te worden doorgegeven.

klasse ScatterPlot {
constructor(el, opties) {
deze.render(opties.data);
}

render(data) {
}
}

Het eerste wat we doen in onze render methode is het instellen van enige omvang, waarden en marges voor onze grafiek.

klasse ScatterPlot {
constructor(el, opties) {
deze.gegevens = opties.gegevens || [];
deze.breedte = opties.breedte || 500;
deze.height = opties.hoogte | breedte / lengte| 400;

deze.render();
}

render() {
laat marge = { top: 20, rechts: 20, onder 50, links: 60 };
laat height = dit.hoogte | breedte / lengte| 400;
laat width = (.hoogte | breedte / lengte| 400) – marge.top – marge.de onderkant;
laat data=.gegevens;
}
}

Ik heb gezegd dat D3 is als jQuery voor SVG, en ik denk dat de analogie stokken. Zo kunt u zien wat ik bedoel, laten we een eenvoudige SVG-afbeelding met D3.

Om te beginnen, moet u de DOM-element dat SVG gaat werken. Zodra u dat doet, kunt u beginnen met het toevoegen van dingen en hun eigenschappen. D3, net zoals jQuery, is gebouwd op het concept van het koppelen, zodat elke functie die u belt geeft een exemplaar van het element waarop u het noemde. Op deze manier kunt u houden over het toevoegen van elementen en attributen tot de koeien thuiskomen.

Bijvoorbeeld, laten we zeggen wilden we een vierkant tekenen. Met D3, kunnen we tekenen een rechthoek (SVG-dat is een rect), het toevoegen van de nodige attributen langs de weg.

Zie de Pen zmdpJZ van Burke Holland (@burkeholland) op CodePen.

NU is. Op dit punt zult u zeggen, “Maar ik weet niet SVG.” Nou, ik ook niet. Maar ik weet wel hoe Google en er is geen tekort aan artikelen over hoe het te doen vrijwel alles in SVG.

Dus, hoe krijgen we uit een rechthoek om een grafiek? Dit is waar de D3 wordt meer dan alleen “jQuery voor tekenen.”

Laten we eerst een grafiek maken. We starten met een lege SVG element in onze markup. We gebruiken D3 te selecteren die lege svg-element (de zogenaamde #diagram) en het definiëren van de breedte en in de hoogte als in de marges.

// maak de grafiek
deze.grafiek = d3.selecteer(deze.el)
.attr(‘breedte’, width + marge.rechts + marge.links)
.attr(‘hoogte’, hoogte + marge.top + marge.onder);

En hier is hoe het eruit ziet:

Zie de Pen EdpOqy van Burke Holland (@burkeholland) op CodePen.

GEWELDIG! Niets. Als u de dev tools, zult u zien dat er iets is. Het is gewoon een leeg iets. Net zoiets als mijn ziel.

Dat is je grafiek! Laten we gaan over het zetten van een aantal gegevens in. Voor dat we gaan moeten definiëren onze x-en y-as.

Dat is vrij eenvoudig in D3. U belt de axisBottom methode. Hier ben ik ook de opmaak van de maatstreepjes met de juiste datum formaat weer te geven.

laat x-as = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y”));

Ik ben ook het passeren van een “x” – parameter op de axisBottom methode. Wat is dat? Dat heet een schaal.

D3 schalen

D3 heeft iets genaamd schalen. De schalen zijn slechts een manier van het vertellen van D3 waar op basis van uw gegevens en D3 heeft veel verschillende soorten schalen. De meest voorkomende soort zou worden lineair als een schaal van gegevens van 1 tot 10. Het bevat ook een weegschaal, net voor de tijdreeks van gegevens — dat is wat we nodig hebben voor deze grafiek. We kunnen gebruik maken van de scaleTime methode voor het definiëren van een “schaal” voor onze x-as.

// definieer de x-as
laat minDateValue = d3.min(data, d => {
return new Date(moment(d.created_at).de indeling (MM-DD-YYYY’));
});

laat maxDateValue = d3.max(data, d => {
return new Date(moment(d.created_at).de indeling (MM-DD-YYYY’));
});

laat x = d3.scaleTime()
.domein([minDateValue, maxDateValue])
.bereik([0, width]);

laat x-as = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y”));

D3 schalen gebruik van bepaalde terminologie die enigszins intimiderend. Er zijn twee belangrijke concepten te begrijpen: domeinen en bereiken.

  • Domein: De range van mogelijke waarden in uw gegevens. In mijn geval, ik krijg de minimale datum van de array, en de maximale datum van de array. Elke andere waarde in de gegevensverzameling valt tussen deze twee eindpunten — zo “eindpunten” geef mijn domein.
  • Bereik: Het bereik waarin om uw gegevens ingesteld. In andere woorden, hoe ver wilt u dat uw gegevens worden? In ons geval willen we het beperkt tot de breedte van de grafiek, dus geven we de breedte als de tweede parameter. Als we langs een waarde als, laten we zeggen, 10000, onze gegevens uit meer dan 10.000 pixels breed. Als we voorbij het geen waarde zou maken van de gegevens op de top van zichzelf al op de linkerkant van de grafiek… zoals in de volgende afbeelding.

De y-as is gebouwd op dezelfde manier. Alleen voor, we gaan formatteren van onze gegevens voor de tijd, niet de datum.

// definieer de y-as
laat minTimeValue = new Date().setHours(0, 0, 0, 0);
laat maxTimeValue = new Date().setHours(23, 59, 59, 999);

laat y = d3.scaleTime()
.domein([minTimeValue, maxTimeValue])
.nice(d3.timeDay)
.bereik([hoogte, 0]);

laat yas = d3.axisLeft(y).teken(24).tickFormat(d3.timeFormat(‘%H:%M”));

De extra leuk aanroep van de methode op de y-schaal geeft de y-as om de indeling van deze tijdschaal mooi. Als we het niet zijn dat het niet hebben van een label voor de bovenste vinkje aan de linkerkant, omdat het alleen maar gaat om 11:59:59 PM, in plaats van alle de weg naar middernacht. Het is een eigenaardigheid, maar we zijn niet het maken van onzin hier. We moeten de etiketten op al onze teken.

Nu zijn we klaar om te tekenen ons as van de grafiek. Vergeet niet dat onze kaart heeft een aantal van de marges op. Om de juiste positie van de items binnen van onze kaart, we gaan maken van een groep (g) element en stelt u de breedte en hoogte. Dan kunnen we vestigen al onze elementen in die container.

laat main = dit.diagram.append(‘g’)
.attr(‘transformeren’, `vertalen(${margin.links}, ${margin.top})`)
.attr(‘breedte’, width)
.attr(‘hoogte’, hoogte)
.attr(‘class’, ‘main’);

We tekenen onze container, goed voor de marge en de breedte en hoogte in. Ja. Ik weet het. Het is saai. Maar zo is de staat van het leggen van dingen uit in een browser. Wanneer was de laatste keer dat je hebt geprobeerd om horizontaal en verticaal centreren content in een div? Ja, niet zo geweldig voorafgaand aan de Flexbox en CSS Grid.

Nu kunnen we trekken onze x-as:

main.diagram.append(‘g’)
.attr(‘transformeren’, `vertalen(0, ${hoogte})`)
.attr(‘class’, ‘hoofd-as-date’)
.bel(x-as);

We maken een container element, en vervolgens op “call” vertegenwoordigt die we eerder gedefinieerd. D3 trekt dingen beginnen aan de top-links, dus gebruiken we de transformatie kenmerk voor het compenseren van de x-as van de bovenkant, zodat het wordt weergegeven aan de onderkant. Als we dat niet doen, ons schema zou er als volgt uitzien…

Door het opgeven van de transformatie, duwen we het naar de bodem. Nu voor de y-as:

main.append(‘g’)
.attr(‘class’, ‘hoofd-as-date’)
.bel(yas);

Laten we eens kijken naar alle code die we tot nog toe hebben, en dan zullen we zien wat deze uitgangen aan op het scherm.

klasse ScatterPlot {
constructor(el, opties) {
deze.el = el;

als u op (opties) {
deze.gegevens = opties.gegevens || [];
deze.tooltip = opties.knopinfo;
deze.pointClass = opties.pointClass || “;

deze.gegevens = opties.gegevens || [];
deze.breedte = opties.breedte || 500;
deze.height = opties.hoogte | breedte / lengte| 400;

deze.render();
}
}

render() {
laat marge = { top: 20, rechts: 15, onder 60, links: 60 };
laat height = dit.hoogte | breedte / lengte| 400;
laat width = (.breedte || 500) – marge.rechter marge.links;
laat data=.gegevens;

// maak de grafiek
laat diagram = d3.selecteer(deze.el)
.attr(‘breedte’, width + marge.rechts + marge.links)
.attr(‘hoogte’, hoogte + marge.top + marge.onder);

// definieer de x-as
laat minDateValue = d3.min(data, d => {
return new Date(moment(d.created_at).de indeling (MM-DD-YYYY’));
});

laat maxDateValue = d3.max(data, d => {
return new Date(moment(d.created_at).de indeling (MM-DD-YYYY’));
});

laat x = d3.scaleTime()
.domein([minDateValue, maxDateValue])
.bereik([0, width]);

laat x-as = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y”));

// definieer de y-as
laat minTimeValue = new Date().setHours(0, 0, 0, 0);
laat maxTimeValue = new Date().setHours(23, 59, 59, 999);

laat y = d3.scaleTime()
.domein([minTimeValue, maxTimeValue])
.nice(d3.timeDay)
.bereik([hoogte, 0]);

laat yas = d3.axisLeft(y).teken(24).tickFormat(d3.timeFormat(‘%H:%M”));

// definieer de inhoud van onze omgeving
laat main = grafiek.append(‘g’)
.attr(‘transformeren’, `vertalen(${margin.links}, ${margin.top})`)
.attr(‘breedte’, width)
.attr(‘hoogte’, hoogte)
.attr(‘class’, ‘main’);

// teken de x-as
main.append(‘g’)
.attr(‘transformeren’, `vertalen(0, ${hoogte})`)
.attr(‘class’, ‘hoofd-as-date’)
.bel(x-as);

// teken y-as
main.append(‘g’)
.attr(‘class’, ‘hoofd-as-date’)
.bel(yas);
}
}

Zie de Pen oaeybM van Burke Holland (@burkeholland) op CodePen.

We hebben een grafiek! Bel je vrienden! Bel je ouders! ONMOGELIJK IS NIETS!

Aslabels

Laten we nu toevoegen grafiek labels. Door nu mag je hebben bedacht dat als het gaat om D3, doe je vrijwel alles met de hand. Het toevoegen van labels categorieas is niet anders. Alles wat we gaan doen is het toevoegen van een svg element van de tekst, het instellen van de waarde en positie. Dat is alles.
​​
Voor de x-as, kunnen we toevoegen, de tekst en de positie van het gebruik van vertalen. We stellen de x positie van het midden (width / 2) van de grafiek. Dan hebben we trek de linker marge ervoor zorgen dat we gecentreerd onder gewoon de grafiek. Ik ben ook met behulp van een CSS-klasse voor as-label dat is een text-anchor: middle ervoor zorgen dat onze tekst is afkomstig uit het midden van de tekst.
​​

// tekst voor de x-as
diagram.toevoegen(“tekst”)
.attr(“transformeren”,
“translate(” + ((width/2) + marge.links) + ” ,” +
(hoogte + marge.top + marge.onderste) + “)”)
.attr(‘class’, ‘as-label’)
.tekst(“Datum Van de Tweet”);

​​
De y-as is de concept — tekst-element dat we handmatig positie. Deze is gepositioneerd met absolute x-en y-eigenschappen. Dit is omdat onze transformatie wordt gebruikt om het label te draaien, dus gebruiken we de x-en y-eigenschappen te positioneren.
​​
Vergeet niet: als je Eenmaal draaien van een element x en y draaien. Dat betekent dat wanneer het element van de tekst op de zijkant zoals het hier is, y nu duwt naar links en rechts en x duwt het omhoog en omlaag. Nog verward? Het is OK, je bent in goed gezelschap.
​​

// tekst voor de y-as
diagram.toevoegen(“tekst”)
.attr(“transformeren”, “draaien(-90)”)
.attr(“y”, 10)
.attr(“x”, ” 0 – ((height / 2) + (marge.top + marge.onderkant))
.attr(‘class’, ‘as-label’)
.tekst(“de Tijd van de Tweet – CST (-6)”);

​​
​​

Zie de Pen oaeybM van Burke Holland (@burkeholland) op CodePen.

Nu, zoals ik al zei — het is een STUK van de code. Dat is niet te ontkennen. Maar het is niet super complexe code. Het is net als LEGO: LEGO blokken zijn eenvoudig, maar u kunt bouwen aan vrij complexe dingen met ze. Wat ik probeer te zeggen is dat het een uiterst geraffineerd in elkaar grijpende brick systeem.

Nu hebben we een diagram, het is tijd om onze gegevens.
​​

Het tekenen van de gegevenspunten

Dit is vrij eenvoudig. Zoals gewoonlijk maken we een samenwerkingsverband om al onze kringen. Dan hebben we een lus over elk item in onze data set en tekenen (SVG-cirkel. We hebben om de positie van elke cirkel (cx en cy) op basis van de huidige data-item datum en tijd-waarde. Ten slotte stellen we de straal (r), die bepaalt hoe groot de cirkel is.

laat cirkels = main.append(‘g’);

de gegevens.forEach(item => {
cirkels.append(‘svg:cirkel’)
.attr(‘class’.pointClass)
.attr(‘cx’, d => {
return x(new Date(post.created_at));
})
.attr(‘cy’, d => {
laten we vandaag = new Date();
laat time = new Date(post.created_at);
return y(vandaag.setHours(time.getHours(), tijd.getMinutes(), tijd.getSeconds(), tijd.getMilliseconds()));
})
.attr(‘r’, 5);
});

Als we de cx en cy waarden, gebruiken we de schaal (x of y) die we eerder gedefinieerd. We passeren dat de schaal van de tijd of datum van de waarde van de huidige data-item en de schaal van ons terug in de juiste positie op de grafiek voor dit item.

En, mijn goede vriend, we hebben een echte kaart met een aantal echte gegevens in.

Zie de Pen VEzdrR van Burke Holland (@burkeholland) op CodePen.

Tot slot, laten we wat animatie toevoegen aan deze kaart. D3 heeft een aantal mooie versoepeling van de functies die we kunnen gebruiken hier. Wat we doen is het definiëren van een overgang op elk van onze kringen. Kortom, alles wat komt na de overgang methode krijgt geanimeerde. Sinds D3 trekt alles uit de top-links, kunnen we de x-positie eerste en animeer de y. Het resultaat is de stippen lijken ze op zijn plaats vallen. We kunnen gebruik maken van D3 de handige easeBounce versoepeling van de functie te maken die puntjes stuiteren als ze vallen.

de gegevens.forEach(item => {
cirkels.append(‘svg:cirkel’)
.attr(‘class’.pointClass)
.attr(‘cx’, d => {
return x(new Date(post.created_at));
})
.overgang()
.duur(Math.verdieping(Math.willekeurig() * (3000-2000) + 1000))
.gemak(d3.easeBounce)
.attr(‘cy’, d => {
laten we vandaag = new Date();
laat time = new Date(post.created_at);
return y(vandaag.setHours(time.getHours(), tijd.getMinutes(), tijd.getSeconds(), tijd.getMilliseconds()));
})
.attr(‘r’, 5);

OK, nog een keer, en nu allemaal samen…

klasse ScatterPlot {
constructor(el, opties) {
deze.el = el;
deze.gegevens = opties.gegevens || [];
deze.breedte = opties.breedte || 960;
deze.height = opties.hoogte | breedte / lengte| 500;

deze.render();
}

render() {
laat marge = { top: 20, rechts: 20, onder 50, links: 60 };
laat height = dit.de hoogte van de marge.bottom – marge.top;
laat width = dit.de breedte van de marge.rechter marge.links;
laat data=.gegevens;

// maak de grafiek
laat diagram = d3.selecteer(deze.el)
.attr(‘breedte’, width + marge.rechts + marge.links)
.attr(‘hoogte’, hoogte + marge.top + marge.onder);

// definieer de x-as
laat minDateValue = d3.min(data, d => {
return new Date(moment(d.created_at).de indeling (MM-DD-YYYY’));
});

laat maxDateValue = d3.max(data, d => {
return new Date(moment(d.created_at).de indeling (MM-DD-YYYY’));
});

laat x = d3.scaleTime()
.domein([minDateValue, maxDateValue])
.bereik([0, width]);

laat x-as = d3.axisBottom(x).tickFormat(d3.timeFormat(‘%b-%y”));

// definieer de y-as
laat minTimeValue = new Date().setHours(0, 0, 0, 0);
laat maxTimeValue = new Date().setHours(23, 59, 59, 999);

laat y = d3.scaleTime()
.domein([minTimeValue, maxTimeValue])
.nice(d3.timeDay)
.bereik([hoogte, 0]);

laat yas = d3.axisLeft(y).teken(24).tickFormat(d3.timeFormat(‘%H:%M”));

// definieer de inhoud van onze omgeving
laat main = grafiek.append(‘g’)
.attr(‘transformeren’, `vertalen(${margin.links}, ${margin.top})`)
.attr(‘breedte’, width)
.attr(‘hoogte’, hoogte)
.attr(‘class’, ‘main’);

// teken de x-as
main.append(‘g’)
.attr(‘transformeren’, `vertalen(0, ${hoogte})`)
.attr(‘class’, ‘hoofd-as-date’)
.bel(x-as);

// teken y-as
main.append(‘g’)
.attr(‘class’, ‘hoofd-as-date’)
.bel(yas);

// tekst voor de y-as
diagram.toevoegen(“tekst”)
.attr(“transformeren”, “draaien(-90)”)
.attr(“y”, 10)
.attr(“x”, ” 0 – ((height / 2) + marge.top + marge.onderkant)
.attr(‘class’, ‘as-label’)
.tekst(“de Tijd van de Tweet – CST (-6)”);

// teken de gegevens punten
laat cirkels = main.append(‘g’);

de gegevens.forEach(item => {
cirkels.append(‘svg:cirkel’)
.attr(‘class’.pointClass)
.attr(‘cx’, d => {
return x(new Date(post.created_at));
})
.overgang()
.duur(Math.verdieping(Math.willekeurig() * (3000-2000) + 1000))
.gemak(d3.easeBounce)
.attr(‘cy’, d => {
laten we vandaag = new Date();
laat time = new Date(post.created_at);
return y(vandaag.setHours(time.getHours(), tijd.getMinutes(), tijd.getSeconds(), tijd.getMilliseconds()));
})
.attr(‘r’, 5);
});
}
}

We kunnen nu een oproep om een aantal gegevens en maken deze grafiek…

// voor de gegevens
laat data = fetch(‘https://s3-us-west-2.amazonaws.com/s.cdpn.io/4548/time-series.json’).vervolgens(d => d.json()).vervolgens(gegevens => {

// massage van de gegevens een beetje om het te krijgen in het juiste formaat
laat horseData = gegevens.kaart(item => {
terug item.paard;
})

// maak de grafiek
laat diagram = nieuwe ScatterPlot(‘#chart’, {
gegevens: horseData,
breedte: 960
});
});

En hier is de hele zaak, compleet met een oproep aan onze Azure Functie u de gegevens van de Kosmos DB. Het is een TON van gegevens, dus wees geduldig terwijl we kauwen-up van al uw bandbreedte.

Zie de Pen GYvGep van Burke Holland (@burkeholland) op CodePen.

Als je zover gekomen, ik…nou, ik ben onder de indruk. D3 is niet een eenvoudig ding om te krijgen. Het werkt gewoon niet kijken als het gaat om plezier. MAAR, geen duimen werden ingegooid hier, en we hebben nu de volledige controle over dit diagram. We kunnen alles doen wat we willen.

Check out enkele van deze extra middelen voor de D3, en veel succes met je kaart. Je kunt het! Of je kan het niet. Één van beide manier, iemand heeft om een grafiek maken, en het kan net zo goed worden.

Voor uw data en API:

  • Aan de slag met de Kosmos DB
  • Aan De Slag Met Azure Functies

Meer op D3:

  • Laten we een staafdiagram
  • Eenvoudige D3 knopinfo
  • Gebouw interactieve staafdiagrammen met D3