fresh block

<!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([0,5]).range([margin,width-margin]);
var y=d3.scale.linear().domain([-10,10]).range([height-margin,margin]);
var r=d3.scale.linear().domain([0,500]).range([0,20]);
var o=d3.scale.linear().domain([10000,100000]).range([.5,1]);
var c=d3.scale.category10().domain(["Africa","America","Asia","Europe","Oceania"]);

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(0);})
    .attr("cy",function(d) {return y(0);})
    .attr("r",function(d) {return r(0);})
 
    .style("fill",function(d) {return c(d.landmark);})
    .style("opacity",function(d) {return o(+d.dockcount);})
 
      .append("title")
      .text(function(d) {return d.name;})
   
  // now we initiate - moving the marks to their position
 
  svg.selectAll("circle").transition().duration(1000)
    .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));})
})

</script>
</body>

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