2b:null 2c:["$","title",null,{"children":"Stephanie's attempt at A4 | span728 | Observable"}] 31:T4ef,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const rect = svg.selectAll("g") .data(y01z) .join("g") .attr("fill", (d, i) => z(i)) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", height - margin.bottom) .attr("width", x.bandwidth()) .attr("height", 0); svg.append("g") .call(xAxis); function transitionGrouped() { y.domain([0, yMax]); rect.transition() .duration(500) .delay((d, i) => i * 20) .attr("x", (d, i) => x(i) + x.bandwidth() / n * d[2]) .attr("width", x.bandwidth() / n) .transition() .attr("y", d => y(d[1] - d[0])) .attr("height", d => y(0) - y(d[1] - d[0])); } function transitionStacked() { y.domain([0, y1Max]); rect.transition() .duration(500) .delay((d, i) => i * 20) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .transition() .attr("x", (d, i) => x(i)) .attr("width", x.bandwidth()); } function update(layout) { if (layout === "stacked") transitionStacked(); else transitionGrouped(); } return Object.assign(svg.node(), {update}); }32:[{"id":"0ef21a688654ebba9e50d899f3809e2f999289242f80e1232931761cbbb0f9b309d9d24a211afa8b03005bc3002ce9cfed7db1e1caeae88c941dd347695d21cd","href":"https://static.observableusercontent.com/files/0ef21a688654ebba9e50d899f3809e2f999289242f80e1232931761cbbb0f9b309d9d24a211afa8b03005bc3002ce9cfed7db1e1caeae88c941dd347695d21cd","name":"bechdel_genre_vfinal.csv","type":"text/csv","lastModified":1583196915307.416,"size":1536}] 2f:{"id":"1f9a288c3bf8c217","slug":"stephanies-attempt-at-a4","title":"Stephanie's attempt at A4","thumbnail":"145e2f606593a341fd3974752183718374c008197fabdde66f6e8c0c9c6e527f","access_level":"public","create_time":"$D2020-03-02T23:37:48.415Z","update_time":"$D2020-03-03T02:30:43.143Z","view_time":null,"first_public_time":"$D2020-03-03T02:04:57.326Z","fork":{"id":"208ac4d6c3f58ab1","slug":"stacked-to-grouped-bars","title":"Stacked-to-grouped bars","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7ced62cecadd0b6a","login":"span728","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ff8535c5ac0e5a305dc4e28583edf6e02b9dd0e4330e748b3a5abf3ab73b8e9a","tier":"starter_2024"},"version":275,"publish_version":275,"role":null,"authored":false,"authors":[{"type":"individual","id":"425e641f78ad13da","login":"span728","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ff8535c5ac0e5a305dc4e28583edf6e02b9dd0e4330e748b3a5abf3ab73b8e9a","tier":null}],"members":[{"type":"individual","id":"425e641f78ad13da","login":"span728","name":"","avatar_url":"https://avatars-next.observableusercontent.com/ff8535c5ac0e5a305dc4e28583edf6e02b9dd0e4330e748b3a5abf3ab73b8e9a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Stephanie's attempt at A4","cells":[{"id":0,"value":"md`# Stephanie's attempt at A4\n\nHello hello`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof layout = {\n const form = html``;\n const timeout = setTimeout(() => {\n form.value = form.radio.value = \"grouped\";\n form.dispatchEvent(new CustomEvent(\"input\"));\n }, 2000);\n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\")); // Safari\n form.oninput = () => { clearTimeout(timeout); form.value = form.radio.value; };\n form.value = form.radio.value;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"chart.update(layout)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"genreAvgScore = d3.nest()\n .key(function(d) { return d.genre; })\n .rollup(function(v) { return d3.mean(v, function(d) { return d.value; }); })\n .entries(data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"moviesByGenre = d3.nest()\n .key(function(d) { return d.genre; })\n .entries(data);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"data = d3.csvParse(await FileAttachment(\"bechdel_genre_vfinal.csv\").text(), ({movie, aggregatescore, genre}) => ({name: movie, value: +aggregatescore, genre: genre})).sort((a, b) => b.value - a.value )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"xz = d3.range(m) // the x-values shared by all series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"yz = d3.range(n).map(() => bumps(m)) // the y-values of each of the n series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"y01z = d3.stack()\n .keys(d3.range(n))\n (d3.transpose(yz)) // stacked yz\n .map((data, i) => data.map(([y0, y1]) => [y0, y1, i]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"yMax = d3.max(yz, y => d3.max(y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"y1Max = d3.max(y01z, y => d3.max(y, d => d[1]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"x = d3.scaleBand()\n .domain(xz)\n .rangeRound([margin.left, width - margin.right])\n .padding(0.08)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"y = d3.scaleLinear()\n .domain([0, y1Max])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"z = d3.scaleSequential(d3.interpolateBlues)\n .domain([-0.5 * n, 1.5 * n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"xAxis = svg => svg.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0).tickFormat(() => \"\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"n = 5 // number of series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"m = 50 // number of values per series","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"margin = ({top: 0, right: 0, bottom: 10, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// Returns an array of m pseudorandom, smoothly-varying non-negative numbers.\n// Inspired by Lee Byron’s test data generator.\n// http://leebyron.com/streamgraph/\nfunction bumps(m) {\n const values = [];\n\n // Initialize with uniform random values in [0.1, 0.2).\n for (let i = 0; i < m; ++i) {\n values[i] = 0.1 + 0.1 * Math.random();\n }\n\n // Add five random bumps.\n for (let j = 0; j < 5; ++j) {\n const x = 1 / (0.1 + Math.random());\n const y = 2 * Math.random() - 0.5;\n const z = 10 / (0.1 + Math.random());\n for (let i = 0; i < m; i++) {\n const w = (i / m - y) * z;\n values[i] += x * Math.exp(-w * w);\n }\n }\n\n // Ensure all values are positive.\n for (let i = 0; i < m; ++i) {\n values[i] = Math.max(0, values[i]);\n }\n\n return values;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"