jzgit/README.md

## README.md

      
    Raw
  

              README.md
            
          
    forked from micahstubbs's block: vertical boxplot
forked from anonymous's block: vertical boxplot
forked from jzgit's block: vertical boxplot

  
## data.csv

          
            day
            min
            max
            median
            q1
            q3

            
              1
              -2
              2
              0
              -1.2
              .5

            
              2
              -2
              2
              0
              -1.1
              .5

            
              3
              -2
              2
              0
              -1.0
              .5

            
              4
              -2
              2
              0.2
              -.9
              .5

            
              5
              -2
              2
              0.2
              -.8
              .5

            
              6
              -2
              2
              0.2
              -.4
              .5

            
              7
              -2
              2
              0.2
              -.3
              .5

            
              8
              -2
              2
              0.2
              -.3
              .5

            
              9
              -2
              2
              0.2
              -.3
              .5

            
              10
              -2
              2
              0.2
              -.4
              .5

            
              11
              -2
              2
              0
              -.4
              .5

            
              12
              -2
              2
              0
              -.4
              .5

            
              13
              -2
              2
              0
              -.4
              .5

            
              14
              -2
              2
              0.2
              -.4
              .5

            
              15
              -2
              2
              0.2
              -.4
              .5

            
              16
              -2
              2
              0.2
              -.4
              .5

            
              17
              -2
              2
              0.2
              -.4
              .5

            
              18
              -2
              2
              0.2
              -.4
              .5

            
              19
              -2
              2
              0.2
              -.4
              .5

            
              20
              -2
              2
              0.2
              -.4
              .5

## index.html
<html>
<head>
  <title>vertical boxplot</title>
  <meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/JavaScript"></script>
</head>
<style>
svg {
  border: 1px solid gray;
  background: #3de7b3;
}

line {
  shape-rendering: crispEdges;
  stroke: #000000;
}

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

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

</style>
<body>
</body>

<script>
d3.csv("data.csv", boxplot)

function boxplot(data){

  var h = 300,
      w = 619;

  var margin = {
    'top': 20,
    'bottom': 20,
    'left': 20,
    'right': 30
  }

  d3.select("body").append("svg")
    .attr("height", h)
    .attr("width", w);


  xScale = d3.scale.linear()
    .domain([
      d3.min(data, function(d){ return d.day }),
      Number(d3.max(data, function(d){ return d.day })) + 15
    ])
    .range([
      margin.left,
      w - margin.right
    ]);

  yScale = d3.scale.linear()
    .domain([-2,2]) // 0% to 100%
    .range([
      h - margin.bottom,
      margin.top
    ]);

  console.log(data);

  yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("right")
    .ticks(8)
    .tickSize(-370)
    .tickSubdivide(true); // deprecated, I know

  d3.select("svg").append("g")
    .attr("transform", "translate(470,0)")
    .attr("id", "yAxisG")
    //.call(yAxis);

  var days = data.map(function(d){return Number(d.day)});

  xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .tickSize(-470)
    .tickValues(days);


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


  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("line")
        .attr("class", "max")
        .attr("x1", -10)
        .attr("x2", 10)
        .attr("y1", yScale(d.max) - yScale(d.median))
        .attr("y2", yScale(d.max) - yScale(d.median))
        .style("stroke", "#76eeca")
        .style("stroke-width", "1px");

      d3.select(this)
        .append("line")
        .attr("class", "min")
        .attr("x1", -10)
        .attr("x2", 10)
        .attr("y1", yScale(d.min) - yScale(d.median))
        .attr("y2", yScale(d.min) - yScale(d.median))
        .style("stroke", "#76eeca")
        .style("stroke-width", "1px");

      d3.select(this)
        .append("rect")
        .attr("class", "range")
        .attr("width", 8)
        .attr("x", 0)
        .attr("y", yScale(d.q3) - yScale(d.median))
        .attr('rx', 4)
      	.attr('ry', 4)
        .attr("height", yScale(d.q1) - yScale(d.q3))
        .style("fill", "#76eeca")

      d3.select(this)
        .append("circle")
        .attr("cx", 4)
        .attr("cy", 0)
        .attr("r", 4)
        .style("fill", "white")
        .style("stroke-width", "1px");

    })


}

