Data visualiseren met D3

Om de Data te visualiseren heb ik d3 library gebruikt. Wat ik eerst gedaan heb, heb ik door de documentatie geklikt om een idee te krijgen hoe het werkt. Daarna heb ik exampels bekeken die op de site staan van D3. ik was eigenlijk verbaasd hoeveel je dingen kan doen met D3 en hoe breed D3 is. Voor mijn concept wil ik een pie-chart bouwen. Dus ik heb daar gekeken naar voorbeelden van een pie-cahrt. Daarna heb ik een tutorial gekeken . van deze tutorial heb ik geleerd hoe ik de pie-chart kan maken en wat ik nodig heb om dat te doen. Om een piechart te maken moet er arc gemaakt worden. Daarnaast vond ik de transition heel leuk die in de tutorial is, dus die heb ik nagemaakt.

Eerst heb ik variabelen aangemaakt deze variabel zijn de setup voor mijn visualisatie. Deze setup heb ik genomen van de tutorial

//margin, width and height and raduis for teh circle
const margin = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 20
    },
    width = 500 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom,
    raduis = width / 2;

// arc generator
const arc = d3.arc()
    .outerRadius(raduis - 10)
    .innerRadius(raduis - 100);

const color = d3.scaleOrdinal(d3.schemePaired);

// pie generator
const pie = d3.pie()
    .sort(null)
    .value(function (d) {
        return d.countObj
    });

// define svg
const svg = d3.select("#dashboard").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("overflow", "visible")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); // to center the piechart

Daarna heb ik een functie geschreven die de data koppelt aan de piechart:

function makePieChart(data) {
    // parse the  data
    console.dir(data)
    data.forEach(function (d) {
        d.countObj = +d.countObj; // "23" => 23
        d.categoryLabel = d.categoryLabel; // "name" => "name"
    });

    //append g element (.arc)
    const g = svg.selectAll(".arc")
        .data(pie(data)) // data geven aan de die() functie
        .enter().append('g') // g genareren 
        .attr("class", "arc"); //  class toevoegen aan de g

    // append path to g(.arc)
    g.append("path")
        .attr("d", arc)
        .style("fill", function (d) {
            return color(d.data.categoryLabel) // color toevoegenaan elke path in de arc
        })
        .transition() // animeren
        .ease(d3.easeLinear)
        .duration(2000)
        .attrTween("d", pieTween); // functie die zorgt dat alles op 0 staat

    //appen the text (labels)
    g.append('text')
        .attr('transform', 'translate(0, 30)') // positie voor de text label
        .attr('class', 'label')
        .attr('text-anchor', 'middle') // text centereren 
        .attr('font-size', '10')
        .attr("dy", ".35em")
        .text(function (d) {
            return d.data.categoryLabel;
        }); // data geven aan de text

    // aantal objecten in het middle
    g.append('text') 
        .attr("class", "aantalObjecten") // class toevoegen
        .attr('text-anchor', 'middle') // text centereren 
        .attr('font-size', '28')
        .attr("dy", ".35em")
        .text(function (d) {
            return d.data.countObj;
        }); // data geven aan de text

    // update bar-chart door de index van de categorie te sturen van de geklikte arc (categorie) naar de functie updateBarChart.
    d3.selectAll(".arc")
        .on("click", function () {
            //console.dir(this)
            const categroieColor = this.childNodes[0].style.fill;
            const categorieNumber = this.__data__.index;
            updateBarChart(data, categorieNumber, categroieColor);
            resetPieChart(data);
        })
}

Om de animatie te laten werken moet ik eerst alle waardes op 0 zetten zodat de transition werkt. daarom heb ik de volgende functie gebruikt van de tutorial. Deze functie zorgt dat b.innerRadius op 0 staat voor dat de data binnen komt zodat de animatie werkt op de pie cahrt. Daarnaast zitten we de startAngle op 0 en endAngle op 0 door d3.interpolate() te gebruiken. Dus we starten op hoek 0 en we eindigen op de hoek 0.

function pieTween(b) {
    b.innerRadius = 0;
    const i = d3.interpolate({
        startAngle: 0,
        endAngle: 0
    }, b);
    return function (t) {
        return arc(i(t));
    }

}

Hover interactie heb ik door css gedaan

.aantalObjecten {
    display: none;
    stroke: none;
}

.label {
    display: none;
    stroke: none;
}

.arc:hover {
    opacity: 0.8;

    .label {
        display: block;
    }

    .aantalObjecten {
        display: block;
    }
}