D3 Examples

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
var width = 500,
    height = 500, 
    margin = 50;
​
var svg=d3.select("body").append("svg").attr("width",width).attr("height",height);
var x=d3.scale.linear().domain([37,38]).range([margin,width-margin]);
var y=d3.scale.linear().domain([-122.5,-121.5]).range([height-margin,margin]);
var r=d3.scale.linear().domain([0,30]).range([0,30]);
var o=d3.scale.linear().domain([0,100]).range([0,100]);
​
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");
​
var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");
​
d3.csv("IBRO.csv",function(csv) {
​
  svg.selectAll("circle").data(csv).enter()
    .append("circle")
    .attr("cx",function(d) {return x(+d.Customers);})
    .attr("cy",function(d) {return y(+d.RGUs);})
    .attr("r",function(d) {return r(+d.Customers);})
    //.style("fill",function(d) {return c(d.landmark);})
    //.style("opacity",function(d) {return o(+d.dockcount);})
​
})
​
​
    
​
  </script>
</body>
    