– Ingenjör på RisingStack, intresserad av JS, Golang, .NET Core.
nyligen hade vi nöjet att delta i ett maskininlärningsprojekt som involverar bibliotek som React och D3.js. Bland många uppgifter utvecklade jag några diagram som hjälper till att bearbeta resultatet av ML-modeller som naiva Bayes i form av ett linjediagram eller grupperat stapeldiagram.,
i den här artikeln vill jag presentera mina framsteg med D3.js hittills och visa den grundläggande användningen av biblioteket genom det enkla exemplet på ett stapeldiagram.
Efter att ha läst den här artikeln lär du dig hur du skapar D3.js diagram så här enkelt:
hela källkoden är tillgänglig här.
Vi på RisingStack är förtjust i JavaScript ekosystem, backend, och front-end utveckling. Personligen är jag intresserad av dem båda., På backend kan jag se igenom den underliggande affärslogiken i en applikation medan jag också har möjlighet att skapa fantastiska snygga saker på framsidan. Det är där D3.js kommer in i bilden!
Uppdatering: en andra del av min d3.js handledning serien finns också: bygga en D3.js Kalender Heatmap (för att visualisera StackOverflow Användning av Data)
Vad är D3.js?
D3.js är ett datadriven JavaScript-bibliotek för att manipulera DOM-element.
”D3 hjälper dig att få data till liv med hjälp av HTML, SVG och CSS., D3 betoning på webbstandarder ger dig den fulla kapaciteten hos moderna webbläsare utan att binda dig till en proprietär ram, som kombinerar kraftfulla visualiseringskomponenter och en datadriven inställning till DOM-manipulation.”- d3js.org
varför skulle du skapa diagram med D3.js i första hand? Varför inte bara visa en bild?
Tja, diagram är baserade på information som kommer från resurser från tredje part som kräver dynamisk visualisering under renderingstiden. SVG är också ett mycket kraftfullt verktyg som passar bra till det här applikationsfallet.,
låt oss ta en omväg för att se vilka fördelar vi kan få från att använda SVG.
fördelarna med SVG
SVG står för skalbar vektorgrafik som är tekniskt ett XML-baserat markupspråk.
det används ofta för att rita vektorgrafik, ange linjer och former eller ändra befintliga bilder. Du hittar listan över tillgängliga element här.
fördelar:
- stöds i alla större webbläsare;
- Det har DOM-gränssnitt, kräver ingen tredje part lib;
- skalbar, det kan upprätthålla hög upplösning;
- minskad storlek jämfört med andra bildformat.,
nackdelar:
- Det kan bara visa tvådimensionella bilder;
- lång inlärningskurva;
- Render kan ta lång tid med beräkningsintensiva operationer.
trots dess nackdelar är SVG ett bra verktyg för att visa ikoner, logotyper, illustrationer eller i detta fall diagram.
komma igång med D3.js
Jag plockade stapeldiagram för att komma igång eftersom det representerar ett visuellt element med låg komplexitet medan det lär ut den grundläggande tillämpningen av D3.js själv. Detta bör inte lura dig, D3 ger en stor uppsättning verktyg för att visualisera data., Kolla in dess github sida för några riktigt trevliga användningsfall!
ett stapeldiagram kan vara horisontellt eller vertikalt baserat på dess orientering. Jag kommer att gå med den vertikala en aka kolumn diagram.
på det här diagrammet kommer jag att visa de 10 mest älskade programmeringsspråken baserat på Stack overflows 2018 Developer Survey-resultat.
tid att rita!
SVG har ett koordinatsystem som startar från övre vänstra hörnet (0;0). Positiv X-axel går till höger, medan den positiva y-axeln går till botten., Således måste SVG: s höjd beaktas när det gäller att beräkna y-koordinaten för ett element.
det är tillräckligt med bakgrundskontroll, låt oss skriva lite kod!
Jag vill skapa ett diagram med 1000 pixlar bredd och 600 pixlar Höjd.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>i kodavsnittet ovan väljer jag det skapade <svg> – elementet i HTML-filen med d3 select. Denna urvalsmetod accepterar alla typer av väljarsträngar och returnerar det första matchande elementet., Använd selectAll om du vill få dem alla.
jag definierar också ett marginalvärde som ger lite extra stoppning till diagrammet. Stoppning kan användas med ett<g> element översatt av önskat värde. Från och med nu drar jag på denna grupp för att hålla ett hälsosamt avstånd från något annat innehåll på sidan.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);det är lika enkelt att lägga till attribut i ett element som att anropa metodenattr. Metodens första parameter tar ett attribut som jag vill tillämpa på det valda DOM-elementet., Den andra parametern är värdet eller en återuppringningsfunktion som returnerar värdet för det. Koden ovan flyttar helt enkelt början av diagrammet till SVG: s (60;60) position.
stöds D3.JS-inmatningsformat
för att börja rita måste jag definiera datakällan jag arbetar från. För den här handledningen använder jag en vanlig JavaScript-matris som innehåller objekt med namnet på språken och deras procentsatser men det är viktigt att nämna att D3.js stöder flera dataformat.
biblioteket har inbyggd funktionalitet för att ladda från XMLHttpRequest, .csv-filer, etc., Var och en av dessa källor kan innehålla data som D3.js kan använda, det enda viktiga är att konstruera en matris av dem. Observera att från version 5.0 använder biblioteket löften istället för återkopplingar för att ladda data vilket är en icke-bakåtkompatibel förändring.
skalning, axlar
låt oss fortsätta med diagrammets axlar. För att rita Y-axeln måste jag ställa in den lägsta och högsta värdegränsen som i detta fall är 0 och 100.
Jag arbetar med procentsatser i den här handledningen, men det finns verktygsfunktioner för andra datatyper än siffror som jag kommer att förklara senare.,
jag måste dela upp diagrammets höjd mellan dessa två värden i lika delar. För detta skapar jag något som kallas en skalningsfunktion.
const yScale = d3.scaleLinear() .range() .domain();linjär skala är den vanligaste skalningstypen. Den konverterar en kontinuerlig inmatningsdomän till ett kontinuerligt Utmatningsområde. Lägg märke till metodenrange ochdomain. Den första tar den längd som ska delas mellan gränserna för domänvärdena.,
Kom ihåg att SVG-koordinatsystemet börjar från det övre vänstra hörnet, varför intervallet tar höjden som den första parametern och inte noll.
att skapa en axel till vänster är lika enkelt som att lägga till en annan grupp och ringa d3: saxisLeft – metod med skalningsfunktionen som en parameter.
chart.append('g') .call(d3.axisLeft(yScale));fortsätt nu med x-axeln.
var medveten om att jag använder scaleBand för x-axeln som hjälper till att dela upp intervallet i band och beräkna koordinaterna och bredderna på staplarna med ytterligare stoppning.
D3.,js kan också hantera datumtyp bland många andra. scaleTime är verkligen liknar scaleLinear utom domänen är här en rad datum.
Ritstänger i D3.JS
Tänk på vilken typ av inmatning vi behöver för att rita staplarna. De representerar var och en ett värde som illustreras med enkla former, speciellt rektanglar. I nästa kodavsnitt lägger jag dem till det skapade gruppelementet.
först, iselectAll element på diagrammet som returnerar med en tom resultatuppsättning., Sedan,data funktionen berättar hur många element DOM ska uppdateras med baserat på arraylängden. enter identifierar element som saknas om datainmatningen är längre än markeringen. Detta returnerar ett nytt urval som representerar de element som behöver läggas till. Vanligtvis följs detta av en append som lägger till element i DOM.
i grund och botten berättar jag D3.js att lägga till en rektangel för varje medlem i matrisen.
nu lägger detta bara till rektanglar ovanpå varandra som inte har någon höjd eller bredd., Dessa två attribut måste beräknas och det är där skalningsfunktionerna kommer till nytta igen.
Se, jag lägger till koordinaterna för rektanglarna medattr – samtalet. Den andra parametern kan vara en återuppringning som tar 3 parametrar: den faktiska medlemmen av indata, index för det och hela ingången.
.attr(’x’, (actual, index, array) => xScale(actual.value))skalningsfunktionen returnerar koordinaten för ett visst domänvärde. Beräkning av koordinaterna är en bit tårta, tricket är med höjden på baren., Den beräknade y-koordinaten måste subtraheras från diagrammets höjd för att få rätt representation av värdet som en kolumn.
jag definierar bredden på rektanglarna med skalningsfunktionen också. scaleBand har enbandwidth – funktion som returnerar den beräknade bredden för ett element baserat på den inställda stoppning.
bra jobb, men inte så fint, eller hur?
för att förhindra att vår publik från ögonblödning, låt oss lägga till lite info och förbättra visuella!, 😉
Tips om hur du gör stapeldiagram
det finns några grundregler med stapeldiagram som är värda att nämna.
- Undvik att använda 3D – effekter;
- Beställ datapunkter intuitivt-alfabetiskt eller sorterat;
- Håll avståndet mellan banden;
- starta y-axeln vid 0 och inte med det lägsta värdet;
- använd konsekventa färger;
- Lägg axel etiketter, Titel, källraden.
D3.JS Grid System
Jag vill markera värdena genom att lägga till rutnät i bakgrunden.,
fortsätt, experimentera med både vertikala och horisontella linjer men mitt råd är att bara visa en av dem. Överdrivna linjer kan vara distraherande. Det här kodavsnittet visar hur du lägger till båda lösningarna.
Jag föredrar de vertikala rutnätslinjerna i det här fallet eftersom de leder ögonen och håller den övergripande bilden klar och enkel.
Etiketter i D3.js
Jag vill också göra diagrammet mer omfattande genom att lägga till lite textuell vägledning. Låt oss ge ett namn till diagrammet och lägga till etiketter för axlarna.,
texter är SVG-element som kan läggas till SVG eller grupper. De kan placeras med X-och y-koordinater medan textinriktning görs med attributettext-anchor. För att lägga till själva etiketten, ring baratext – metoden på textelementet.
Interaktivitet med D3.js
vi fick ett ganska informativt diagram men det finns fortfarande möjligheter att göra det interaktivt också.
i nästa kodblock visar jag dig hur du lägger till händelselyssnare i SVG-element.,
Observera att jag använder funktionsuttryck istället för en pilfunktion eftersom jag kommer åt elementet via this nyckelord.
Jag ställer in opaciteten för det valda SVG-elementet till hälften av det ursprungliga värdet på muspekaren och återställer det när markören lämnar området.
Du kan också få muskoordinaterna medd3.mouse. Den returnerar en array med X och y-koordinaten. På så sätt skulle det inte vara något problem att visa ett verktygstips vid markörens spets.
skapa iögonfallande diagram är inte en lätt konstform.,
man kan kräva visdom grafiska designers, UX forskare och andra mäktiga varelser. I följande exempel kommer jag att visa några möjligheter att öka ditt diagram!
Jag har mycket liknande värden som visas på diagrammet så för att markera skillnaderna mellan stapelvärdena ställer jag in en händelseläsare för händelsenmouseenter. Varje gång användaren svävar över en specifik kolumn, dras en horisontell linje ovanpå den stapeln. Dessutom beräknar jag också skillnaderna jämfört med de andra banden och visar den på staplarna.,
ganska snyggt, va? Jag lade också till opacitetsexemplet till den här och ökade bredden på baren.
metodentransition indikerar att jag vill animera ändringar i DOM. Dess intervall är inställt med funktionenduration som tar millisekunder som argument. Denna övergång över bleknar bandfärgen och breddar bredden på baren.
för att rita en SVG-linje behöver jag en start och en destinationspunkt., Detta kan ställas in via x1, y1 och x2, y2 koordinater. Linjen kommer inte att synas förrän jag ställer in färgen på den med attributet stroke.
jag avslöjade bara en del av händelsen mouseenter här så kom ihåg att du måste återställa eller ta bort ändringarna på händelsen mouseout. Den fullständiga källkoden finns i slutet av artikeln.
Låt oss lägga till lite stil i diagrammet!,
Låt oss se vad vi uppnått hittills och hur kan vi skaka upp det här diagrammet med någon stil. Du kan lägga till klassattribut till SVG-element med sammaattr – funktion som vi använde tidigare.
diagrammet har en fin uppsättning funktioner. I stället för en tråkig, statisk bild avslöjar den också skillnaderna mellan de representerade värdena på mus sväva. Titeln sätter diagrammet i sammanhang och etiketterna hjälper till att identifiera axlarna med måttenheten. Jag lägger också till en ny etikett i nedre högra hörnet för att markera ingångskällan.,
det enda som finns kvar är att uppgradera färger och teckensnitt!
diagram med mörk bakgrund gör att de ljusa färgade staplarna ser coola ut. Jag tillämpade ocksåOpen Sans teckensnittsfamiljen på alla texter och ange storlek och vikt för de olika etiketterna.
märker du att linjen blev streckad? Det kan göras genom att ställa in attributenstroke-width ochstroke-dasharray. Med stroke-dasharray kan du definiera mönster av bindestreck och luckor som ändrar formens kontur.
rutnät linjer där det blir knepigt., Jag måste tillämpa stroke-width: 0 på vägelement i gruppen för att dölja ramen i diagrammet och jag minskar också deras synlighet genom att ställa in linjens opacitet.
alla andra CSS-regler täcker teckenstorlekar och färger som du hittar i källkoden.
packa upp vår D3.JS stapeldiagram handledning
D3.js är ett fantastiskt bibliotek för DOM manipulation. Djupet av det döljer otaliga dolda (faktiskt inte Dolda, det är verkligen väl dokumenterade) skatter som väntar på upptäckten., Detta skrivande täcker endast fragment av dess verktygsuppsättning som hjälper till att skapa ett inte så medioker stapeldiagram.
fortsätt, utforska det, använd det och skapa spektakulära visualiseringar!