2b:null 2c:["$","title",null,{"children":"SVG vs Canvas | David B. | Observable"}] 31:T6b4,md`This notebook will focus on differences between SVG & Canvas when building visualizations Reason of creating this notebook is that I've used SVG in the past a lot of times and many times I've faced performance problems (and I did some workarounds to overcome that), so I decided to explore other rendering options, which would improve performance. I'll also try not to sacrifice things, which are easy to do in SVG, like interactivity, data binding e.t.c I will try to cover most crucial parts,and only highlight code, which is different, when working with canvas & SVG . Topics we will cover 1. ${check} **[Pros and cons](#theoreticalStuff)** 1. ${check} **[Components](#components)** 1. ${check} [Axis](#axis) * ${check} **[Simple Charts](#simpleCharts)** 1. ${check} [Bar chart](#barChart) * ${check} [Line chart](#lineChart) * ${check} [Scatterplot](#scatterplot) * ${check} [Map](#map) * ${check} [Pie chart](#pieChart) * ${check} **[Interactivity](#interactivity)** 1. ${check} [Picking bound data on event (click, hover)](#boundedData) * ${check} [Tooltip](#tooltip) * ${check} [Transition](#transition) * ${check} [Zoom](#zoom) * ${check} [Drag](#drag) * ${check} [Force](#force) * ${check} [Brushing](#brushing) * ${check} [Lasso selection](#lasso) * ${uncheck} **[Techniques](#techniques)** 1. ${uncheck} [Bounding box properties](#boundingBoxProperties) 1. ${uncheck} [Enter Exit Update Pattern](#boundingBoxProperties) * ${uncheck} **[Styling](#styling)** 1. ${uncheck} [Border](#border) 2. ${uncheck} [Cursor](#cursor) 3. ${uncheck} [Filters](#filters) 1. ${uncheck} [Gradients](gradients) 1. ${uncheck} [Shadows](shadows) `32:T563,html`

SVG		Canvas
PROS	CONS	PROS	CONS
Resolution independent	Performance problems with large count of DOM elements and its transitions	High performance	Performance Degrades as resolution increases
			Can't be styled with CSS
			Data Binding and enter & exit & update requires workaround using dummy elements
			Event binding and interactivity is not as easy as in svg
			Can't inspect Dom visualization elements from devtools

`33:T82e,viewof canvasHoverOutput = { const container = d3.select(html`

`) const chart = container.select('.chart-container'); const mainContext = chart.node().getContext('2d'); mainContext.fillStyle = "steelblue"; let colorCounter=1; let nodeColorMap = {}; const hiddenCanvas = container.select('.hidden-canvas') // .style('display','none') const hiddenContext = hiddenCanvas.node().getContext('2d'); draw(mainContext,false); draw(hiddenContext,true); function draw(context, hidden) { data.forEach(function(p,i) { context.beginPath(); context.arc( i * eachScatterX+20, 100-scatterScaleY(p.value)+10, 10, 0, 2 * Math.PI); // Set corresponding color context.fillStyle = "steelBlue"; // Set unique color for hidden canvas if(hidden){ const color = getColor(colorCounter); nodeColorMap[color] = p; colorCounter+=2; context.fillStyle = color; } context.fill(); }); } function getColor(nextCol){ // generating 256*256*256 unique colors var ret = []; ret.push(nextCol & 0xff); // R ret.push((nextCol & 0xff00) >> 8); // G ret.push((nextCol & 0xff0000) >> 16); // B return "rgb(" + ret.join(',') + ")"; } chart.on('mousemove', processEvent) .on('click', processEvent) function processEvent(){ var mouseX = d3.event.layerX || d3.event.offsetX; var mouseY = d3.event.layerY || d3.event.offsetY; const col = hiddenContext.getImageData(mouseX, mouseY, 1, 1).data; var colKey = 'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')'; const corrData = nodeColorMap[colKey]; if(corrData){ output(corrData,container) } } yield container.node() } 34:T94a,{ const container = d3.select(html`

`) const svg = container.select('svg'); const tip = d3tip().attr('class', 'd3-tip').html(function(d) { return JSON.stringify(d,null,' '); }); svg.call(tip); const chart = container.select('.chart-container'); const mainContext = chart.node().getContext('2d'); mainContext.fillStyle = "steelblue"; let colorCounter=1; let nodeColorMap = {}; const hiddenCanvas = container.select('.hidden-canvas') // .style('display','none') const hiddenContext = hiddenCanvas.node().getContext('2d'); draw(mainContext,false); draw(hiddenContext,true); function draw(context, hidden) { data.forEach(function(p,i) { context.beginPath(); context.arc( i * eachScatterX+20, 100-scatterScaleY(p.value)+10, 10, 0, 2 * Math.PI); // Set corresponding color context.fillStyle = "steelBlue"; // Set unique color for hidden canvas if(hidden){ const color = getColor(colorCounter); nodeColorMap[color] = p; colorCounter+=2; context.fillStyle = color; } context.fill(); }); } function getColor(nextCol){ // generating 256*256*256 unique colors var ret = []; ret.push(nextCol & 0xff); // R ret.push((nextCol & 0xff00) >> 8); // G ret.push((nextCol & 0xff0000) >> 16); // B return "rgb(" + ret.join(',') + ")"; } chart.on('mousemove', processEvent) function processEvent(){ var mouseX = d3.event.layerX || d3.event.offsetX; var mouseY = d3.event.layerY || d3.event.offsetY; const col = hiddenContext.getImageData(mouseX, mouseY, 1, 1).data; var colKey = 'rgb(' + col[0] + ',' + col[1] + ',' + col[2] + ')'; const corrData = nodeColorMap[colKey]; if(corrData){ tip .offset([mouseY,mouseX]) .show(corrData,svg.node()) output({corrData},container) }else{ tip.hide() } } yield container.node() } 35:T5b2,{ const chart = d3.select(html`

`) const copiedData = JSON.parse(JSON.stringify(data)) copiedData.forEach((circle,i)=>{ circle.x = i*eachScatterX_interactivity+20; circle.y = 100-scatterScale_interactivity(circle.value)+10; }) const context = chart.node().getContext('2d'); context.fillStyle = "steelBlue"; const radius = 10; var detachedContainer = d3.select(document.createElement("custom")) const pointsSel = detachedContainer.selectAll('.point') .data(copiedData) .join('circle') .attr('class','point') .attr('cx',(d,i)=>d.x) function render(){ context.clearRect(0, 0, width, 100); detachedContainer .selectAll('.point') .each(function(d){ const circle = d; const node = d3.select(this); context.beginPath(); context.arc( node.attr('cx'), node.attr('cy'), radius, 0, 2 * Math.PI); context.fill(); }) } const interval = setInterval(()=>{ detachedContainer.selectAll('.point') .transition() .duration(1000) .delay((d,i,arr)=>i/arr.length*200) .attr('cx',d=>Math.random()*width) .attr('cy',d=>Math.random()*100) .tween('tick',d=>{ return (t)=>{ render(); } }) },1200) invalidation.then(d=>clearInterval(interval)) // Observablehq specific code for cleaning things up yield chart.node() } 36:T4f5,{ const chart = d3.select(html`

`) const copiedData = JSON.parse(JSON.stringify(data)) copiedData.forEach((circle,i)=>{ circle.x = i*eachScatterX_interactivity+20; circle.y = 100-scatterScale_interactivity(circle.value)+10; }) const context = chart.node().getContext('2d'); context.fillStyle = "steelBlue"; const radius = 10; render(); function render(){ context.clearRect(0, 0, width, 100); copiedData.forEach(circle=>{ // Drawing Circles context.beginPath(); context.arc( circle.x, circle.y, radius, 0, 2 * Math.PI); context.fill(); }) } // Determining whether event happens over circle function dragsubject() { for(let i=0;i`); const forceData = JSON.parse(JSON.stringify(data)); const links = [ {source:'BRA',target:'MOZ'}, {source:'BRA',target:'DEU'}, {source:'BRA',target:'GEO'}, {source:'BRA',target:'CHN'}, ] const simulation = d3.forceSimulation(forceData) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, 50)); const linkElems = chart.selectAll("line") .data(links) .join("line") .attr('stroke','steelblue') const nodes = chart.selectAll('circle') .data(forceData) .join('circle') .attr('fill','steelblue') .attr('r',10) .call(dragSimulation(simulation)); simulation.on("tick", () => { linkElems .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); nodes .attr("cx", d => d.x) .attr("cy", d => d.y); }); yield chart.node() } 38:T894,{ const chart = d3.select(html`

`) const radius = 10; const height = 100; const forceData = JSON.parse(JSON.stringify(data)); const links = [ {source:'BRA',target:'MOZ'}, {source:'BRA',target:'DEU'}, {source:'BRA',target:'GEO'}, {source:'BRA',target:'CHN'}, ] const context = chart.node().getContext('2d'); const canvas = context.canvas; let transform = d3.zoomIdentity; const simulation = d3.forceSimulation(forceData) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, 50)); context.fillStyle = "steelBlue"; simulation.on("tick", () => { render() }); function render(){ context.save(); context.clearRect(0, 0, width, height); console.log('ticking') links.forEach(function(d) { context.beginPath(); context.moveTo(d.source.x, d.source.y); context.lineTo(d.target.x, d.target.y); context.lineWidth = Math.sqrt(d.value); context.strokeStyle = '#aaa'; context.stroke(); }); // Draw nodes forceData.forEach(function(d, i) { context.beginPath(); context.moveTo(d.x + radius, d.y); context.arc(d.x, d.y, radius, 0, 2 * Math.PI); context.fill(); }); context.restore(); } // Determining whether event happens over circle function dragsubject() { for(let i=0;i`) const circles = svgNode.selectAll("circle") .data(data) .join('circle') .attr('fill','steelblue') .attr('cx',(d,i)=>i*eachScatterX+20) .attr('cy',(d,i)=>100-scatterScaleY(d.value)+10) // We should also move the axises as well .attr('r',10) // ---------------- LASSO STUFF . ---------------- function output(value){ svgNode.property("value", value); svgNode.dispatch("input"); } var lasso_start = function() { output({ possibleItems:[], notPossibleItems:lasso.items().data(), selected:[], notSelected:[], }) }; var lasso_draw = function() { output({ possibleItems:lasso.possibleItems().data(), notPossibleItems:lasso.notPossibleItems().data(), selected:[], notSelected:[], }) }; var lasso_end = function() { output({ possibleItems:[], notPossibleItems:lasso.notPossibleItems().data(), selected:lasso.selectedItems().data(), notSelected: lasso.notSelectedItems().data(), }) }; const lasso = d3.lasso() .closePathDistance(305) .closePathSelect(true) .targetArea(svgNode) .items(circles) .on("start",lasso_start) .on("draw",lasso_draw) .on("end",lasso_end); const lassoPath = svgNode.call(lasso); svgNode.selectAll('.lasso .drawn').style('fill-opacity',0.05) svgNode.selectAll('.lasso .origin').style('fill-opacity',0.5) svgNode.selectAll('.lasso .loop_close').style('fill','none').style('stroke-dasharray','4,4') svgNode.selectAll('.lasso path').style('stroke','rgb(80,80,80)').style('stroke-width',2+'px') return svgNode.node(); }3a:[] 2f:{"id":"f7a01bde87e6c0c7","slug":"svg-vs-canvas","title":"SVG vs Canvas","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2019-02-04T09:03:38.090Z","update_time":"$D2024-02-16T18:47:16.953Z","view_time":null,"first_public_time":"$D2021-11-29T19:00:15.734Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024"},"version":1648,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null}],"members":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"2b49b6f11e52cd5c","slug":"learning-materials","title":"Learning materials","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"title":"SVG vs Canvas","cells":[{"id":0,"value":"md`# SVG vs Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`For simplicity, we will have same dataset for all charts `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"data = [\n {id:\"BRA\",value:2},\n {id:\"MOZ\",value:8},\n {id:\"DEU\",value:3},\n {id:\"GEO\",value:6},\n {id:\"CHN\",value:7}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":256,"value":"theoreticalStuff = md`\n---\n# Pros and cons`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"components = md`\n---\n# Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":107,"value":"axis = md`\n---\n## Axis`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"scaleAxis = d3.scaleLinear()\n .domain([d3.min(data,d=>d.value),d3.max(data,d=>d.value)])\n .range([0,width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":131,"value":"axisComp = d3.axisBottom(scaleAxis)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"{\n const chart = d3.select(svg``);\n chart.call(axisComp)\n yield chart.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"md`#### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":146,"value":"{\n const chart = d3.select(html`

`)\n const context = chart.node().getContext('2d');\n \n const tickSize = 5;\n const ticks = scaleAxis.ticks();\n const tickFormat = scaleAxis.tickFormat();\n context.beginPath();\n \n // Domain Line\n context.moveTo(0, 0);\n context.lineTo(width, 0);\n \n // Tick Lines\n ticks.forEach(function(d) {\n context.moveTo(scaleAxis(d), 0);\n context.lineTo(scaleAxis(d), tickSize);\n });\n context.strokeStyle = \"black\";\n context.stroke();\n\n // Tick Texts\n context.textAlign = \"center\";\n context.textBaseline = \"top\";\n ticks.forEach(function(d) {\n context.fillText(tickFormat(d), scaleAxis(d), tickSize);\n });\n\n yield chart.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"simpleCharts = md`\n---\n# Simple charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"barChart = md`\n---\n## Bar`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"eachBarGroupWidth = width/data.length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"barScaleY = d3.scaleLinear()\n.domain([\n 0,\n d3.max(data,d=>d.value)\n])\n.range([0,100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":349,"value":"{\n const chart = d3.select(svg``);\n \n chart.selectAll('.bars')\n .data(data)\n .join('rect')\n .attr('width',10)\n .attr('fill','steelblue')\n .attr('height',d=>barScaleY(d.value))\n .attr('x',(d,i)=>i*eachBarGroupWidth)\n .attr('y',d=>-barScaleY(d.value)+100)\n \n yield chart.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"{\n const chart = d3.select(html`

`)\n const context = chart.node().getContext('2d');\n \n context.fillStyle = \"steelblue\";\n \n data.forEach(function(d,i) {\n context.fillRect(\n eachBarGroupWidth * i, // x\n -barScaleY(d.value) + 100, // y\n 10, // width\n barScaleY(d.value) // height\n );\n });\n \n yield chart.node() \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"lineChart = md`\n---\n## Line `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":426,"value":"eachLineX = width/data.length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"lineScaleY = d3.scaleLinear()\n.domain([\n 0,\n d3.max(data,d=>d.value)\n])\n.range([0,100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":452,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"{\n const chart = d3.select(svg``);\n \n const lineLayout = d3.line()\n .x((d,i) => i * eachLineX)\n .y(d => 100-lineScaleY(d.value))\n \n chart.selectAll('.line')\n .data([data])\n .join('path')\n .attr('d',d=> lineLayout(d))\n .attr('fill','none')\n .attr('stroke','steelblue')\n \n yield chart.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":450,"value":"{\n const chart = d3.select(html`

`)\n const context = chart.node().getContext('2d');\n \n const lineLayout = d3.line()\n .x((d,i) => i * eachLineX)\n .y(d => 100-lineScaleY(d.value))\n .context(context)\n \n context.beginPath();\n lineLayout(data)\n context.strokeStyle = \"steelblue\";\n context.stroke();\n \n yield chart.node() \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":486,"value":"scatterplot = md`\n---\n## Scatterplot `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"eachScatterX = width/data.length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"scatterScaleY = d3.scaleLinear()\n.domain([\n 0,\n d3.max(data,d=>d.value)\n])\n.range([0,100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":491,"value":"{\n const chart = d3.select(svg``);\n \n chart.selectAll('.point')\n .data(data)\n .join('circle')\n .attr('fill','steelblue')\n .attr('cx',(d,i)=>i*eachScatterX+20)\n .attr('cy',(d,i)=>100-scatterScaleY(d.value)+10) // We should also move the axises as well\n .attr('r',10)\n \n yield chart.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":517,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"{\n const chart = d3.select(html`

`)\n const context = chart.node().getContext('2d');\n \n context.fillStyle = \"steelblue\";\n \n data.forEach(function(p,i) {\n context.beginPath();\n context.fillStyle = \"steelblue\";\n context.arc( i * eachScatterX+20, \n 100-scatterScaleY(p.value)+10, \n 10, \n 0, \n 2 * Math.PI);\n context.fill();\n });\n \n yield chart.node() \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"map = md`\n---\n## Map `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"geojsonMap = d3.json('https://raw.githubusercontent.com/bumbeishvili/d3js-boilerplates/gh-pages/Maps/World/data/world_countries.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"dataFeatures = geojsonMap.features.filter(d=>data.map(v=>v.id).includes(d.id));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":555,"value":"mapProjection = d3.geoMercator()\n .scale(80)\n .translate([width * 0.56, 100])\n .center( [43.5, 44]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":543,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"{\n const chart = d3.select(svg``);\n \n const mapPathSvg = d3.geoPath().projection(mapProjection);\n \n chart.selectAll('.mapPaths')\n .data(dataFeatures)\n .join('path')\n .attr('fill','steelblue')\n .attr('d', mapPathSvg)\n \n yield chart.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":545,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"{\n const chart = d3.select(html`

`)\n const context = chart.node().getContext('2d');\n \n const mapPathCanvas = d3.geoPath().projection(mapProjection).context(context);\n \n dataFeatures.forEach(f=>{\n context.beginPath();\n mapPathCanvas(f)\n context.fillStyle='steelBlue'; \n context.fill();\n })\n \n yield chart.node() \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":611,"value":"pieChart = md`\n---\n## Pie `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"pieLayout = d3.pie().value(d=>d.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":621,"value":"pieData = pieLayout(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":615,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":631,"value":"{\n const chart = d3.select(svg``);\n \n const g = chart.append('g')\n .attr('transform',`translate(${width/2},60)`)\n \n const arc = d3.arc()\n .outerRadius(50)\n .innerRadius(0)\n \n g.selectAll('.mapPaths')\n .data(pieData)\n .join('path')\n .attr('fill','steelblue')\n .attr('d', arc)\n \n yield chart.node()\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":617,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":633,"value":"{\n const chart = d3.select(html`

`)\n \n const context = chart.node().getContext('2d');\n context.translate(width / 2, 60);\n \n const arc = d3.arc()\n .outerRadius(50)\n .innerRadius(0)\n .context(context);\n \n pieData.forEach(function(d, i) {\n context.beginPath();\n arc(d);\n context.fillStyle = 'steelblue';\n context.fill();\n });\n \n yield chart.node() \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"interactivity = md`\n---\n# Interactivity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":853,"value":"md`We will use following variables alongide interactivity chapter`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":834,"value":"eachScatterX_interactivity = width/data.length;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":839,"value":"scatterScale_interactivity = d3.scaleLinear()\n.domain([\n 0,\n d3.max(data,d=>d.value)\n])\n.range([0,100])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":896,"value":"// Observable helper to output some values\nfunction output(value,d3Selection) {\n const node = d3Selection.node();\n node.value = value;\n node.dispatchEvent(new CustomEvent('input'))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":849,"value":"boundedData = md`\n---\n## Picking bound data on event (click, hover e.t.c)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":879,"value":"md`Hover over or click points to see bound data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":876,"value":"svgHoverOutput","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"viewof svgHoverOutput={\n const chart = d3.select(svg``);\n \n chart.selectAll('.point')\n .data(data)\n .join('circle')\n .attr('fill','steelblue')\n .attr('cx',(d,i)=>i*eachScatterX_interactivity+20)\n .attr('cy',(d,i)=>100-scatterScale_interactivity(d.value)+10)\n .attr('r',10)\n .on('mousemove',d=>{\n output(d,chart)\n })\n .on('click',d=>{\n output(d,chart)\n })\n \n \n yield chart.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"md`### canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1283,"value":"md`We are using [canvas picking using hidden canvas ](https://observablehq.com/@camargo/canvas-picking-with-a-hidden-canvas?collection=@observablehq/techniques) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":920,"value":"canvasHoverOutput","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":847,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":973,"value":"tooltip = md`\n---\n## Tooltip `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":982,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1017,"value":"{\n const chart = d3.select(svg``);\n const tip = d3tip().attr('class', 'd3-tip').html(function(d) { return JSON.stringify(d,null,' '); });\n chart.call(tip);\n \n chart.selectAll('.point')\n .data(data)\n .join('circle')\n .attr('fill','steelblue')\n .attr('cx',(d,i)=>i*eachScatterX_interactivity+20)\n .attr('cy',(d,i)=>100-scatterScale_interactivity(d.value)+10)\n .attr('r',10)\n .on('mouseover', tip.show)\n .on('mouseout', tip.hide)\n \n yield chart.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":984,"value":" md`### canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1279,"value":"md`We are using [canvas picking using hidden canvas](https://observablehq.com/@camargo/canvas-picking-with-a-hidden-canvas?collection=@observablehq/techniques) `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1031,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1167,"value":"transition = md`\n---\n## Transition `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1172,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1175,"value":"{\n const chart = d3.select(svg``);\n \n chart.selectAll('.point')\n .data(data)\n .join('circle')\n .attr('class','point')\n .attr('fill','steelblue')\n .attr('cx',(d,i)=>i*eachScatterX_interactivity+20)\n .attr('cy',(d,i)=>100-scatterScale_interactivity(d.value)+10)\n .attr('r',10)\n \n const interval = setInterval(()=>{\n chart.selectAll('.point')\n .transition()\n .duration(1000)\n .attr('cx',d=>Math.random()*width)\n .attr('cy',d=>Math.random()*100)\n },1000)\n \n invalidation.then(d=>clearInterval(interval)) // Observablehq specific code for cleaning things up\n yield chart.node();\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1191,"value":"md`### canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1194,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1228,"value":"zoom = md`\n---\n## Zoom & Pan `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1231,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1644,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1240,"value":"{\n const chart = d3.select(svg``);\n const g = chart.append(\"g\");\n\n const zoom = d3.zoom().on(\"zoom\", zoomed);\n chart.call(zoom);\n\n g.append(\"rect\").attr(\"width\", 20).attr(\"height\", 20);\n\n g.selectAll(\".point\")\n .data(data)\n .join(\"circle\")\n .attr(\"class\", \"point\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"cx\", (d, i) => i * eachScatterX_interactivity + 20)\n .attr(\"cy\", (d, i) => 100 - scatterScale_interactivity(d.value) + 10)\n .attr(\"r\", 10);\n\n function zoomed() {\n const transform = d3.event.transform;\n g.attr(\"transform\", transform);\n console.log(\"zooming\");\n }\n\n yield chart.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1236,"value":"md`### canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1258,"value":"{\n const chart = d3.select(html`

`)\n \n const zoom = d3.zoom().on(\"zoom\", zoomed)\n chart.call(zoom)\n \n const copiedData = JSON.parse(JSON.stringify(data))\n copiedData.forEach((circle,i)=>{\n circle.x = i*eachScatterX_interactivity+20;\n circle.y = 100-scatterScale_interactivity(circle.value)+10;\n })\n const context = chart.node().getContext('2d');\n \n context.fillStyle = \"steelBlue\";\n const radius = 10;\n \n render();\n function render(){\n context.clearRect(0, 0, width, 100);\n copiedData.forEach(circle=>{\n context.beginPath();\n context.arc( circle.x, circle.y, radius, 0, 2 * Math.PI);\n context.fill();\n })\n }\n \n function zoomed() {\n var transform = d3.event.transform;\n context.save();\n context.clearRect(0, 0, width, 100);\n context.translate(transform.x, transform.y);\n context.scale(transform.k, transform.k);\n render();\n context.restore();\n }\n \n yield chart.node() \n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":670,"value":"drag = md`\n---\n## Drag `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":755,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":752,"value":"codeBlock = {\n const chart = d3.select(svg``);\n\n const copiedData = JSON.parse(JSON.stringify(data));\n\n const circles = chart\n .selectAll(\".point\")\n .data(copiedData)\n .join(\"circle\")\n .attr(\"fill\", \"steelblue\")\n .attr(\"cx\", (d, i) => i * eachScatterX_interactivity + 20)\n .attr(\"cy\", (d, i) => 100 - scatterScale_interactivity(d.value) + 10)\n .attr(\"r\", 10)\n .call(d3.drag().on(\"drag\", dragged));\n\n function dragged() {\n d3.event.subject.x = d3.event.x;\n d3.event.subject.y = d3.event.y;\n d3.select(this)\n .attr(\"cx\", (d, i) => d.x)\n .attr(\"cy\", (d, i) => d.y);\n }\n\n yield chart.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":677,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1289,"value":"md`To find the dragsubject, we are just using some math here, in real life, where complex paths are involved , we could have used [canvas picking using hidden canvas](https://observablehq.com/@camargo/canvas-picking-with-a-hidden-canvas?collection=@observablehq/techniques)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":679,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1345,"value":"force = md`\n---\n## Force `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1409,"value":"md`Let's clone data, define links, drag functions and simulation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1349,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1495,"value":"dragSimulation = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n console.log('dragging',d3.event.x)\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1352,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1424,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1422,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1482,"value":"brushing = md`\n---\n## Brushing `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1501,"value":"md`### svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1517,"value":"brushSvg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1506,"value":"viewof brushSvg = {\n const chart = d3.select(svg``);\n \n chart.selectAll('.point')\n .data(data)\n .join('circle')\n .attr('fill','steelblue')\n .attr('cx',(d,i)=>i*eachScatterX+20)\n .attr('cy',(d,i)=>100-scatterScaleY(d.value)+10) // We should also move the axises as well\n .attr('r',10)\n \n chart.call(d3.brushX().on('brush',brushed))\n \n function brushed() {\n chart.property(\"value\", d3.event.selection);\n chart.dispatch(\"input\");\n }\n \n return Object.assign(chart.node(),{value:[]})\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1525,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1528,"value":"md`Unfortunatelly we can't directly use brush with canvas, but we can add empty svg on top of canvas and call brush on it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1546,"value":"canvasSvg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1534,"value":"viewof canvasSvg ={\n const chart = d3.select(html`

`)\n const svg = d3.create('svg');\n const result = d3.select(html`

${chart.node()}

${svg.node()}

`);\n const context = chart.node().getContext('2d');\n \n context.fillStyle = \"steelblue\";\n \n data.forEach(function(p,i) {\n context.beginPath();\n context.fillStyle = \"steelblue\";\n context.arc( i * eachScatterX+20, \n 100-scatterScaleY(p.value)+10, \n 10, \n 0, \n 2 * Math.PI);\n context.fill();\n });\n\nsvg\n .attr('width',width)\n .attr('height',100)\n .call(d3.brushX().on('brush',(d)=>{\n console.log('brushX')\n result.property(\"value\", d3.event.selection);\n result.dispatch(\"input\");\n }))\n \n return Object.assign(result.node(),{value:[]})\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1580,"value":"lasso = md`\n---\n## Lasso `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1584,"value":"md`### Svg`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1616,"value":"lassoSvg","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1591,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1587,"value":" md`### Canvas`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"comments(true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"d3Import = require('d3@v5','d3-lasso')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1602,"value":"d3 = {\n window.d3 = d3Import;\n return d3Import;\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":327,"value":"import {comments} from \"@bumbeishvili/utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"check = ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":817,"value":"uncheck = ``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1108,"value":"done = `✅ `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":970,"value":"d3tip = require('d3-tip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"