D3 Tutorial #3

by Johnny Lee

HTML

<ol id="Countries" name="Countries">
  <li>
    <span class="CountryName">Taiwan</span>
    <span class="Area">36193</span></li>
  <li>
    <span class="CountryName">Japan</span>
    <span class="Area">377972</span></li>
  <li>
    <span class="CountryName">Philippines</span>
    <span class="Area">300000</span></li>
  <li>
    <span class="CountryName">Indonesia</span>
    <span class="Area">1904569</span></li>
</ol>

CSS

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

JavaScript

d3.selectAll('#Countries .CountryName')
  .data(['#0f8','#f0f','#8f0'])
  .style("color", function(d, i) { 
  		return d;
  })
  .exit().remove();