D3 Tutorial #4

by Johnny Lee

HTML

<ol id="Countries" name="Countries">
  <li>
    <div class="CountryName">Taiwan</div>
    <div class="Area"></div></li>
  <li>
    <div class="CountryName">Japan</div>
    <div class="Area"></div></li>
  <li>
    <div class="CountryName">Philippines</div>
    <div class="Area"></div></li>
  <li>
    <div class="CountryName">Indonesia</div>
    <div class="Area"></div></li>
</ol>

CSS

body {
  font-family: 微軟正黑體, Arial;
}
.red {
  background: red;
}

JavaScript

d3.selectAll('#Countries .Area')
  .data([36193, 377972, 300000, 1904569])
  .text(function(d,i) {
  	return 'Area: ' + d;
  })
  .style('border', '1px solid gray')
  .style('background', 'yellow')
  .style('white-space', 'nowrap')
  .transition()
  .duration(5000)
  .delay(function() { return 100; })
  .style('width', function(d,i) {
  	return d/5000 + 'px';
  })
  .style('background', 'red');