Door Adobe Edge Code samen met D3.js te gebruiken, laat deze tutorial zien hoe u aan de slag kunt met geautomatiseerde datavisualisatie in HTML. We genereren een ringdiagram met gegevens afkomstig uit het onderzoeksprogramma van de Design Council voor de ontwerpindustrie.
Ik zal je wat tips geven om te beginnen met het genereren van datavisualisaties met D3.js. U maakt SVG-afbeeldingen die met D3 zijn gegenereerd op basis van de gegevens. We bekijken hoe u diagrammen in een HTML-lay-out kunt plaatsen en hoe u uw diagrammen interactief kunt maken.
01 We beginnen met een voorbeeld van een cirkeldiagram in de blokken van mbostock, een geweldige code voor het aanbieden van bronnen door D3.js-ontwikkelaar Mike Bostock. Ik vond een soortgelijk uitziende grafiek als wat ik zocht in de codevoorbeelden op d3js.org. Het is de moeite waard om de inleiding tot de bibliotheek te lezen, aangezien deze enkele handige tips geeft.
02 Nu gaan we wat gegevens toevoegen. Hier gebruik ik wat uit het onderzoekgedeelte van de website van The Design Council. De cijfers hebben betrekking op freelance ontwerpers in het VK vanaf 2009. De eerste set gegevens is ‘Waar zijn Britse freelance ontwerpers gevestigd?’
03 Ik zal enkele aangepaste kleuren toevoegen door de variabele te verwijderen:
kleur = d3.scale.category20 (),
en toevoegen:
// Voeg aangepaste kleuren toe
var color = d3.scale.ordinal ()
.range (["# EC0677", "# EA2F91", "# E25AA1", "# 6b486b",
"# 926593", "# C793C9", "# DBC6D2"]);
Zoals u zult zien, biedt het voorbeeld van de ringdiagram alleen labels voor de "val" -gegevensset. Ik wil zowel de 'val'- als' naam'-gegevens laten zien. Dus ik heb een nieuwe functie toegevoegd om de naamgegevens weer te geven met behulp van deze code:
// Bereken positie
var roteren = d3.svg.arc (). innerRadius (r + 0) .outerRadius (r + 110);
// Voeg een label toe aan de grotere bogen, vertaald naar het zwaartepunt van de boog en geroteerd.
arcs.append ("svg: text")
.attr (function (d) {return d.endAngle - d.startAngle> .2;})
.attr ("dy", ".35em")
.style ("fi ll", "grey")
.style ("font", "normal 10px Arial")
.attr ("text-anchor", "middle")
.attr ("transform", function (d) {return "translate (" + rotate.centroid (d) + ") rotate (" + angle (d) +
“)”; })
.text (function (d) {return d.data.name;});
// Berekent de labelhoek van een boog en converteert van radialen naar graden.
functiehoek (d) {
var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
een> 90 retourneren? a - 180: a;
}
04 Hier heb ik mijn HTML-lay-out uitgebreid en een dubbele grafiek gemaakt die ook de code van mijn grafiek repliceert. Elke grafiek wordt vervolgens aan een "div" -element gekoppeld met behulp van de volgende code:
var vis = d3.select ("# pie").
append ("svg: svg")
Vervolgens heb ik de dataset op de tweede grafiek bijgewerkt om te laten zien hoelang Britse freelancers al actief zijn:
var data = [
{naam: "Minder dan 12 maanden", waarde: 11},
{naam: "1–3 jaar", waarde: 31},
{naam: "4-6 jaar", waarde: 25},
{naam: "7-10 jaar", waarde: 14},
{naam: "11-15 jaar", waarde: 6},
{naam: "15 jaar plus", waarde: 14}
];
05 Ten slotte heb ik een rollover-effect toegevoegd aan elk segment van mijn ringdiagram. Om dit te doen, moeten we eerst een nieuwe variabele aan de grafiek toevoegen:
arcOver = d3.svg.arc (). innerRadius (60) .outerRadius (r + 15); // stel Radius in
Dit stelt een nieuwe binnen- en buitenradius in voor het zweefeffect. Vervolgens moeten we een "mouseover" en "mouseout" -functie toevoegen aan de ringsegmenten. Om dit te doen, voegt u toe:
.on ("mouseover", function (d) {// Call Mouse Over-effect.
d3.select (dit) .select ("pad"). transition ()
.duur (400)
.attr ("d", arcOver);
})
.on ("mouseout", functie (d) {
d3.select (dit) .select ("pad"). transition ()
.duur (600)
.attr ("d", boog);
});
Voel je vrij om te experimenteren met de straalwaarden samen met de duurwaarden om verschillende effecten te bereiken.
Ontdek 35 topvoorbeelden van JavaScript op onze zustersite, Creative Bloq.
