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>
    <div class="chart"></div>
</body>

CSS

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

JavaScript

var data = [11, 17, 27, 21, 33];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 561]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });