vis_app_ref_point_2

by Simon Raper

HTML

<div id="container">
  <div id="header">
    <h1>Demo Scatterplot</h1>
  </div>
  <div id="sidebar">
  </div>
  <div id="content">
    <div id="content">
      <svg height="400" width="650">
    </svg>
    </div>
  </div>
  <div id="footer">
  </div>
</div>

CSS

h1 {
  font-family: 'Raleway';
  font-weight: normal;
  font-size: 1.2em;
  letter-spacing: .2em;
  line-height: 1.1em;
  margin: 0px;
  text-align: left;
  text-transform: uppercase;
}

#container {
  width: 800px;
}

#header {
  width: 800px;
  height: 50px;
  padding: 5px;
}

#sidebar {
  height: 400px;
  width: 150px;
  float: left;
}

#content {
  height: 400px;
  width: 650px;
  float: left;
}

#footer {
  width: 800px;
  height: 50px;
  float: left;
}

circle {
  stroke: #1abc9c;
  stroke-width: 2;
  fill: white;
}

JavaScript

circle_data = [{"x": 100,
               "y": 100,
               "r": 4},
              {"x": 200,
               "y": 250,
               "r": 4},
              {"x": 300,
               "y": 180,
               "r": 4}];
 

svg = d3.select("svg");
diag_circles = svg.selectAll("circle")
diag_circles.data(circle_data)
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d.x
  })
  .attr("cy", function(d) {
    return d.y
  })
  .attr("r", function(d) {
    return d.r
  });