Introduktion til D3

I denne artikelserie vil jeg vise jer hvordan D3 fungerer.

D3 er et Javascript bibliotek som bliver brugt til at lave visuailseringer.

Visualiseringer af data er vigtige, fordi det gør det lettere at forstå sammenhæng, som dataene viser.

D3 er et godt værktøj, fordi man let kan læse data ind og derefter lave grafer og illustrationer .

Koden nedenfor viser et simpelt lille program, som tegner cirkler ud fra de data, som  findes i csv filen circles.csv

<!DOCTYPE HTML>
<body></body>
<script src="d3.v3.min.js"></script>
<script>
d3.csv("circles.csv", function (error, data){
    var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500);
    svg.selectAll("circle")
        .data(data).enter()
        .append("circle")
            .attr("cx", function(d) {return d.x})
            .attr("cy", function(d) {return d.y})
            .attr("r", function(d) {return d.r})
            .attr("fill", "none")
            .attr("stroke", function(d) {return d.c})
            .attr("stroke-width",9);
});
</script>
Indhold af circles.csv
x,y,r,c
400,300,90,Green
100,90,80,Blue
200,200,70,Red
250,200,60,Yellow
200,400,50,Black
90,200,40,Magenta
200,200,30,Pink
200,400,20,RoyalBlue
20,150,10,Gold
Her er det endelige resultat:

D3Circles

For at eksekvere koden skal man starte en python server i en terminal. Her er kommandoen:

python -m SimpleHTTPServer
Og pege browseren på localhost:8000

Det her er påkrævet får at html-filen skal have adgang til csv-filen.

Laver man ren html og Javascript, kan man åbne filen direkte fra browseren.