Let's build a boxplot / Clinton Brownley

visitors = d3.csvParse(

`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`,

d3.autoType

)

vis1 = {

const target = html`<svg id="target" viewBox="-20 -20 ${width} ${height}"></svg>`;

const svg = d3.select(target);

const WIDTH = 410;

const HEIGHT = 310;

const MARGIN = { top: 10, right: 10, bottom: 10, left: 10 };

const INNER_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

const INNER_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

const x = d3.scaleLinear().domain([1, 8]).range([0, INNER_WIDTH]);

const y = d3.scaleLinear().domain([0, 100]).range([INNER_HEIGHT, 0]);

const xAxis = d3.axisBottom(x).ticks(8);

const yAxis = d3.axisRight(y).ticks(10);

const xAxisGrid = d3

.axisBottom(x)

.tickSize(-INNER_HEIGHT)

.tickFormat("")

.ticks(8);

const yAxisGrid = d3

.axisRight(y)

.tickSize(-INNER_WIDTH)

.tickFormat("")

.ticks(10);

svg

.append("g")

.attr("class", "x axis-grid")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxisGrid);

svg

.append("g")

.attr("class", "y axis-grid")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxisGrid);

svg

.append("g")

.attr("class", "x axis")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxis);

svg

.append("g")

.attr("class", "y axis")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxis);

svg

.selectAll("circle.median")

.data(visitors)

.join("circle")

.attr("class", "tweets")

.attr("r", 5)

.attr("cx", (d) => x(d.day))

.attr("cy", (d) => y(d.median))

.style("fill", "darkgray");

return target;

}

height = 340

vis2 = {

const target = html`<svg id="target" viewBox="-20 -20 ${width} ${height}"></svg>`;

const svg = d3.select(target);

const WIDTH = 410;

const HEIGHT = 310;

const MARGIN = { top: 10, right: 10, bottom: 10, left: 10 };

const INNER_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

const INNER_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

const x = d3.scaleLinear().domain([1, 8]).range([0, INNER_WIDTH]);

const y = d3.scaleLinear().domain([0, 100]).range([INNER_HEIGHT, 0]);

const xAxis = d3.axisBottom(x).ticks(8);

const yAxis = d3.axisRight(y).ticks(10);

const xAxisGrid = d3

.axisBottom(x)

.tickSize(-INNER_HEIGHT)

.tickFormat("")

.ticks(8);

const yAxisGrid = d3

.axisRight(y)

.tickSize(-INNER_WIDTH)

.tickFormat("")

.ticks(10);

svg

.append("g")

.attr("class", "x axis-grid")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxisGrid);

svg

.append("g")

.attr("class", "y axis-grid")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxisGrid);

svg

.append("g")

.attr("class", "x axis")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxis);

svg

.append("g")

.attr("class", "y axis")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxis);

svg

.selectAll("circle.median")

.data(visitors)

.join("circle")

.attr("class", "tweets")

.attr("r", 5)

.attr("cx", (d) => x(d.day))

.attr("cy", (d) => y(d.median))

.style("fill", "darkgray");

svg

.selectAll("g.box")

.data(visitors)

.join("g")

.attr("class", "box")

.attr("transform", (d) => `translate(${x(d.day)}, ${y(d.median)})`)

.each(function (d, i) {

d3.select(this)

.append("rect")

.attr("width", 20)

.attr("height", y(d.q1) - y(d.q3));

});

return target;

}

vis3 = {

const target = html`<svg id="target" viewBox="-20 -20 ${width} ${height}"></svg>`;

const svg = d3.select(target);

const WIDTH = 410;

const HEIGHT = 310;

const MARGIN = { top: 10, right: 10, bottom: 10, left: 10 };

const INNER_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

const INNER_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

const x = d3.scaleLinear().domain([1, 8]).range([0, INNER_WIDTH]);

const y = d3.scaleLinear().domain([0, 100]).range([INNER_HEIGHT, 0]);

const xAxis = d3.axisBottom(x).ticks(8);

const yAxis = d3.axisRight(y).ticks(10);

const xAxisGrid = d3

.axisBottom(x)

.tickSize(-INNER_HEIGHT)

.tickFormat("")

.ticks(8);

const yAxisGrid = d3

.axisRight(y)

.tickSize(-INNER_WIDTH)

.tickFormat("")

.ticks(10);

svg

.append("g")

.attr("class", "x axis-grid")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxisGrid);

