2d:null 2e:["$","title",null,{"children":"d3 charts | nullhook | Observable"}] 33:T46d,p = { const svg = d3.create('svg').attr('viewBox', [-width / 2, (-height / 2)-50, width,height+50]); const dataset = [ {name: 'GenZ', value: 20, color: 'lightgrey'}, {name: 'Babyboomers', value: 5, color: 'red'}, ]; const arcs = generatePie(dataset); svg.append('g') .attr('stroke', 'white') .attr('stroke-width', 5) .selectAll('path') .data(arcs) .join('path') .attr('fill', d => d.data.color) .attr("d", (d,i) => generateArc(d)) function animateArc() { svg.selectAll('path') .transition() .delay(200) .duration(500) .ease(d3.easePolyOut) .styleTween('transform', (d,i) => { const ip = d3.interpolateTransformCss('scale(1)', 'scale(1.3)'); if (i === 1) { return function(t) { return ip(t); } } }) } const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { animateArc(); observer.disconnect(); } }) }) observer.observe(svg.node()); return svg.node(); }34:T464,x = { const svg = d3.create('svg').attr('viewBox', [-width / 2, (-height / 2)-50, width,height+50]); const dataset = [ {name: 'GenZ', value: 70, color: 'red'}, {name: 'Babyboomers', value: 30, color: 'white'}, ]; const arcs = generatePie(dataset); svg.append('g') .attr('stroke', 'white') .attr('stroke-width', 1) .selectAll('path') .data(arcs) .join('path') .attr('fill', d => d.data.color) .attr("d", (d,i) => generateArc(d)) function animateArc() { svg.selectAll('path') .transition() .delay((d,i) => i*500) .duration(500) .ease(d3.easeQuadOut) .attrTween('d', (d,i) => { const ip = d3.interpolate(d.startAngle+0.1, d.endAngle); return function(t) { d.endAngle = ip(t); return generateArc(d); } }) } const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { animateArc(); observer.disconnect(); } }) }) observer.observe(svg.node()); return svg.node(); }35:Ta20,q = { const svg = d3.create('svg').attr('viewBox', [-width / 2, -height / 2,width,height]); const dataset = [ {name: 'Gen Z', value: 20}, {name: 'Gen X', value: 10}, {name: 'Millennials', value: 5}, ]; const arcs = generatePie(dataset); const arc = d3.arc().innerRadius(50).outerRadius(100); function animateArcs() { svg.selectAll('path') .transition() .delay((d,i) => i*300) .duration(300) .ease(d3.easeQuadOut) .on('start', () => { mutable isAnimating = true }) .on('end', () => { mutable isAnimating = false }) .attrTween('d', (d,i) => { const ip = d3.interpolate(d.startAngle+0.1, d.endAngle) return function(t) { d.endAngle = ip(t); return arc(d); } }); } const tooltip = d3 .select("body") .append("div") .attr("class", "svg-tooltip") .style("position", "absolute") .style("font-family", "sans-serif") .style("visibility", "hidden") .style('background-color', 'white') .style('border', '3px solid lightgrey') .style('padding', '0.5rem 0.5rem 0.2rem 0.5rem') .style('min-width', '50px') .html(` `); svg.append('g') .selectAll('path') .data(arcs) .join('path') .attr('fill', d => colorScale(d.data.name.toLowerCase())) // .attr("d", (d,i) => arc(d)) svg.selectAll('path') .on('mouseover', function(e,d) { d3.select(this).style('opacity', 0.9); tooltip.style("visibility", "visible"); tooltip.select('#name').text(`${d.data.value}%`); tooltip.select('#date').text(`${d.data.name}`); }) .on('mousemove', function(e,d) { tooltip .style("top", e.pageY - 80 + "px") .style("left", e.pageX - 80 + "px"); }) .on('mouseout', function(d,i) { d3.select(this).style('opacity', 1); tooltip.style("visibility", "hidden"); }) const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { animateArcs(); observer.disconnect(); } }) }) observer.observe(svg.node()); refreshBtn.addEventListener('click', () => { if (! (mutable isAnimating)) { svg.selectAll('path').attr('d', (d,i) => arc(0)); animateArcs(); } }); return svg.node(); }36:[] 31:{"id":"98937ad1ebf81613","slug":"charts","title":"d3 charts","thumbnail":"6b17b3c897083d202676ce89b223f28023bea6a2924410c13687f284ade043a7","access_level":"public","create_time":"$D2021-01-18T09:42:05.763Z","update_time":"$D2021-04-16T17:51:39.865Z","view_time":null,"first_public_time":"$D2021-01-18T17:55:13.644Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"11f845e60dba498f","login":"nullhook","name":"nullhook","avatar_url":"https://avatars-next.observableusercontent.com/1cad328a11e08936aab1ffc8c1d8d328981e1b25ff66d7f7bb9b933d5d232e58","tier":"starter_2024"},"version":1113,"publish_version":1113,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa9aa40e2f07b5ca","login":"nullhook","name":"nullhook","avatar_url":"https://avatars-next.observableusercontent.com/1cad328a11e08936aab1ffc8c1d8d328981e1b25ff66d7f7bb9b933d5d232e58","tier":null}],"members":[{"type":"individual","id":"aa9aa40e2f07b5ca","login":"nullhook","name":"nullhook","avatar_url":"https://avatars-next.observableusercontent.com/1cad328a11e08936aab1ffc8c1d8d328981e1b25ff66d7f7bb9b933d5d232e58","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"d3 charts","cells":[{"id":0,"value":"md`# d3 charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"md`## Bar Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart = { \n const svg = d3.create('svg').attr('viewBox', [0,0,width,height+20]);\n \n svg.append('g')\n .attr('fill', 'transparent')\n .selectAll('rect')\n .data(data)\n .join('rect')\n .attr('x', (d,i) => xScale(i))\n .attr('y', d => yScale(0))\n // .attr('height', d => yScale(0) - yScale(d.value))\n .attr('width', xScale.bandwidth())\n .attr('fill', () => `hsl(${Math.random() * 360},90%, 50%)`)\n \n svg.append('g').call(xAxis);\n \n function animateBar() {\n svg.selectAll('rect')\n .transition()\n .delay((d,i) => i*200)\n .ease(d3.easeQuadOut)\n .duration(500)\n .attr('y', d => yScale(d.value))\n .attr('height', d => yScale(0) - yScale(d.value))\n }\n \n animateBar();\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"yScale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"xScale = d3\n .scaleBand()\n .domain(d3.range(data.length))\n .range([0,width])\n .paddingInner(0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height})`)\n .call(d3.axisBottom(xScale).tickSize(0))\n .call(g => g.select('.domain').remove())\n .call(g => g.selectAll('text')\n .data(data)\n .text(d => d.name)\n .style('font-size', '13px')\n .style('font-weight', 'bold')\n )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`## Just Bars`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"bars = d3\n .scaleBand()\n .domain([1,2,3])\n .range([0,width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"renderBars(bars)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":300,"value":"md`## Circles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"{\n const color = d3.scaleOrdinal()\n .domain([0,2])\n .range(['red', 'darkviolet', 'blue']);\n\n return svg`\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"sales2radius = d3.scaleLinear().domain([0,500]).range([0, 200])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"md`## Pie Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"html`

\n\n${colorScale.domain().map(v => html`\n

\n ${v}\n

\n`)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"refreshBtn = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"mutable isAnimating = true;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"colorScale = d3.scaleOrdinal()\n .domain(['gen z', 'millennials', 'gen x'])\n .range(['lightgrey', 'red', 'blue']);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"generateExpandedArc = d3.arc().innerRadius(0).outerRadius(110 + 15)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"generateArc = d3.arc().innerRadius(0).outerRadius(100)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"generatePie = d3.pie().value((d) => d.value);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"md `# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"data = [\n {name: 'Department Stores', value: 90},\n {name: 'Luxury', value: 20},\n {name: 'Off-price', value: 34},\n {name: 'Pop-ups', value: 40},\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"function renderBars(scale) {\n const totalHeight = height * 0.1;\n const c = svg``;\n\n return c;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"margin = ({top: 30, right: 0, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 250;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"