chabb/boxplot.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

  
## boxplot.csv

          
            day
            min
            max
            median
            q1
            q3
            number

            
              1
              14
              65
              33
              20
              35
              22

            
              2
              25
              73
              25
              25
              30
              170

            
              3
              15
              40
              25
              17
              28
              185

            
              4
              18
              55
              33
              28
              42
              135

            
              5
              14
              66
              35
              22
              45
              150

            
              6
              22
              70
              34
              28
              42
              170

            
              7
              14
              65
              33
              30
              50
              28

## index.html
<html>
<head>
  <title>D3 in Action Chapter 4 - Example 6</title>
  <meta charset="utf-8" />
<script src="http://d3js.org/d3.v3.min.js" type="text/JavaScript"></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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
day	min	max	median	q1	q3	number
1	14	65	33	20	35	22
2	25	73	25	25	30	170
3	15	40	25	17	28	185
4	18	55	33	28	42	135
5	14	66	35	22	45	150
6	22	70	34	28	42	170
7	14	65	33	30	50	28
	<html>
	<head>
	<title>D3 in Action Chapter 4 - Example 6</title>
	<meta charset="utf-8" />
	<script src="http://d3js.org/d3.v3.min.js" type="text/JavaScript"></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>