D3 basics svg

render a chart in an svg element

by Dan Shahin

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg class="chart">
    <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#FF6" />
      <stop offset="95%" stop-color="#F60" />
    </linearGradient>
  </defs>
</svg>

CSS

.chart rect {
  fill: url(#MyGradient);
}

.chart text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

JavaScript

var width = 500,
    barHeight = 20;

var data = [
  {name: "Locke",    value:  10},
  {name: "Reyes",    value:  8},
  {name: "Ford",     value: 15},
  {name: "Jarrah",   value: 16},
  {name: "Shephard", value: 23},
  {name: "Kwon",     value: 42}
];

function type(d) {
  d.value = +d.value; // coerce to number
  return d;
}

var getWidth = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.value; })])
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
    .data(data)
    .enter().append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", function(d) { return getWidth(d.value); })
    .transition()
            .delay(function (d, i) {
            return i * 500;
        })

     .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return getWidth(d.value) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d.name + ' [' + d.value +']'; });