2c:null 2d:["$","title",null,{"children":"Stackable Multi-chart(line, area, bar) | 3sam3 | Observable"}] 32:T852,function addBrush(svg) { const brush = d3.brushX() .extent([[margin.left, 0], [width - margin.right, height - margin.bottom + 0.5]]); const brushArea = svg.append("g") .attr('id', 'brushArea') .call(brush); brush .on('start', onBrushStart) .on('brush', onBrush) .on('end', onBrushEnd) stamps.stamp.selectAll('button').remove() const inspect = stamps.stamp .append('button') .text('inspect'); const reset = stamps.stamp .append('button') .text('reset') .on('click', () => { brushArea.call(brush.move, null) stamps.stamp.style('visibility', 'hidden') stamps.brushStartStamp.style('visibility', 'hidden') stamps.brushEndStamp.style('visibility', 'hidden') }); function onBrush(e) { console.log('on brush'); const bandWidth = x.bandwidth(); const s = e.selection; if(s) { const separator = xAxisExtent / data.category.length; let x0 = (s[0] - margin.left) / separator; let x1 = (s[1] - margin.left) / separator; x0 = (x0 < 1) ? 0 : x0; const startIdx = Math.floor(x0); const endIdx = Math.ceil(x1 - 1); stamps.brushStartStamp .style('left', s[0] - 50 + 'px') // .style('top', height - margin.bottom + 'px') .style('top', 0 + 'px') .text(data.category[startIdx]); stamps.brushEndStamp .style('left', s[1] - 50 + 'px') // .style('top', height - margin.bottom + 'px') .style('top', 0 + 'px') .text(data.category[endIdx]); } } function onBrushStart() { console.log('on brush start'); stamps.stamp.style('visibility', 'hidden') stamps.brushStartStamp.style('visibility', 'visible') stamps.brushEndStamp.style('visibility', 'visible') } function onBrushEnd(e) { // const s = d3.event.selection; const s = e.selection; if (s) { const left = (s[0] + s[1]) / 2; stamps.stamp .style('left', left - 60 + 'px') // .style('top', height - margin.bottom + 'px') .style('top', 0 + 'px') .style('visibility', 'visible') } } }33:T47b,stamps = ({ stamp : d3 // .select('body') .select('#stamp-container') .append('div') .attr('id', 'inspectStamp') .style('position', 'absolute') .style('z-index', '10') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'), brushStartStamp : d3 // .select('body') .select('#stamp-container') .append('div') .attr('id', 'startTag') .style('position', 'absolute') .style('z-index', '10') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff') .text('start position'), brushEndStamp : d3 // .select('body') .select('#stamp-container') .append('div') .attr('id', 'endTag') .style('position', 'absolute') .style('z-index', '10') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff') .text('end position'), })34:Tefd,function hover(svg, stacked) { svg .on('mouseenter', entered) .on('mousemove', stacked ? movedOnStack : moved) .on('mouseleave', stacked ? stackLeaved : leaved) const barSegmentSize = x.bandwidth() / data.byTypes.bars.length; const separator = xAxisExtent / data.category.length; svg.selectAll('#dot').remove(); const dot = svg.append("g") .attr('id', 'dot') .attr("display", "none") .lower(); 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 movedOnStack(e) { const { lines, areas, bars } = chartSelector; 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 s = d3.least( [ ...data.byTypes.stack.data.line, ...data.byTypes.stack.data.area, ...data.byTypes.stack.data.bar, ], d => !d.key.display ? Number.MAX_SAFE_INTEGER : Math.abs(d[idx][1] - yValue) ) lines.attr('stroke', d => (d===s) ? color(d.key.name) : unselectedColor).filter(d => d === s).raise(); areas.attr('fill', d => (d===s) ? color(d.key.name) : unselectedColor).filter(d => d === s).raise(); bars.attr('fill', (d, i) => (d === s) ? color(d.key.name) : unselectedColor).filter(d => d === s).raise(); 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 moved(e) { const { lines, areas, bars } = chartSelector; 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 s = d3.least(data.series, d => !d.display ? Number.MAX_SAFE_INTEGER : Math.abs(d.values[idx] - yValue)); const barSelector = { selected : false, idx : null } lines.attr('stroke', d => (d===s) ? color(d.name) : unselectedColor).filter(d => d === s).raise(); areas.attr('fill', d => (d===s) ? color(d.name) : unselectedColor).filter(d => d === s).raise(); bars.attr('fill', (d, i) => { if (d === s) { barSelector.selected = true; barSelector.idx = i; return color(d.name); } else { return unselectedColor; } }).filter(d => d === s).raise(); const xPos = barSelector.selected ? (x(data.category[idx]) + barSegmentSize * barSelector.idx + barSegmentSize / 2) : (x(data.category[idx]) + x.bandwidth() / 2); dot.attr("transform", `translate(${xPos},${y(s.values[idx]) })`); dot.select("text").text(`name : ${s.name}, value : ${s.values[idx]}`); } function entered() { const { lines, areas, bars } = chartSelector; lines.attr('stroke', d => unselectedColor) areas.attr('fill', d => unselectedColor) bars.attr('fill', d => unselectedColor) dot.attr("display", 'block'); } function stackLeaved() { const { lines, areas, bars } = chartSelector; lines.attr('stroke', d => color(d.key.name)) areas.attr('fill', d => color(d.key.name)) bars.attr('fill', d => color(d.key.name)) dot.attr("display", 'none'); } function leaved() { const { lines, areas, bars } = chartSelector; lines.attr('stroke', d => color(d.name)) areas.attr('fill', d => color(d.name)) bars.attr('fill', d => color(d.name)) dot.attr("display", 'none'); } }35:T423,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, dataByType) { legend .selectAll('li') .data(dataByType) .join('li') .text(d => d.name) .on('click', (e, d) => { toggleSelection(d); }) .on('dblclick', (e, d) => { toggleFalse(data.series); toggleSelection(d); }) } function toggleFalse(selections) { selections.map(s => s.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) const event = document.createEvent('Event'); event.initEvent('updatebyLegend', false, true); document.dispatchEvent(event); } }36:T5d5,function addBar(selection, update, stacked) { const separationDistance = x.bandwidth() / data.byTypes.bars.length; selection = update ? d3.select('#bars') : selection.append('g'); if(stacked) { selection .attr('id', 'bars') .selectAll("g") .style("mix-blend-mode", "multiply") .data(data.byTypes.stack.data.bar) .style('display', d => d.key.display ? 'inline' : 'none') .join("g") .attr("fill", d => color(d.key.name)) .attr("fill-opacity", 0.5) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(data.category[i])) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) } else { const bGroups = selection.attr('id', 'bars') .selectAll('g') .data(data.byTypes.bars) .join('g') const groups = bGroups.nodes(); bGroups.each((d, idx) => { const bar = d3.select(groups[idx]); bar .style("mix-blend-mode", "multiply") .style('display', d => d.display ? 'inline' : 'none') .attr("fill", d => color(d.name)) .attr("fill-opacity", 0.5) .selectAll("rect") .data(d.values) .join("rect") .attr("x", (d, i) => x(data.category[i]) + idx * separationDistance) .attr("width", x.bandwidth() / data.byTypes.bars.length) .attr("y", d => y ? y(d) : y(d)) .attr("height", d => y ? y(0) - y(d) : y(0) - y(d)); }) } }37:T4f9,{ document.addEventListener('update', function (e) { // console.log(e.stacked) const domain = (e.stacked) ? [0 ,d3.max( [ d3.max(data.byTypes.stack.data.line, d => d3.max(d, d => d[1])), d3.max(data.byTypes.stack.data.area, d => d3.max(d, d => d[1])), d3.max(data.byTypes.stack.data.bar, d => d3.max(d, d => d[1])), ], d => d )] : [0, d3.max(data.series, d => d.display ? d3.max(d.values) : 0)] // const domain = [0, d3.max(data.series, d => d.display ? d3.max(d.values) : 0)]; chart.update(domain, e.stacked); }, false); document.addEventListener('updatebyLegend', function (e) { const domain = (stacked) ? [0 ,d3.max( [ d3.max(data.byTypes.stack.data.line, d => d3.max(d, d => d[1])), d3.max(data.byTypes.stack.data.area, d => d3.max(d, d => d[1])), d3.max(data.byTypes.stack.data.bar, d => d3.max(d, d => d[1])), ], d => d )] : [0, d3.max(data.series, d => d.display ? d3.max(d.values) : 0)] // const domain = [0, d3.max(data.series, d => d.display ? d3.max(d.values) : 0)]; chart.update(domain, stacked); }, false); }38:[] 30:{"id":"9d7a7a2986ce1943","slug":"chart-update-testing","title":"Stackable Multi-chart(line, area, bar)","thumbnail":"b8f2494e4660900727741eeb3757c0066f01bfa63558390515b7f833da6484e1","access_level":"public","create_time":"$D2020-09-04T08:36:47.324Z","update_time":"$D2020-09-08T18:25:07.124Z","view_time":null,"first_public_time":"$D2020-09-04T16:03:02.760Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3","avatar_url":"https://avatars-next.observableusercontent.com/a2e96c3b112567f40c9b46c7e406188726d78758a61e3629e14416286b3868b8","tier":"starter_2024"},"version":1686,"publish_version":1686,"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,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"8d988b71e2e99afd","slug":"d3","title":"D3","owner":{"id":"08b5afb0fd1070b2","login":"3sam3","name":"3sam3"}},"type":"notebook","body":{"titling":"auto","title":"Stackable Multi-chart(line, area, bar)","cells":[{"id":0,"value":"md`# Stackable Multi-chart(line, area, bar)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof numOfSeries = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof xAxisCount = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"viewof legend = html`\n

chart legends. click to see what happens

*line

*area

*bars

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"button = {\n const btn = html``;\n \n btn.addEventListener(\"click\", () => {\n const formatTime = d3.timeFormat(\"%B %d, %Y\");\n data.category.push(Math.random());\n \n data.series.map(datum => {\n datum.values.push(Math.random() * 100000);\n });\n \n initStackView(data.category, data.byTypes)\n \n const event = document.createEvent('Event');\n event.stacked = stacked;\n event.initEvent('update', true, true);\n document.dispatchEvent(event); \n // emitEvent()\n });\n \n return btn;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1351,"value":"viewof stacked = {\n const form = html``;\n \n form.onchange = () => form.dispatchEvent(new CustomEvent(\"input\")); // Safari\n form.oninput = e => {\n form.value = JSON.parse(form.radio.value);\n const event = document.createEvent('Event');\n event.stacked = form.value;\n event.initEvent('update', false, true);\n document.dispatchEvent(event); \n };\n form.value = JSON.parse(form.radio.value);\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1152,"value":"viewof stampContainer = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n const zx = x.copy();\n const gx = svg.append(\"g\").call(xAxis);\n gx.selectAll(\"text\").classed('axis-text', true)\n\n const gy = svg.append(\"g\").call(yAxis);\n \n const chartArea = svg.append('g').attr('id', 'charts')\n .call(addLine)\n .call(addArea)\n .call(addBar)\n .call(initChartSelector)\n .call(addLegend)\n \n svg\n .call(addBrush)\n .call(hover);\n \n return Object.assign(svg.node(), {\n update(domain, stacked) {\n const t = svg.transition().duration(transitionDuration);\n \n x.domain(data.category);\n gx.transition(t).call(xAxis, x);\n gx.selectAll(\"text\").classed('axis-text', true);\n \n y.domain(domain);\n gy.transition(t).call(yAxis, y);\n \n chartArea\n .call(addLine, true, stacked)\n .call(addArea, true, stacked)\n .call(addBar, true, stacked)\n .call(initChartSelector)\n \n svg.call(hover, stacked);\n }\n });\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"function initChartSelector(g) {\n chartSelector.lines = g.select('#lines').selectAll('path');\n chartSelector.areas = g.select('#areas').selectAll('path');\n chartSelector.bars = g.select('#bars').selectAll('g');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"chartSelector = ({});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":626,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"function addLine(selection, update, stacked) {\n selection = update ? d3.select('#lines') : selection.append('g');\n \n const path = selection\n .attr('id', 'lines') \n .selectAll('path') \n .data(stacked ? data.byTypes.stack.data.line : data.byTypes.lines)\n .join(\"path\")\n .style(\"mix-blend-mode\", \"multiply\")\n .attr(\"fill\", 'none')\n .attr('fill-opacity', 0.5)\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n\n if(stacked) {\n path.transition(transitionDuration)\n .attr('d', shapes.stackLine)\n .attr('stroke', d => color(d.key.name))\n .style('display', d => d.key.display ? 'inline' : 'none')\n } else {\n path.transition(transitionDuration)\n .attr('d', d => shapes.line(d.values))\n .attr('stroke', d => color(d.name))\n .style('display', d => d.display ? 'inline' : 'none')\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"function addArea(selection, update, stacked) {\n selection = update ? d3.select('#areas') : selection.append('g');\n \n const path = selection\n .attr('id', 'areas')\n .selectAll('path') \n .data(stacked ? data.byTypes.stack.data.area : data.byTypes.areas)\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 \n if(stacked) {\n path.transition(transitionDuration)\n .attr('d', shapes.stackArea)\n .attr('fill', d => color(d.key.name))\n .style('display', d => d.key.display ? 'inline' : 'none')\n } else {\n path.transition(transitionDuration)\n .attr('d', d => shapes.area(d.values))\n .attr('fill', d => color(d.name))\n .style('display', d => d.display ? 'inline' : 'none')\n }\n \n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"shapes = ({\n line : d3.line()\n .defined(d => !isNaN(d))\n .x((d, i) => x(data.category[i]) + x.bandwidth() / 2)\n .y(d => y(d)),\n \n area : d3.area()\n .curve(d3.curveLinear)\n .x((d, i) => x(data.category[i]) + x.bandwidth() / 2)\n .y0(y(0))\n .y1((d, i) => y(d)),\n \n stackLine : d3.line()\n .x((d, i) => x(data.category[i]) + x.bandwidth() / 2)\n .y(d => y(d[1])),\n \n stackArea : 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])),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"x = d3.scaleBand()\n .domain(data.category)\n .range([margin.left, width - margin.right])\n .padding(0.03)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data.series, d => d.display ? d3.max(d.values) : 0)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"xAxis = (g, scale = x) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(\n d3.axisBottom(scale)\n .ticks(width / 80)\n .tickSizeOuter(0)\n .tickFormat((tickVal, i) => i%3 !== 0 ? '' : tickVal)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"yAxis = (g, scale = y) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n // .call(d3.axisLeft(scale))\n .call(d3.axisLeft(scale)\n .ticks(null, data.format)\n .tickFormat((tickVal) => tickVal >= 1000 ? tickVal/1000 + \"K\" : tickVal\n ))\n .call(g => g.select(\".domain\").remove())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"color = d3.scaleOrdinal(d3.schemePaired).domain([0, 255])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"data = {\n const formatTime = d3.timeFormat(\"%B %d, %Y\");\n const types = ['line', 'bar', 'area'];\n \n let category = [];\n const series = [];\n for(let i = 0; i < xAxisCount; i++) category.push(formatTime(new Date - 1000*60*60*24*i));\n category.reverse();\n \n \n for(let i = 0; i < numOfSeries; i++) {\n const tmp = { type: types[i%types.length], name : `aa${i}`, values: [] }\n for(let j = 0; j < xAxisCount; j++) {\n tmp.values.push(Math.random()* Math.random()* 100000);\n }\n series.push(tmp);\n }\n series.sort((a, b) => (a.type < b.type) ? 1 : -1)\n \n const byTypes = {\n bars : [],\n lines : [],\n areas : [],\n stack : {\n view : {\n line : [],\n bar: [],\n area : []\n },\n data : {}\n }\n }\n series.map(s => {\n s.display = true;\n if (s.type === 'bar') byTypes.bars.push(s)\n else if(s.type === 'line') byTypes.lines.push(s)\n else byTypes.areas.push(s);\n }) ;\n initStackView(category, byTypes);\n \n return {\n category,\n series,\n byTypes\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1262,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"unselectedColor = '#ddd'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"xAxisExtent = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"transitionDuration = 750","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"margin = ({top: 20, right: 30, bottom: 80, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"height = 350","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"