2b:null 2c:["$","title",null,{"children":"Stacked Multi Chart | 3sam3 | Observable"}] 31:T5b4,function hover(selection) { const separator = xAxisExtent / data.category.length; const barSegmentSize = x.bandwidth() / data.byTypes.bars.length; selection .on('mouseenter', entered) .on('mousemove', moved) .on('mouseleave', leaved) selection.select('#dot').remove(); const dot = selection.append("g") .attr('id', 'dot') .attr("display", "none") .raise(); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("y", -8); function moved(e) { const mouse = [e.layerX, e.layerY]; if(mouse[0] < margin.left || mouse[0] >= width - margin.right) return; const idx = Math.floor((mouse[0] - margin.left) / separator); const yValue = y.invert(mouse[1]); const { line, area, bar } = data.byTypes.stack.data; const s = d3.least( [...line, ...area, ...bar], d => !d.key.display ? Number.MAX_SAFE_INTEGER : Math.abs(d[idx][1] - yValue) ) // console.log(s) // console.log(y(s[idx][1])) const xPos = (x(data.category[idx]) + x.bandwidth() / 2); dot.attr("transform", `translate(${xPos},${y(s[idx][1])})`); dot.select("text").text(`name : ${s.key.name}, value : ${s[idx][1]}`); } function entered() { dot.attr("display", 'block'); } function leaved() { dot.attr("display", 'none'); } }32:T467,addLegend = (selection) => { const lineLegend = d3.select('#legend-lines') const areaLegend = d3.select('#legend-areas') const barLegend = d3.select('#legend-bars') const { lines, areas, bars } = data.byTypes; addList(lineLegend, lines); addList(areaLegend, areas); addList(barLegend, bars); function addList(legend, data) { legend .selectAll('li') .data(data) .join('li') .text(d => d.name) .on('click', (e, d) => { toggleSelection(d); }) .on('dblclick', (e, d) => { toggleFalse([lines, areas, bars]); toggleSelection(d); }) } function toggleFalse(selections) { selections.map(selection => { selection.map(d => d.display = false) }) } function toggleSelection (d) { d.display = !d.display; if(d.display) { data.byTypes.stack.view[d.type].push(d); } initStackView(data.category, data.byTypes) setTimeout( () => { const event = document.createEvent('Event'); event.initEvent('update', true, true); document.dispatchEvent(event); }, 200) } }33:T402,data = { const formatTime = d3.timeFormat("%B %d, %Y"); const types = ['line', 'bar', 'area']; let category = []; const series = []; for(let i = 0; i < xAxisCount; i++) category.push(formatTime(new Date - 1000*60*60*24*i)); category.reverse(); for(let i = 0; i < numOfSeries; i++) { const tmp = { type: types[i%types.length], name : `aa${i}`, values: [] } for(let j = 0; j < xAxisCount; j++) { tmp.values.push(Math.random()* Math.random()* 10); } series.push(tmp); } series.sort((a, b) => (a.type < b.type) ? 1 : -1) const byTypes = { bars : [], lines : [], areas : [], stack : { view : { line : [], bar: [], area : [] }, data : {} } } series.map(s => { s.display = true; if (s.type === 'bar') byTypes.bars.push(s) else if(s.type === 'line') byTypes.lines.push(s) else byTypes.areas.push(s); }) ; initStackView(category, byTypes); return { category, series, byTypes, } }34:[] 2f:{"id":"21db7388165012dc","slug":"stacked-area-chart-update-testing","title":"Stacked Multi Chart","thumbnail":"db733e45e269a6e0f2157c7d896fb238b4f04fedd2f74ca126dcd9da0519f961","access_level":"public","create_time":"$D2020-09-04T07:21:07.175Z","update_time":"$D2020-09-08T19:23:47.810Z","view_time":null,"first_public_time":"$D2020-09-07T04:02:21.045Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":"starter_2024"},"version":873,"publish_version":873,"role":null,"authored":false,"authors":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null}],"members":[{"type":"individual","id":"fc3b848d8db8ae07","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"8d988b71e2e99afd","slug":"d3","title":"D3","owner":{"id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3"}},"type":"notebook","body":{"title":"Stacked Multi Chart","cells":[{"id":0,"value":"md`# Stacked Multi Chart`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"viewof numOfSeries = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"viewof xAxisCount = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"viewof legend = html`\n

these are legends. click each elements to see what happens.

*line

*area

*bars

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"chart = { \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n svg\n .call(addLine)\n .call(addArea)\n .call(addBar)\n .call(hover)\n .call(addLegend)\n \n const gx = svg.append(\"g\")\n .call(xAxis)\n .selectAll(\"text\")\n .style(\"text-anchor\", \"end\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", \"rotate(-45)\");\n\n const gy = svg.append(\"g\")\n .call(yAxis);\n\n return Object.assign(svg.node(), {\n update(domain) {\n const t = svg.transition().duration(750);\n \n if(data.category.length !== x.domain().length){\n x.domain(data.category);\n gx.transition(t).call(xAxis, x); \n }\n \n y.domain(domain);\n gy.transition(t).call(yAxis, y);\n \n svg\n .call(addLine, true)\n .call(addBar, true)\n .call(addArea, true)\n \n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":195,"value":"function addBar(selection, update) {\n selection = update ? d3.select('#bars') : selection.append('g');\n selection\n // .append(\"g\")\n .attr('id', 'bars')\n .selectAll(\"g\")\n .data(data.byTypes.stack.data.bar)\n .join(\"g\")\n .attr(\"fill\", d => color(d.key.name))\n .selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(data.category[i]))\n .attr(\"y\", d => y(d[1]))\n .attr(\"height\", d => y(d[0]) - y(d[1]))\n .attr(\"width\", x.bandwidth())\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"function addArea(selection, update) {\n selection = update ? d3.select('#areas') : selection.append('g');\n \n selection\n .attr('id', 'areas')\n .selectAll(\"path\")\n .data(data.byTypes.stack.data.area)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr('fill-opacity', 0.5)\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"fill\", d => color(d.key.name))\n .attr('stroke', 'none')\n .attr(\"d\", area)\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"function addLine(selection, update) {\n selection = update ? d3.select('#lines') : selection.append('g');\n \n selection\n // .append(\"g\")\n .attr('id', 'lines')\n .selectAll(\"path\")\n .data(data.byTypes.stack.data.line)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr('fill-opacity', 0.5)\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr('stroke', d => color(d.key.name))\n .attr(\"fill\", 'none')\n .attr(\"d\", line)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"stackSeries = (key, category) => {\n return d3.stack()\n .keys(key)\n .value((d, key, i) => {\n return key.values[i];\n })\n (category)\n}\n// series = d3.stack()\n// .keys(data.series)\n// .value((d, key, i) => {\n// return key.values[i];\n// })\n// (data.category)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":363,"value":"line = d3.line()\n // .defined(d => !isNaN(d))\n .x((d, i) => x(data.category[i]) + x.bandwidth() / 2)\n .y(d => y(d[1]))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"area = d3.area()\n .x((d, i) => x(data.category[i]) + x.bandwidth() / 2)\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"x = d3.scaleBand()\n .domain(data.category.map(d => d))\n .range([margin.left, width - margin.right])\n .padding(0.03)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"y = d3.scaleLinear()\n// .domain([0, d3.max(data.series, d => d3.max(d.values))]).nice()\n// .domain([0, d3.max(data.byTypes.stack.data.area, d => d3.max(d, d => d[1]))]).nice()\n.domain(\n [0 ,d3.max(\n [\n d3.max(data.byTypes.stack.data.line, d => d3.max(d, d => d[1])),\n d3.max(data.byTypes.stack.data.area, d => d3.max(d, d => d[1])),\n d3.max(data.byTypes.stack.data.bar, d => d3.max(d, d => d[1])),\n ],\n d => d\n )]\n).nice()\n\n.range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"color = d3.scaleOrdinal(d3.schemePaired).domain([0, 255])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"xAxisExtent = width - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"margin = ({top: 20, right: 30, bottom: 70, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"{\n document.addEventListener('update', function (e) {\n\n const domain = [0 ,d3.max(\n [\n d3.max(data.byTypes.stack.data.line, d => d3.max(d, d => d[1])),\n d3.max(data.byTypes.stack.data.area, d => d3.max(d, d => d[1])),\n d3.max(data.byTypes.stack.data.bar, d => d3.max(d, d => d[1])),\n ],\n d => d\n )]\n chart.update(domain);\n }, false);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":"unselectedColor = '#ddd'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":623,"value":"function initStackView(category, byTypes) {\n const view = {\n line : [],\n bar: [],\n area : []\n };\n byTypes.stack.view = view;\n \n byTypes.lines.map(d => d.display ? view.line.push(d) : null);\n byTypes.areas.map(d => d.display ? view.area.push(d) : null);\n byTypes.bars.map(d => d.display ? view.bar.push(d) : null);\n\n byTypes.stack.data.line = stackSeries(view.line , category)\n byTypes.stack.data.bar = stackSeries(view.bar , category)\n byTypes.stack.data.area = stackSeries(view.area , category) \n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"