svg

.append("g")

.attr("class", "y axis-grid")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxisGrid);

svg

.append("g")

.attr("class", "x axis")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxis);

svg

.append("g")

.attr("class", "y axis")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxis);

svg

.selectAll("circle.median")

.data(visitors)

.join("circle")

.attr("class", "tweets")

.attr("r", 5)

.attr("cx", (d) => x(d.day))

.attr("cy", (d) => y(d.median))

.style("fill", "darkgray");

svg

.selectAll("g.box")

.data(visitors)

.join("g")

.attr("class", "box")

.attr("transform", (d) => `translate(${x(d.day)}, ${y(d.median)})`)

.each(function (d, i) {

d3.select(this)

.append("rect")

.attr("width", 20)

.attr("x", -10)

.attr("y", y(d.q3) - y(d.median))

.attr("height", y(d.q1) - y(d.q3))

.style("fill", "white")

.style("stroke", "black");

});

return target;

}

vis4 = {

const target = html`<svg id="target" viewBox="-20 -20 ${width} ${height}"></svg>`;

const svg = d3.select(target);

const WIDTH = 410;

const HEIGHT = 310;

const MARGIN = { top: 10, right: 10, bottom: 10, left: 10 };

const INNER_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

const INNER_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

const x = d3.scaleLinear().domain([1, 8]).range([0, INNER_WIDTH]);

const y = d3.scaleLinear().domain([0, 100]).range([INNER_HEIGHT, 0]);

const xAxis = d3.axisBottom(x).ticks(8);

const yAxis = d3.axisRight(y).ticks(10);

const xAxisGrid = d3

.axisBottom(x)

.tickSize(-INNER_HEIGHT)

.tickFormat("")

.ticks(8);

const yAxisGrid = d3

.axisRight(y)

.tickSize(-INNER_WIDTH)

.tickFormat("")

.ticks(10);

svg

.append("g")

.attr("class", "x axis-grid")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxisGrid);

svg

.append("g")

.attr("class", "y axis-grid")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxisGrid);

svg

.append("g")

.attr("class", "x axis")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxis);

svg

.append("g")

.attr("class", "y axis")

.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxis);

svg

.selectAll("circle.median")

.data(visitors)

.join("circle")

.attr("class", "tweets")

.attr("r", 5)

.attr("cx", (d) => x(d.day))

.attr("cy", (d) => y(d.median))

.style("fill", "darkgray");

svg

.selectAll("g.box")

.data(visitors)

.join("g")

.attr("class", "box")

.attr("transform", (d) => `translate(${x(d.day)}, ${y(d.median)})`)

.each(function (d, i) {

d3.select(this)

.append("line")

.attr("class", "range")

.attr("x1", 0)

.attr("x2", 0)

.attr("y1", y(d.max) - y(d.median))

.attr("y2", y(d.min) - y(d.median))

.style("stroke", "black")

.style("stroke-width", "4px");

d3.select(this)

.append("line")

.attr("class", "max")

.attr("x1", -10)

.attr("x2", 10)

.attr("y1", y(d.max) - y(d.median))

.attr("y2", y(d.max) - y(d.median))

.style("stroke", "black")

.style("stroke-width", "4px");

d3.select(this)

.append("line")

.attr("class", "min")

.attr("x1", -10)

.attr("x2", 10)

.attr("y1", y(d.min) - y(d.median))

.attr("y2", y(d.min) - y(d.median))

.style("stroke", "black")

.style("stroke-width", "4px");

d3.select(this)

.append("rect")

.attr("class", "range")

.attr("width", 20)

.attr("x", -10)

.attr("y", y(d.q3) - y(d.median))

.attr("height", y(d.q1) - y(d.q3))

.style("fill", "white")

.style("stroke", "black")

.style("stroke-width", "2px");

d3.select(this)

.append("line")

.attr("x1", -10)

.attr("x2", 10)

.attr("y1", 0)

.attr("y2", 0)

.style("stroke", "darkgray")

.style("stroke-width", "4px");

});

