Pei-Chun Tsai: d3.js First Example

<html>
  <head>
    <title></title>
    <style>
     .chart div {
         font: 10px sans-serif;
         background-color: steelblue;
         text-align: right;
         padding: 3px;
         margin: 1px;
         color: white;
      }
    </style>
  </head>
  <body>
  <div class="chart">
  </div>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 
  <script type="text/javascript">
        var data = [4, 8, 15, 16, 23, 42];

        var x = d3.scale.linear()
                .domain([0, d3.max(data)])
                .range([0, 420]);

        d3.select(".chart")
          .selectAll("div")
          .data(data)
          .enter().append("div")
          .style("width", function(d) { return x(d) + "px"; })
          .text(function(d) { return d; });
  </script>
</body>
</html>
Pei-Chun Tsai

2015-09-26

d3.js First Example

No comments:
