D3 Examples - d3intro

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Intro d3js examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      .existing {color: blue;}
      .new {color: green;}
    </style>
  </head>
  <body>
    <h1>Intro d3js - example12</h1>
    <!--<p> previous paragraph</p>-->
    <script type="text/javascript">
        //Width and height
      var w = 500;
      var h = 600;
      //Once the visualization is scalable we can adjust the size of it easily
      //var h = 300;
      var padding = 30;
      var offset = 3;
      
      
      var dataset = [
              [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
              [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],[200, 50]
              ];
        
       
      //Imagine we have a big data point
      /*var dataset = [
                  [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                  [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
                  [1800, 1250]
                  ];*/
      
                 
      var xScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                 .range([0, w-padding*2]);
​
      var yScale = d3.scale.linear()
                 .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                 .range([h-padding, padding]);
                 
      var rScale = d3.scale.linear()
                  .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                  .range([2, 5]);
  
      //Create SVG element
      var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
      
      svg.selectAll("circle")
         .data(dataset)
         .enter()
         .append("circle")
         .attr("cx", function(d) {
             return xScale(d[0]);
         })
         .attr("cy", function(d) {
             return yScale(d[1]);
         })
         .attr("r", function(d) {
             return rScale(d[0]);
         });
​
      //Labels
      svg.selectAll("text")
         .data(dataset)
         .enter()
         .append("text")
         .text(function(d) {
             return d[0] + "," + d[1];
         })
         .attr("x", function(d) {
             return xScale(d[0]) + offset;
         })
         .attr("y", function(d) {
             return yScale(d[1]) - offset;
         })
         .attr("font-family", "sans-serif")
         .attr("font-size", "10px")
         .attr("fill", "teal");
      </script>
  </body>
</html>
​
    