Built with blockbuilder.org
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>D3 Example</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
</head>
<body>
<script>
var scale = d3.scale.linear()
.domain([1, 5]) // Data space
.range([0, 200]); // Pixel space
var svg = d3.select("body").append("svg")
.attr("width", 250)
.attr("height", 250);
function render(data, color){
// Bind data
var rects = svg.selectAll("rect").data(data);
// Enter
rects.enter().append("rect")
.attr("y", 50)
.attr("width", 20)
.attr("height", 20);
// Update
rects
.attr("x", scale)
.attr("fill", color);
// Exit
rects.exit().remove();
}
for (var i=0; i <10;i++){
setTimeout( function (){ render([1, 2, 2.5], "red"); }, 1000);
setTimeout( function (){ render([1, 2, 3, 4, 5], "blue"); }, 2000);
setTimeout( function (){ render([1, 2], "green"); }, 3000);
setTimeout( function (){ render([3, 4, 5], "cyan"); }, 4000);
setTimeout( function (){ render([4, 5], "magenta");}, 5000);
}
</script>
</body>
</html>
// Boxplot code
d3.csv("box_data.csv", scatterplot);
const tickSize = 470;
function scatterplot(data) {
console.log(data);
const margin = {top: 25, right: 25, bottom: 25, left: 25};
const height = 500 - margin.top - margin.bottom;
const width = 500 - margin.right - margin.left;
const svg = d3.select('body')
.append('svg')
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
const maxSize = d3.max(data, d => d.number);
const xScale = d3.scaleLinear().domain([1, 8]).range([20, width]);
const yScale = d3.scaleLinear().domain([0, 100]).range([height, 20]);
const colScale = d3.scaleLinear()
.domain([0, maxSize]).range(colorbrewer.Blues[7]);
// Define axes
const yAxis = d3.axisRight().scale(yScale)
.ticks(8).tickSize(width);
svg.append('g')
.attr('id', 'yAxisG')
.call(yAxis);
const xAxis = d3.axisBottom().scale(xScale)
.tickSize(-height)
.tickValues([1,2,3,4,5,6,7]);
svg.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('id', 'xAxisG')
.call(xAxis);
d3.select('#xAxisG > path.domain').style('display', 'none');
// create chart
// svg.selectAll('circle.median')
// .data(data)
// .enter()
// .append('circle')
// .attr('class', 'median')
// .attr('r', 10)
// .attr('cx', d => xScale(d.day))
// .attr('cy', d => yScale(d.median))
// .style('fill', 'darkgrey');
svg.selectAll('g.box')
.data(data).enter()
.append('g')
.attr('class', 'box')
.attr('transform', d => 'translate(' + xScale(d.day) + ',' + yScale(d.median) + ')')
.each(function(d,i) {
d3.select(this)
//line for min/max
.append('line')
.attr('class', 'range')
.attr('x1', 0).attr('x2', 0)
.attr('y1', yScale(d.max) - yScale(d.median))
.attr('y2', yScale(d.min) - yScale(d.median))
.style('stroke', 'black')
.style('stroke-width', 4);
// tick at top of line
d3.select(this).append('line')
.attr('x1', -5).attr('x2', 5)
.attr('y1', yScale(d.max) - yScale(d.median))
.attr('y2', yScale(d.max) - yScale(d.median))
.style('stroke', 'black')
.style('stroke-width', 4)
d3.select(this).append('line')
.attr('x1', -5).attr('x2', 5)
.attr('y1', yScale(d.min) - yScale(d.median))
.attr('y2', yScale(d.min) - yScale(d.median))
.style('stroke', 'black')
.style('stroke-width', 4)
d3.select(this).append('rect')
.attr('x', -20)
.attr('y', yScale(d.q3) - yScale(d.median))
.attr('width', 40)
.attr('height', yScale(d.q1) - yScale(d.q3))
.attr('fill', colScale(d.number))
.attr('stroke', 'black')
// add median line
d3.select(this).append('line')
.attr('x1', -20).attr('x2', 20)
.attr('y1', 0)
.attr('y2', 0)
.style('stroke', 'grey')
.style('stroke-width', 3);
})
}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