D3 start

Learning d3

by PhilM

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<html>
    <head>
        <title>D3 Test</title>
    </head>
    <body>
    </body>
</html>

CSS

.bar {
    display: inline-block;
    width: 20px;
    height: 75px;   /* We'll override this later */
    background-color: teal;
    margin-right: 4px;
}
ellipse{
    opacity: 0.4;
    fill: yellow;
    stroke: blue;
    stroke-width:3;
}
.chartText {
    fill: white;
    font-family: sans-serif;
    font-size:11px;
}
.animating { 
  opacity:0.5
}
div {
  background:green; display:inline-block;
  margin:1em; padding:0.2em;
  text-align:center;
  overflow:hidden;
}

JavaScript

/*
var dataset = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
                14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
                24, 18, 25, 9, 3 ];
*/
var dataset = [];                        //Initialize empty array
for (var i = 0; i < 25; i++) {           //Loop 25 times
    var newNumber = Math.round(Math.random() * 28) + 6;  //New random number (0-30)
    dataset = dataset.concat(newNumber); //Add new number to array
}

/*d3.select("body").selectAll("div")
    .data(dataset)
    .enter()
    .append("div")
    .attr("class", "bar")
    .style("height", function(d) {
        return d*5 + "px";
    });
*/
//Width and height
var w = 800;
var h = 200;
var barPadding = 2;
var barwidth = (w / dataset.length) - barPadding;

var svg = d3.select("body").append("svg")
    .attr("width", w)   // <-- Here
    .attr("height", h); // <-- and here!;

var bars = svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
       return i * (barwidth + barPadding);
    })
    .attr("y", 100)
   .attr("width", barwidth )
    .attr("fill", function(d, i) {
        var shade = d * 10;
        return 'rgb(0, 0, ' + shade + ')';
    });

var circles = svg.selectAll("ellipse")
    .data(dataset)
    .enter()
    .append("ellipse");

svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
        return d;
   })
   .attr("y", function(d) {
        return 100 - (d * 3) + 14;
   })
   .attr("class", "chartText")
   .attr("text-anchor", "middle")
   .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
   });

circles
    .attr("cx", function(d, i) {
            return (barwidth/2) + i * (barwidth + barPadding);
        })
    .attr("cy", 100)
    .attr("rx", (barwidth/2) - barPadding);

circles.transition()
    .duration(1500)
       .attr("ry", function(d) {
            return d;
       })
    .ease("elastic");

bars.transition()
   .duration(1500)
  ...