Cacher is the code snippet organizer for pro developers

svg {
  position: absolute;
  width: 770px;
  height: 720px;
}

circle {
  stroke: #000000;
  stroke-width: 0.5px;
  fill: #2B60DE;
  opacity: 0.6;
}

var width = $("svg").width()
  , height = $("svg").height()
  , svg = d3.select("svg")

var margin = 80

var extents = {
  x: d3.extent(data, h.prop("size")),
  y: d3.extent(data, h.prop("price"))
}

var scales = {
  x: d3.scale.linear().range([margin, width-margin]).domain(extents.x),
  y: d3.scale.linear().range([height-margin, margin]).domain(extents.y)
}

svg
  .attr("width", width)
  .attr("height", height)
  .selectAll("circle")
  .data(data)
  .enter()
    .append("circle")
    .attr("cx", h.propToScale("size", scales.x))
    .attr("cy", h.propToScale("price", scales.y))
    .attr("r", 5)

window.h = {}

h.prop = function(attr){
  return function(d){
    return d[attr]
  }
}

h.propToScale = function(attr, scale){
  return function(d){
    return scale(d[attr])
  }
}

window.data = [
  { size: 1700, price: 51000 },
  { size: 2100, price: 63000 },
  { size: 1900, price: 57000 },
  { size: 1300, price: 39000 },
  { size: 1600, price: 48000 },
  { size: 2200, price: 66000 }
]

{"description":"scatter plot","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"helpers.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}