Miksi D3.js Data Visualisation

Data visualisointi silvoo raw numeroiden ja ihmisen ymmärtämisen välistä kuilua. Monien käytettävissä olevien työkalujen joukossa D3.js (Data-Driven Dokumentit) erottuu monipuolisena, matalan tason JavaScript-kirjastona, joka antaa kehittäjille suoran hallinnan Document Object Modelin (DOM) suhteen. Toisin kuin korkean tason karttakirjastot, jotka tarjoavat rajallista räätälöintiä, D3 antaa sinulle mahdollisuuden käyttää juuri sitä visuaalista edustusta, jota tarvitset .D3:tä käytetään suurimmissa organisaatioissa sen joustavuuteen, suorituskykyyn ja kykyyn käsitellä erilaisia tietomuotoja.

D3.j:n ydinkäsitteet

Jotta D3 saataisiin tehokkaasti käyttöön, on ymmärrettävä sen perusperiaatteet: valinnat, datan sitominen, vaaka- ja SVG. D3 toimii valitsemalla DOM-elementtejä, sitovaa tietoa niihin ja soveltamalla muunnoksia. Tämä kuvio ilmaistaan menetelmäketjutuksella ja se on parhaiten havainnollistettu yksinkertaisella esimerkillä.

Valinta ja tietojen sitominen