</script>
  </footer>

</html>
day	min	max	median	q1	q3
1	-2	2	0	-1.2	.5
2	-2	2	0	-1.1	.5
3	-2	2	0	-1.0	.5
4	-2	2	0.2	-.9	.5
5	-2	2	0.2	-.8	.5
6	-2	2	0.2	-.4	.5
7	-2	2	0.2	-.3	.5
8	-2	2	0.2	-.3	.5
9	-2	2	0.2	-.3	.5
10	-2	2	0.2	-.4	.5
11	-2	2	0	-.4	.5
12	-2	2	0	-.4	.5
13	-2	2	0	-.4	.5
14	-2	2	0.2	-.4	.5
15	-2	2	0.2	-.4	.5
16	-2	2	0.2	-.4	.5
17	-2	2	0.2	-.4	.5
18	-2	2	0.2	-.4	.5
19	-2	2	0.2	-.4	.5
20	-2	2	0.2	-.4	.5
	<html>
	<head>
	<title>vertical boxplot</title>
	<meta charset="utf-8" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" type="text/JavaScript"></script>
	</head>
	<style>
	svg {
	border: 1px solid gray;
	background: #3de7b3;
	}

	line {
	shape-rendering: crispEdges;
	stroke: #000000;
	}

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

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

	</style>
	<body>
	</body>

	<script>
	d3.csv("data.csv", boxplot)

	function boxplot(data){

	var h = 300,
	w = 619;

	var margin = {
	'top': 20,
	'bottom': 20,
	'left': 20,
	'right': 30
	}

	d3.select("body").append("svg")
	.attr("height", h)
	.attr("width", w);


	xScale = d3.scale.linear()
	.domain([
	d3.min(data, function(d){ return d.day }),
	Number(d3.max(data, function(d){ return d.day })) + 15
	])
	.range([
	margin.left,
	w - margin.right
	]);

	yScale = d3.scale.linear()
	.domain([-2,2]) // 0% to 100%
	.range([
	h - margin.bottom,
	margin.top
	]);

	console.log(data);

	yAxis = d3.svg.axis()
	.scale(yScale)
	.orient("right")
	.ticks(8)
	.tickSize(-370)
	.tickSubdivide(true); // deprecated, I know

	d3.select("svg").append("g")
	.attr("transform", "translate(470,0)")
	.attr("id", "yAxisG")
	//.call(yAxis);

	var days = data.map(function(d){return Number(d.day)});

	xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickSize(-470)
	.tickValues(days);


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


	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("line")
	.attr("class", "max")
	.attr("x1", -10)
	.attr("x2", 10)
	.attr("y1", yScale(d.max) - yScale(d.median))
	.attr("y2", yScale(d.max) - yScale(d.median))
	.style("stroke", "#76eeca")
	.style("stroke-width", "1px");

	d3.select(this)
	.append("line")
	.attr("class", "min")
	.attr("x1", -10)
	.attr("x2", 10)
	.attr("y1", yScale(d.min) - yScale(d.median))
	.attr("y2", yScale(d.min) - yScale(d.median))
	.style("stroke", "#76eeca")
	.style("stroke-width", "1px");

	d3.select(this)
	.append("rect")
	.attr("class", "range")
	.attr("width", 8)
	.attr("x", 0)
	.attr("y", yScale(d.q3) - yScale(d.median))
	.attr('rx', 4)
	.attr('ry', 4)
	.attr("height", yScale(d.q1) - yScale(d.q3))
	.style("fill", "#76eeca")

	d3.select(this)
	.append("circle")
	.attr("cx", 4)
	.attr("cy", 0)
	.attr("r", 4)
	.style("fill", "white")
	.style("stroke-width", "1px");

	})


	}

	</script>
	</footer>

	</html>