D3 Examples - A Bar Chart

A Bar Chart

Make the following changes to this bar chart:

Use the "states-zika.csv" file instead of "sample-data.csv".

adjust margins as needed so that the entire bar chart is displayed properly.

Make the bars green.

Make all text black.

Sort the bars alphabetically by state name in ascending order.

After a 5 second delay, transition to sorting the bars in descending order according to their values.

Create a tooltip for each bar that displays the number of characters in the name of the state over which you are hovering. For example, if I hover over Ohio, the tooltip will say "4". If I hover over Virginia, the tooltip will say "8".

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
body {
  font: 10px sans-serif;
}
​
.bar rect {
  fill: green;
}
​
.bar text.value {
  fill: black;
}
​
.axis {
  shape-rendering: crispEdges;
}
​
.axis path {
  fill: none;
}
​
.x.axis line {
  stroke: #fff;
  stroke-opacity: .8;
}
​
.y.axis path {
  stroke: black;
}
​
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
​
var m = [20, 30, 10, 50],
    w = 950 - m[1] - m[3],
    h = 600 - m[0] - m[2];
​
var format = d3.format(",.0f");
​
var x = d3.scale.linear()
     .range([0, w])
     
var y = d3.scale.ordinal().rangeRoundBands([0, h], .1)
.domain([0, 60])
var xAxis = d3.svg.axis().scale(x).orient("top").tickSize(-h),
    yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
​
var svg = d3.select("body").append("svg")
    .attr("width", w + m[1] + m[3])
    .attr("height", h + m[0] + m[2])
  .append("g")
    .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
​
d3.csv("states-zika.csv", function(error, data) {
  if (error) throw error;
​
  // Parse numbers, and sort by value.
  data.forEach(function(d) { d.value = +d.value; });
  data.sort(function(a, b) { return b.value - a.value; });
​
  // Set the scale domain.
  x.domain([2, d3.max(data, function(d) { return d.value; })]);
  y.domain(data.map(function(d) { return d.name; }));
​
  var bar = svg.selectAll("g.bar")
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });
​
  bar.append("rect")
      .attr("width", function(d) { return x(d.value); })
      .attr("height", y.rangeBand());
​
  bar.append("text")
      .attr("class", "value")
      .attr("x", function(d) { return x(d.value); })
      .attr("y", y.rangeBand() / 2)
      .attr("dx", -3)
      .attr("dy", ".35em")
      .attr("text-anchor", "end")
      .text(function(d) { return format(d.value); });
​
  svg.append("g")
      .attr("class", "x axis")
      .call(xAxis);
​
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);
});
​
</script>
​
    