Pei-Chun Tsai: d3.js Html5 svg circle and bar chart Example

<html>
  <head>
    <title></title>
  </head>
  <body>
    <svg width="720" height="120">
    </svg>
    <div id="myChart">
    </div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
 
   <script type="text/javascript">
     var svg = d3.select("svg");

     //three circle
     //---create a circles for each item in data to svg
     var circle = svg.selectAll("circle")
      .data([32, 57, 293], function(d) { return d; });

     circle.enter().append("circle")
      .style("fill", "steelblue")
      .attr("cy", 60)
      .attr("cx", function(d, i) { return i * 100 + 30; })
      .attr("r", function(d) { return Math.sqrt(d); });

     //bar chart
     var chartdata = [40, 60, 80, 100, 70, 50, 100, 60, 70, 60, 90, 120,30];

     //---the size of the overall svg element
     var height = 200;
     var width = 720;

     //the width of each bar and the offset between each bar
     var barWidth = 40;
     var barOffset = 15;


     var bar = d3.select('#myChart').append('svg')
     .attr('width', width)
     .attr('height', height)
     .style('background', '#dff0d8')
     .selectAll('rect').data(chartdata);

     //add a bar for each item in array chartdata to chart
     bar.enter().append('rect')
     .style({'fill': '#3c763d', 'stroke': '#d6e9c6', 'stroke-width': '3'})
     .attr('width', barWidth)
     .attr('height', function (data) {
         return data;
     })
     .attr('x', function (data, i) {
         return i * (barWidth + barOffset);
     })
     .attr('y', function (data) {
         return height - data;
     });

     //add text for every bar in chart to display the value of the bar
     bar.enter().append("text")
     .attr('x', function (data, i) {
         return (i * (barWidth + barOffset)) + 5;
     })
     .attr('y', function (data) {
         return (height - data)+15;
     })
     .attr("dy", ".35em")
     .style({'fill':'#FFFFFF'})
     .text(function(data) { return data; });

 </script>
</body>
</html>
Pei-Chun Tsai

2015-09-27

d3.js Html5 svg circle and bar chart Example

No comments:
