31:T842,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const gx = svg.append("g") .call(xAxis); const gy = svg.append("g") .call(yAxis); svg.append("g") .call(grid); const circles = svg.append("g") .selectAll("circle") .data(data, d => d.name) .join("circle") .attr("cx", d => x(d.povs)) .attr("cy", d => y(d.mean)) .attr("r", d => radiusScale(d.total)) .attr("stroke", "steelblue") .attr("fill", "steelblue") .attr("stroke-width", 0) .attr("fill-opacity", 0.5) .on("mouseover", tooltipMouseOver) .on("mouseout", tooltipMouseOut); const labels = svg.append("g") .attr("font-family", "sans-serif") .style('font-size', fontSize) .selectAll("text") .data(data) .join("text") .attr("dy", "0.35em") .attr("x", d => x(d.povs) + radiusScale(d.total) + 7) .attr("y", d => y(d.mean)) .text(d => d.name); svg .selectAll('text').style('font-size', fontSize) return Object.assign(svg.node(), { update(xAttribute, yAttribute, aAttribute) { x.domain([0, d3.max(data, d => d[xAttribute])]); y.domain([0, d3.max(data, d => d[yAttribute])]); radiusScale.domain([0, d3.max(data, d => d[aAttribute])]); const t = svg.transition() .duration(750); circles .transition(t) .delay((d, i) => i * 20) .attr('r', d => radiusScale(d[aAttribute])) .attr("cx", d => x(d[xAttribute])) .attr("cy", d => y(d[yAttribute])) labels .transition(t) .delay((d, i) => i * 20) .attr('x', d => x(d[xAttribute]) + radiusScale(d[aAttribute]) + 7) .attr('y', d => y(d[yAttribute])); gx.transition(t) .call(xAxis) .selectAll(".tick") .delay((d, i) => i * 20); gy.transition(t) .call(yAxis) .selectAll(".tick") .delay((d, i) => i * 20) svg .selectAll('text').style('font-size', fontSize) } }); }32:T603,data = { const data = d3.csvParse(dataSource, ({character, chapter_abbr, chapter_order, chapter, word_count}) => ({character, chapter, chapter_abbr, chapter_order: +chapter_order, word_count: +word_count})) const reducedData = data.reduce((characters, current) => { let character = characters.find(c => c.name === current.character) if (!character) { character = {name: current.character, povs: 0, total: 0, values: [], chapters: []} characters.push(character) } character.povs++ character.total += current.word_count character.values.push(current.word_count) character.chapters.push(current.chapter) return characters }, []) return Object.assign(reducedData.map(({name, povs, total, values, chapters}) => { const min = d3.min(values); const max = d3.max(values); const idxMin = values.findIndex(v => v === min) const idxMax = values.findIndex(v => v === max) values.sort() const q1 = d3.quantile(values, 0.25); const q2 = d3.quantile(values, 0.50); const q3 = d3.quantile(values, 0.75); const iqr = q3 - q1; // interquartile range const r0 = Math.max(min, q1 - iqr * 1.5); const r1 = Math.min(max, q3 + iqr * 1.5); return { name, range: [r0, r1], quartiles: [q1, q2, q3], idxMin, idxMax, min, max, mean: total/povs, median: q2, povs, chapters, values, total } }), {x: "Number of POV →", y: "↑ Mean POV words"}) }33:T700,function tooltipMouseOver(d, i) { let el = d3.select("body"); let div = el .append("g") .append("div") .attr("class", "tooltip") .style("opacity", 0); div .html(` Name: ${d.name}
Smaller POV: ${d.values[0]} (${d.chapters[d.idxMin]})
Mean POV: ${Math.round(d.mean)}
Median POV: ${d.median}
Larger POV: ${d.values[d.values.length - 1]} (${d.chapters[d.idxMax]})
Total Word Count: ${d.total}
`) .style("opacity", 0.9) .style("left", (d3.event.pageX + 28) + "px") .style("top", (d3.event.pageY - 28) + "px"); let el2 = d3.select(this); el2 .transition() .duration(100) .style("fill-opacity", 0.9) .style("stroke", "black") .style("stroke-width", "1px") .style("stroke-opacity", 0.7); let guides = d3.select("svg") .append("g") .attr("class", "guides") .style("pointer-events", "none"); guides .append("line") .attr("x1", el2.attr("cx")) .attr("x2", el2.attr("cx")) .attr("y1", el2.attr("cy")) .attr("y2", height - margin.bottom) .style("stroke", el2.attr("fill")) .style("opacity", 0) .transition() .duration(200) .style("opacity", 0.5); guides .append("line") .attr("x1", el2.attr("cx")) .attr("x2", margin.left) .attr("y1", el2.attr("cy")) .attr("y2", el2.attr("cy")) .style("stroke", el2.attr("fill")) .style("opacity", 0) .transition() .duration(200) .style("opacity", 0.5); } 34:[{"id":"20b46093ce08d4fb278078ea734fe0e31d58809d356792bf8b32c55e27b263a9bb05d333fe00127d480e68cd81e47d0114c5b151fb4d00959ec1f75e17e99d4a","href":"https://static.observableusercontent.com/files/20b46093ce08d4fb278078ea734fe0e31d58809d356792bf8b32c55e27b263a9bb05d333fe00127d480e68cd81e47d0114c5b151fb4d00959ec1f75e17e99d4a","name":"teotw-chapter-pov.csv","type":"text/csv","lastModified":1589661108070.484,"size":4605}] 2f:{"title":"Scatterplot Number POVs","cells":[{"id":1,"value":"md`# Scatterplot Number POVs`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"viewof xAttribute = {\n const options = [\n {label: \"Nº of POVs\", value: 'povs'},\n {label: \"Smallest POV\", value: 'min'},\n {label: \"Median POV\", value: 'median'},\n {label: \"Mean POV\", value: 'mean'},\n {label: \"Largest POV\", value: 'max'},\n {label: \"Total POV Word Count\", value: 'total'}\n ];\n \n const form = html`

x Axis' Attribute: ${options.map(o => html`