31:Td14,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const g = svg.append("g") .selectAll("g") .data(bins) .join("g"); g.append("path") .attr("stroke", "currentColor") .attr("d", d => ` M${x(d.key) + x.bandwidth() / 2},${y(d.value.range[1])} V${y(d.value.range[0])} `); g.append("path") .attr("fill",d => color(d.value.gender)) .attr("opacity", 0.5) .attr("d", d => ` M${x(d.key) + 1},${y(d.value.quartiles[2])} H${x(d.key) + x.bandwidth()} V${y(d.value.quartiles[0])} H${x(d.key) + 1} Z `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, allInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, allInfo) }); g.append("path") .attr("stroke", "currentColor") .attr("stroke-width", 3) .attr("d", d => ` M${x(d.key) + 1},${y(d.value.quartiles[1])} H${x(d.key) + x.bandwidth()} `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, medianInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, medianInfo) });; g.append("path") .attr("stroke", "currentColor") .attr("stroke-width", 3) .attr("d", d => ` M${x(d.key) + x.bandwidth() * 0.25},${y(d.value.range[0])} H${x(d.key) + x.bandwidth() * 0.75} `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, minIQRInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, minIQRInfo) }); g.append("path") .attr("stroke", "currentColor") .attr("stroke-width", 3) .attr("d", d => ` M${x(d.key) + x.bandwidth() * 0.25},${y(d.value.range[1])} H${x(d.key) + x.bandwidth() * 0.75} `) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, maxIQRInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, maxIQRInfo) }); g.append("g") .attr("fill", "currentColor") .attr("fill-opacity", 0.5) .attr("stroke", "none") .attr("transform", d => `translate(${x(d.key) + x.bandwidth() / 2},0)`) .selectAll("circle") .data(d => d.value.values) .join("circle") .attr("r", 8) .attr("cx", () => (Math.random() - 0.5) * 10) .attr("cy", d => y(d.y)) .on('mouseover', function(d, i) { const t = d3.transition('enlarge').duration(500) tooltipMouseOver(d, i, t, chapterInfo) }) .on('mouseout', function(d, i) { const t = d3.transition('dwindle').duration(500) tooltipMouseOut(d, i, t, chapterInfo) }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }32:[{"id":"945131962d4e88e17299be3852aa2854b7ff79a4720affb6afdd9aac80cec3a01b6b785f5c3527c2957847ddb81113aad291e31d8c38a5f3fd2f0af901d086a1","href":"https://static.observableusercontent.com/files/945131962d4e88e17299be3852aa2854b7ff79a4720affb6afdd9aac80cec3a01b6b785f5c3527c2957847ddb81113aad291e31d8c38a5f3fd2f0af901d086a1","name":"teotw_pov_box@1.csv","type":"text/csv","lastModified":1589256263327.438,"size":15991}] 2f:{"title":"Box Plot Wheel of Time Chapter Length","cells":[{"id":0,"value":"md`# Box Plot Wheel of Time Chapter Length\n\nA box-and-whisker plot shows summary statistics of a quantitative distribution. Here, the price distribution (*y*-axis) of word count per chapter and (*x*-axis) is the character from whose viewpoints they correspond.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"bins = d3.nest() // nest function allows to group the calculation per level of a factor\n .key(function(d) { return d.x;})\n .rollup(function(d) {\n const values = d.map(function(g) { return { y: g.y, chapter: g.chapter};}).sort((a, b) => d3.ascending(a.y, b.y))\n const min = values[0].y;\n const max = values[values.length - 1].y;\n const q1 = d3.quantile(values.map(ch => ch.y), 0.25);\n const q2 = d3.quantile(values.map(ch => ch.y), 0.50);\n const q3 = d3.quantile(values.map(ch => ch.y), 0.75);\n const iqr = q3 - q1; // interquartile range\n const r0 = Math.max(min, q1 - iqr * 1.5);\n const r1 = Math.min(max, q3 + iqr * 1.5);\n return {\n values,\n gender: d[0].gender,\n nationality: d[0].nationality,\n quartiles:[q1, q2, q3],\n range: [r0, r1],\n outliers: values.filter(v => v.y < r0 || v.y > r1), \n };\n })\n .entries(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = d3.csvParse(await FileAttachment(\"teotw_pov_box@1.csv\").text(), ({character, word_count, gender, chapter, nationality}) => ({x: character, y: +word_count, gender, nationality, chapter}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"x = d3.scaleBand()\n .domain(bins.map(bin => bin.key))\n .rangeRound([margin.left, width - margin.right])\n .paddingInner(0.05)\n .paddingOuter(.1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"y = d3.scaleLinear()\n .domain([d3.min(bins, d => d.value.range[0]), d3.max(bins, d => d.value.range[1])]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(n).tickSizeOuter(0))\n .call(g => g.selectAll('text').attr(\"y\", 0)\n .attr(\"x\", 10)\n .attr(\"dy\", \".35em\")\n .attr(\"transform\", \"rotate(85)\")\n .attr(\"text-anchor\", \"start\")\n .style('font-size', fontSize)\n .classed('box-plot-tick', true))","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, \"s\"))\n .call(g => g.selectAll('.tick').style('font-size', fontSize).classed('box-plot-tick', true))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"color = d3.scaleOrdinal([\"#888888\", \"#bbbbbb\", \"green\", \"#5B8B9B\", \"#77C0A0\", \"#264D54\", \"#324280\", \"#D27AE9\", \"#867AC4\", \"#72329E\", \"#BEE091\", \"#48853A\", \"#8BEC6E\", \"#8B9662\", \"#663B11\", \"#F3A852\", \"#E0502F\", \"#932846\", \"#A17965\", \"#E7799E\", \"#EC3686\", \"#414B17\", \"#F0D447\", \"#4141F5\", \"#E743F4\"]).domain([\"last appeared\", \"last mentioned\", \"continue\", \"not specified\", \"Female\", \"Male\", \"Andoran\", \"Unknown nationality\", \"Shienaran\", \"Malkieri\", \"Manetherenite\", \"Illianer\", \"Taraboner\", \"Ghealdanin\", \"Aridholin\", \"Essenian\", \"Far Madding\", \"Darmovanin\", \"Saldaean\", \"Murandian\" ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"n = width / 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"height = (width < 600 ? 700 : width < 800 ? 1200 : 1500)","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"margin = ({top: 20, right: 0, bottom: width / 4, left: width / 15})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"allInfo = function(d) {\n \n return `\n Minimum IQR: ${d.value.range[0]} words
\nQ1 (25%): ${d.value.quartiles[0]} words
\nQ2 (Median): ${d.value.quartiles[1]} words
\nQ3 (75%): ${d.value.quartiles[2]} words
\nMaximum IQR: ${d.value.range[1]} words
\nNumber of POVs.: ${d.value.values.length}\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":357,"value":"minIQRInfo = function(d) {\n \n return `\n Minimum IQR: ${d.value.range[0]} words\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":358,"value":"maxIQRInfo = function(d) {\n \n return `\n Maximum IQR: ${d.value.range[1]} words\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":365,"value":"chapterInfo = function(d) {\n \n return `\n ${d.y} words POV in ${d.chapter}.\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":369,"value":"medianInfo = function(d) {\n \n return `\n Q2 (Median): ${d.value.quartiles[1]} words\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":343,"value":"function tooltipMouseOver(d, i, t, info) {\n let el = d3.select(\"body\");\n \n let div = el\n .append(\"g\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0);\n\n div\n .html(info(d))\n .style(\"left\", (d3.event.pageX + 10) + \"px\")\n .style(\"top\", (d3.event.pageY - 10) + \"px\")\n .transition(t)\n .style(\"opacity\", 0.9)\n ;\n \n let el2 = d3.select(this);\n \n el2\n .transition(t)\n .style(\"fill-opacity\", 0.9)\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", \"1px\")\n .style(\"stroke-opacity\", 0.7);\n \n \n}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"fontSize = width / 40","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"function tooltipMouseOut(d, i, t) {\n let el = d3.selectAll(\".tooltip\");\n \n el.each(function() {\n\t\tel.remove();\n\t}); \n let el2 = d3.select(this);\n \n el2\n .transition(t)\n .style(\"fill-opacity\", 0.5)\n .style(\"stroke-width\", \"0px\");\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"tooltip = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}