bikeshare latlong

forked from axmopio's block: bikeshare latlong

<!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("201508_station_data.csv",function(csv) {

svg.selectAll("circle").data(csv).enter()
    .append("circle")
    .attr("cx",function(d) {return x(+d.lat);})
    .attr("cy",function(d) {return y(+d.long);})
    .attr("r",function(d) {return r(Math.sqrt(+d.dockcount));})
    .style("fill",function(d) {return c(d.landmark);})
    .style("opacity",function(d) {return o(+d.dockcount);})

})

</script>
</body>

https://d3js.org/d3.v3.min.js