29:null 2a:["$","title",null,{"children":"Animated Stacked Bar Chart | Geoffrey Osgood | Observable"}] 2f:T8de,chart1 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const focus = svg.append("g") .attr("class", "chart1") .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i)) .attr("y", d => y1(d.var1)) .attr("height", d => y1(0) - y1(d.var1)) .attr("width", x.bandwidth()) .attr("fill", (d, i) => color(i)); focus.on('mouseover', function (event, d) { tooltip .html( `

Species: ${d.name}

Value: ${d.var1}

Species: ${d.name}

Value: ${d.value}

Species: ${d.name}

Value: ${d.var2}

Species: ${d.name}

Value: ${d.var2}

` ) .style('pointer-events', 'none') .style('visibility', 'visible') .style('top', event.pageY - 100 + 'px') .style('left', event.pageX - 70 + 'px');; d3.select(this).transition().attr('fill', "#41AB5D"); }) newChart2.on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition().attr('fill', d => color(data.indexOf(data.filter(s => s.name===d.name)[0]))); }); } return svg.node(); }31:[{"id":"4a67b47ebf307e9723ce700bf51325f9a043abfe04cc6922613a111e9e67aeda80a98dda9f8b89c99a53429e407e365a99f24f3c36d557e38902594c6a628e0a","href":"https://static.observableusercontent.com/files/4a67b47ebf307e9723ce700bf51325f9a043abfe04cc6922613a111e9e67aeda80a98dda9f8b89c99a53429e407e365a99f24f3c36d557e38902594c6a628e0a","name":"resultsR@1.json","type":"application/json","lastModified":1615565811516.47,"size":465302}] 2d:{"id":"c26d1aa30fefe2a2","slug":"animated-stacked-bar-chart","title":"Animated Stacked Bar Chart","thumbnail":"04e6795dd21787c6e3ff3ce7a5ee7ea784ef7cc283d1cbc9ff420b2c91b214d8","access_level":"public","create_time":"$D2021-03-11T18:07:03.809Z","update_time":"$D2021-03-28T16:25:06.288Z","view_time":null,"first_public_time":"$D2021-03-12T14:46:07.711Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"adcc1853ed6878eb","login":"gjosgood","name":"Geoffrey Osgood","avatar_url":"https://avatars-next.observableusercontent.com/f1236524bd1f55558b9a203cdc8973bf8bb480dcdd95e723a88baa903180802b","tier":"starter_2024"},"version":664,"publish_version":664,"role":null,"authored":false,"authors":[{"type":"individual","id":"0f7fff9804f75816","login":"gjosgood","name":"Geoffrey Osgood","avatar_url":"https://avatars-next.observableusercontent.com/f1236524bd1f55558b9a203cdc8973bf8bb480dcdd95e723a88baa903180802b","tier":null}],"members":[{"type":"individual","id":"0f7fff9804f75816","login":"gjosgood","name":"Geoffrey Osgood","avatar_url":"https://avatars-next.observableusercontent.com/f1236524bd1f55558b9a203cdc8973bf8bb480dcdd95e723a88baa903180802b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Animated Stacked Bar Chart","cells":[{"id":1,"value":"md`# Animated Stacked Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"selector = {\n \n let groupSelector = [...groups];\n \n let div = d3.create('div');\n \n div.append(\"select\")\n .attr(\"class\", \"selector\")\n .selectAll('option')\n .data([...groupSelector])\n .enter()\n .append('option')\n .text(d => d)\n .attr(\"value\", d => d)\n \n div.on('change', function() {\n let selection = d3.select(this).select(\".selector\").property('value');\n \n let currentData = changeData(selection); \n chart1.update(currentData);\n chart2.update(currentData);\n \n });\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"tooltip = d3\n .select('body')\n .append('div')\n .attr('class', 'd3-tooltip')\n .style('position', 'absolute')\n .style('z-index', '10')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(0,0,0,0.6)')\n .style('border-radius', '4px')\n .style('color', '#fff');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"groups = dataObj.map(d => d.dropdown)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"data = changeData(\"All\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"function changeData (selection) {\n let data = dataObj.filter(d => d.dropdown === selection)[0].series;\n data = data.sort((a, b) => Number(b.var1) - Number(a.var1));\n data.forEach(d => d.value = d.var1)\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"dataObj = {\n let dataObj = teamData.map(function(d) {\n return {\n dropdown: d[dropdown],\n series: d.stats.map(d => ({\n name: d[xVariable],\n var1: d.stats[yVariable[0]][0],\n var2: d.stats[yVariable[1]][0]\n })) \n }\n })\n return (dataObj)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"teamData = {\n \n let teamsResults = await FileAttachment(\"resultsR@1.json\").json()\n \n for (let zone of teamsResults) {\n zone.zone = zone.zone[0];\n zone.stats.forEach(function(sp){\n sp.name = sp.name[0],\n sp.group = sp.group[0]\n })\n }; \n return teamsResults;\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"yVariable = [\"meanAbun\", \"totalFO\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"xVariable = \"name\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"dropdown = \"zone\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"maxY1 = Math.max(...dataObj.map(d => Math.max(...d.series.map(s => s.var1))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"maxY2 = Math.max(...dataObj.map(d => Math.max(...d.series.map(s => s.var2))))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"y1 = d3.scaleLinear()\n .domain([0, maxY1]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"y2 = d3.scaleLinear()\n .domain([0, maxY2]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"yAxis1 = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y1).ticks(null, data.format))\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", margin.top-10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(yLabel[0]))\n .style(\"font-size\", \"1rem\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"yAxis2 = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y2).ticks(null, data.format))\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", margin.top-10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(yLabel[1]))\n .style(\"font-size\", \"1rem\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"yLabel = [\"Mean abundance per unit effort\", \"% occurrence\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"color = d3.scaleSequential().domain([(data.length - 1), 0])\n .interpolator(d3Color.interpolateYlGnBu);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"margin = ({top: 50, right: 10, bottom: 50, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"d3Color = require(\"d3-scale-chromatic\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"