2f:T61a,vis1 = { const target = html``; 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; }30:T757,vis2 = { const target = html``; 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; }31:T7db,vis3 = { const target = html``; 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; }32:Tc53,vis4 = { const target = html``; 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; }33:Tc46,vis5 = { const target = html``; 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("x", -x(d.median)) .attr("width", x(d.q3) - x(d.q1)) .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; }34:[{"id":"14a345c239a2b7b1e171d0819bdfb71d46de5710f8f6f0d7329a60070da71ec3668b6705dfceee2ed21a467afc6bccf223ecfb1c3f7a10399695452367d560b8","href":"https://static.observableusercontent.com/files/14a345c239a2b7b1e171d0819bdfb71d46de5710f8f6f0d7329a60070da71ec3668b6705dfceee2ed21a467afc6bccf223ecfb1c3f7a10399695452367d560b8","name":"players_20.csv","type":"text/csv","lastModified":1662686040299.599,"size":8945067}] 2d:{"title":"Let's build a boxplot","cells":[{"id":0,"value":"# Let's build a boxplot","pinned":false,"hidden":false,"mode":"md"},{"id":21,"value":"## Data set","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"visitors = d3.csvParse(\n `day,min,max,median,q1,q3,number\n1,14,65,33,20,35,22\n2,25,73,25,25,30,170\n3,15,40,25,17,28,185\n4,18,55,33,28,42,135\n5,14,66,35,22,45,150\n6,22,70,34,28,42,170\n7,14,65,33,30,50,28`,\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"## Vis 1","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"height = 340","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"## Vis 2","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"## Vis 3","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"## Vis 4","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"## Let's build a horizontal boxplot","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"## Data set","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"players = FileAttachment(\"players_20.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}