return target;

}

vis5 = {

const target = html`<svg id="target" viewBox="-20 -20 ${width} 440"></svg>`;

const svg = d3.select(target);

const WIDTH = 410;

const HEIGHT = 410;

const MARGIN = { top: 10, right: 10, bottom: 10, left: 10 };

const INNER_WIDTH = WIDTH - MARGIN.left - MARGIN.right;

const INNER_HEIGHT = HEIGHT - MARGIN.top - MARGIN.bottom;

const x = d3.scaleLinear().domain([0, 100]).range([0, INNER_WIDTH]);

const y = d3.scaleLinear().domain([0, 7]).range([INNER_HEIGHT, 0]);

const xAxis = d3.axisBottom(x).ticks(10);

const yAxis = d3.axisLeft(y).ticks(8);

const xAxisGrid = d3

.axisBottom(x)

.tickSize(-INNER_WIDTH)

.tickFormat("")

.ticks(10);

const yAxisGrid = d3

.axisLeft(y)

.tickSize(-INNER_HEIGHT)

.tickFormat("")

.ticks(8);

svg

.append("g")

.attr("class", "x axis-grid")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxisGrid);

svg

.append("g")

.attr("class", "y axis-grid")

//.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxisGrid);

svg

.append("g")

.attr("class", "x axis")

.attr("transform", `translate(0, ${INNER_HEIGHT})`)

.call(xAxis);

svg

.append("g")

.attr("class", "y axis")

//.attr("transform", `translate(${INNER_WIDTH},0)`)

.call(yAxis);

svg

.selectAll("circle.median")

.data(visitors)

.join("circle")

.attr("class", "tweets")

.attr("r", 5)

.attr("cx", (d) => x(d.median))

.attr("cy", (d) => y(d.day))

.style("fill", "darkgray");

svg

.selectAll("g.box")

.data(visitors)

.join("g")

.attr("class", "box")

.attr("transform", (d) => `translate(${x(d.median)}, ${y(d.day)})`)

.each(function (d, i) {

d3.select(this)

.append("line")

.attr("class", "range")

.attr("y1", 0)

.attr("y2", 0)

.attr("x2", x(d.max) - x(d.median))

.attr("x1", x(d.min) - x(d.median))

.style("stroke", "black")

.style("stroke-width", "4px");

d3.select(this)

.append("line")

.attr("class", "max")

.attr("y1", -10)

.attr("y2", 10)

.attr("x2", x(d.max) - x(d.median))

.attr("x1", x(d.max) - x(d.median))

.style("stroke", "black")

.style("stroke-width", "4px");

d3.select(this)

.append("line")

.attr("class", "min")

.attr("y1", -10)

.attr("y2", 10)

.attr("x2", x(d.min) - x(d.median))

.attr("x1", x(d.min) - x(d.median))

.style("stroke", "black")

.style("stroke-width", "4px");

d3.select(this)

.append("rect")

.attr("class", "range")

.attr("height", 20)

.attr("y", -10)

.attr("y", y(d.q3) - y(d.median))

.attr("height", y(d.q1) - y(d.q3))

.style("fill", "white")

.style("stroke", "black")

.style("stroke-width", "2px");

d3.select(this)

.append("line")

.attr("x1", 0)

.attr("x2", 0)

.attr("y1", -10)

.attr("y2", 10)

.style("stroke", "darkgray")

.style("stroke-width", "4px");

});

return target;

}

players = FileAttachment("players_20.csv").csv({ typed: true })

Purpose-built for displays of data