Ch. 4, Fig. 14 - D3.js in Action

This is the code for Chapter 4, Figure 14 from D3.js in Action which creates points for median values and rectangles representing the range from 1st to 3rd quartiles of the values from an external CSV.

<html>
<head>
  <title>D3 in Action Chapter 4 - Example 6</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
line {
  shape-rendering: crispEdges;
  stroke: #000000;
  }

line.minor  {
  stroke: #777777;
  stroke-dasharray: 2,2;
}

path.domain {
  fill: none;
  stroke: black;
}

</style>
<body>

<div id="viz">
  <svg>
  </svg>
</div>
</body>
  <footer>
    
<script>
d3.csv("boxplot.csv", scatterplot)

function scatterplot(data) {
    xScale = d3.scale.linear().domain([1,8]).range([20,470]);
    yScale = d3.scale.linear().domain([0,100]).range([480,20]);

yAxis = d3.svg.axis()
.scale(yScale)
.orient("right")
.ticks(8)
.tickSize(-470)
.tickSubdivide(true);
    
d3.select("svg").append("g")
.attr("transform", "translate(470,0)")
.attr("id", "yAxisG")
.call(yAxis);

xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickSize(-470)
.tickValues([1,2,3,4,5,6,7]);

d3.select("svg").append("g")
.attr("transform", "translate(0,480)")
.attr("id", "xAxisG")
.call(xAxis);

d3.select("svg").selectAll("circle.median")
.data(data)
.enter()
.append("circle")
.attr("class", "tweets")
.attr("r", 5)
.attr("cx", function(d) {return xScale(d.day)})
.attr("cy", function(d) {return yScale(d.median)})
.style("fill", "darkgray");

d3.select("svg").selectAll("g.box")
.data(data)
.enter()
.append("g")
.attr("class", "box")
.attr("transform", function(d) {return "translate(" + xScale(d.day) +"," + yScale(d.median) + ")"})
.each(function(d,i) {
d3.select(this)
.append("rect")
.attr("width", 20)
.attr("x", -10)
.attr("y", yScale(d.q3) - yScale(d.median))
.attr("height", yScale(d.q1) - yScale(d.q3)) 
.style("fill", "white")
.style("stroke", "black")
})

}

</script>
  </footer>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js