D3 JS

Test pour le DOT-PLOT du projet Anagène

by Guillaume Seguin

HTML

<body>
    <h1>D3</h1>
    <p>Je souhaite utiliser cette librairie pour le projet Anagène.</p>
    <p>J'aimerais construire le DOT-PLOT avec cette librairie.</p>
    <p>Il existe quelques exemples que je pourrais adapter.</p>
    <p>De plus, Angular JS propose des modules pour implémenter cette librairie.</p>
</body>

JavaScript

d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
  .enter().append("p")
    .text(function(d) { return "I’m number " + d + "!"; });

/*
On load, change style
*/

d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});

//Bind data
d3.selectAll("p")
    .data([15, 16, 23, 42])
    .style("font-size", function(d) { return d + "px"; });

// Update…

var p = d3.select("body").selectAll("p")
    .data([4, 8, 15, 16, 23, 42])
    .text(String);

// Enter…
p.enter().append("p")
    .text(String);

// Exit…
p.exit().remove();

d3.select("body").transition()
    .duration(1000)
    .style("background-color", "gray");