D3 käyttää CSS-valittimia kohdeelementteihin ja liittää niihin dataa. [-menetelmä yhdistää joukon arvoja valittuihin solmuihin, ja [-menetelmä luo uusia elementtejä datapisteisiin, joilta puuttuu vastaava DOM-solmu. Tämä syötepäivitys-poistumismalli mahdollistaa dynaamisen datan tehokkaan käsittelyn.

Esimerkiksi luoda ympyrää aineisto:

const data = [10, 25, 40, 30];
const svg = d3.select("body").append("svg")
 .attr("width", 400)
 .attr("height", 200);

svg.selectAll("circle")
 .data(data)
 .enter()
 .append("circle")
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d)
 .attr("fill", "steelblue");

Skaalaat ja akselit

Raakadata usein ulottuu raja-alueille, jotka eivät kartoita suoraan pikselikoordinaatteihin. D3 tarjoaa -mittakaavat[] jotka karttavat verkkotunnuksen (dataarvot) alueelle (pikselin kannat). Yhteiset asteikot sisältävät [, ja []. Akseleita syntyy sitten [ tai . Yhdessä vaaka- ja akselit muodostavat kvantitatiivisen visualisointinsa perustan.

Esimerkki lineaarisesta asteikosta:

const xScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([0, width]);

const yScale = d3.scaleLinear()
 .domain([0, d3.max(data)])
 .range([height, 0]);

const xAxis = d3.axisBottom(xScale);
svg.append("g")
 .attr("transform", `translate(0, ${height})`)
 .call(xAxis);

Rakentaminen Interaktiiviset visualisointi D3.js

Vuorovaikutus muuttaa staattiset kaaviot löydettäviksi tarinoiksi. D3 tukee tapahtumakäsittelijöitä, siirtymiä ja dynaamisia päivityksiä. Voit lisätä työkaluvihjeitä, zoomausta, vetämistä, suodattamista ja animaatioita minimaalisilla yläpäässä. Alla laajennamme työkaluvihjeitä ja esittelemme muita yhteisiä interaktiivisia ominaisuuksia.

Työkalut ja korostus

Työkalunkärjet antavat tarkat tiedot leijuvasta ilmasta. D3-tapahtumajärjestelmän avulla voit luoda kelluvan :n, joka osoittaa yksityiskohdat. Esimerkiksi työkaluvihjeillä varustetun viivakaavion laajentaminen näytettiin jo alkuperäisessä koodissa; tässä lisätään myös ] värimuutos[] leijuvalla ilmatyynyllä:

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", d => height - d * 3)
 .attr("width", 50)
 .attr("height", d => d * 3)
 .attr("fill", "steelblue")
 .on("mouseover", function(event, d) {
 d3.select(this).attr("fill", "orange");
 tooltip.style("display", "block").text(`Value: ${d}`);
 })
 .on("mousemove", (event) => {
 tooltip.style("left", (event.pageX + 10) + "px")
 .style("top", (event.pageY - 20) + "px");
 })
 .on("mouseout", function() {
 d3.select(this).attr("fill", "steelblue");
 tooltip.style("display", "none");
 });

Suurennus ja Pan

Suurille tietokannoille tai aikasarjadatalle, zoomaus ja pannointi auttavat käyttäjiä keskittymään kiinnostaviin alueisiin. D3-käyttäytymisen käytös muuttaa koordinaattijärjestelmää. Käytä sitä SVG-ryhmään, joka sisältää visuaalisia elementtejäsi.

const zoom = d3.zoom()
 .scaleExtent([1, 10])
 .on("zoom", (event) => {
 g.attr("transform", event.transform);
 });

svg.call(zoom);

Dynaamiset datapäivitykset

Interaktiivisten kojelautajen on usein päivitettävä tietoja lataamatta sivua uudelleen. D3:n päivityskuvio käsittelee hienovaraisesti elementtien lisäämistä, poistamista ja muokkaamista. Avain on uuden yhteyden uudelleenkäyttö uusien tietojen kanssa ja lisäsolmujen käyttö .

function updateData(newData) {
 const circles = svg.selectAll("circle").data(newData);
 circles.exit().remove(); // remove old
 circles.enter().append("circle") // add new
 .merge(circles) // merge with existing
 .attr("cx", (d, i) => i * 100 + 50)
 .attr("cy", 100)
 .attr("r", d => d);
}

D3-tekniikan kehittäminen

Asettelut ja maantieteelliset visualisointi

D3 sisältää erikoispiirrokset monimutkaisiin kaavioihin: luo piirakka-/radiodataa, [ simuloi verkkograafeja varten fysiikkaa, [ projektit kartoittaa tietoja GeoJSONin avulla. Nämä moduulit vähentävät huomattavasti hienostuneen visualisoinnin edellyttämää koodia. Esimerkiksi voimaohjatun verkon luominen:

const simulation = d3.forceSimulation(nodes)
 .force("link", d3.forceLink(links))
 .force("charge", d3.forceManyBody())
 .force("center", d3.forceCenter(width / 2, height / 2));

Siirtymät ja animaatiot

Sileät siirrokset parantavat käyttäjäkokemusta. D3-kirjain animoi määritteen muutoksia ajan myötä. Voit hallita kestoa, helpottaa ja viivyttää.

svg.selectAll("rect")
 .data(data)
 .enter()
 .append("rect")
 .attr("x", (d, i) => i * 70)
 .attr("y", height)
 .attr("width", 50)
 .attr("height", 0)
 .attr("fill", "steelblue")
 .transition()
 .duration(800)
 .ease(d3.easeBounce)
 .attr("y", d => height - d * 3)
 .attr("height", d => d * 3);

Parhaat tuotantovalmis D3-käytännöt

Suorituskyvyn optimointi

Suurissa tietokannoissa (tuhansissa pisteissä) suora DOM-manipulointi hidastuu. Käytä [canvaa[ renderöinti D3-kankaan kautta tai harkitse WebGL[] kirjastojen kuten kansi.gl. SVG-pohjaisen visuaalisen aineiston osalta vähennä DOM-kompleksisuutta []-ryhmien avulla ja vältä jokaisen elementtien päivittämistä jokaisella ruudulla. Käytä [ debounced[ tapahtumakäsittelijöitä ja välimuistivalitsinta.

Esteettömyys ja vastustelu

Kaikkien käyttäjien tulisi voida havaita visualisointi. Tarjota tageja SVG-elementteihin, käyttää ARIA-attribuutteja ja sisällyttää tekstipohjainen taulukko varalle. Reagoivan suunnittelun varmistamiseksi SVG-mitat säiliön leveydellä käytetään ja kuunnella ikkunan koon muutosta D3:lla.

function resize() {
 const width = container.node().getBoundingClientRect().width;
 svg.attr("width", width)
 .attr("height", width * aspectRatio);
 // redraw scales and axes
}
window.addEventListener("resize", resize);

Koodin organisaatio

Jopa yhden sivun sovelluksessa, jäsentele D3-koodi moduuliksi: yksi tietojen noutoa varten, yksi vaa'ille/axeille, yksi piirtämiseen ja yksi vuorovaikutusta varten. Käytä ES6-moduuleita tai nippuria kuten Webpack. Vältä sekoittamasta D3-logiikkaa ja runkoelinkaappauksia suoraan; sen sijaan luo D3-luokka, jota kehyksesi kutsuu.

D3-tyypin integrointi nykyaikaisiin puitteisiin

React, Angular, and Vue manage their other DOM. Välttääksesi ristiriidat, käytä D3 vain laskelmiin (mittakaavat, muodot) ja anna kehyksen tehdä SVG. Vaihtoehtoisesti, käytä omistettua käärettä kuten tai . Kuitenkin täyden hallinnan vuoksi voit käyttää D3 sisällä (React) tai [ (Angular) jossa on juurielementtien viite. Tämä pitää D3...

Reaalimaailman esimerkkejä ja käyttötapauksia

D3 powers many high-profit-profiiled visualisation projects: the ]D3 Gallery on Observable showcases satoja esimerkkejä, alkaen animoituja kuoropletteja vuorovaikutteisiin aikalinjat. Uutisjärjestöt kuten New York Times käyttää D3 mukautetun datatarinoita. Yritysasetuksissa D3 mahdollistaa mukautetut kojelaudat taloudellisia tietoja tai reaaliaikaisia IoT-sensorisyötteitä varten. Sen joustavuus tarkoittaa, että voit yhdistää useita kaaviotyyppejä yhdeksi yhtenäiseksi käyttöliittymäksi.

Esimerkki: Interaktiivinen Scatter Tooltips- ja harjaustyökalu

Kuvittele aineisto 500 pistettä x, y ja luokka. Käyttämällä D3, voit luoda scatter tontti piireissä värillinen luokan, työkaluvihje, jossa on tarkat koordinaatit, ja harja, joka korostaa valittuja pisteitä. Koodi rakenne seuraa kuvioita yllä. Harja vuorovaikutus näyttäisi:

const brush = d3.brush()
 .extent([[0, 0], [width, height]])
 .on("brush end", brushed);

svg.append("g").call(brush);

function brushed(event) {
 if (event.selection) {
 const [[x0, y0], [x1, y1]] = event.selection;
 circles.classed("selected", d =>
 x0 <= xScale(d.x) && xScale(d.x) <= x1 &&
 y0 <= yScale(d.y) && yScale(d.y) <= y1
 );
 } else {
 circles.classed("selected", false);
 }
}

Oppimisresurssit ja seuraavat vaiheet

Päästä D3, aloittaa virkamiehellä D3.js dokumentaatio[] ja ilmaisia tutoriaaleja [Observable[]. Työstä havaintokelpoiset muistikirjat, jotka tarjoavat suoran koodin, että voit haarautua. Myös lukea []"Interaktiivinen Data Visualization Web" by Scott Murray[ varten perusteellinen esittely. Käytännön avulla luoda klassisia kaavioita (palkki, rivi, scatter) tyhjästä, sitten lisätä interaktiivisuus. Kokeilu puukarttojen tai karttojen.

Päätelmät

D3.js on edelleen kulta standardi mukautetun interaktiivisen datan visualisointi verkossa. Sen jyrkkä oppimiskäyrä on kompensoitu vertaansa vailla joustavuutta, suorituskykyä ja yhteisön tukea. Masteroimalla sen keskeiset käsitteet. Valikoinnit, datan sitovuus, asteikot ja tapahtumakäsittely.Voit rakentaa visualisointia, joka muuttaa datan oivallukseksi. Olitpa rakentamassa yksinkertaista bar-karttaa tai monimutkaista moninäkymää kojelauta, D3 antaa sinulle työkaluja luoda tuotannon valmis, mukaansatempaava ja helppokäyttöinen visualisointi. Aloita pieni, iteroida, ja käyttää rikas ekosysteemi esimerkkejä ohjata matkaasi.