2d:null 2e:["$","title",null,{"children":"Zoomable Line/Marker Chart with canvas and d3js | Khris Griffis | Observable"}] 33:T1197,md` --- ## Motivation I needed an interactive, dynamic, data visualization tool for eletrophysiological data and I wanted to write it in JavaScript (because, why not?). Similar to how ploty.js works, this chart utilizes a \`layoutOptions\` object to set global aesthetic features and a \`Data\` array of \`datum\` objects that contain specific properties for each datum. I didn't want to use a \`
\nNote: Double click canvas will also reset zoom.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"v = {\n callbacks();\n if (d3.select(\"#tipToggle\").node().checked) {\n containers.pointmap.on('mousemove', tooltipDelay(tooltipFinder,200));\n } else {\n containers.pointmap.on('mousemove', null);\n }\n bindData(theData);\n draw(d3.zoomIdentity);\n return containers.div.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1934,"value":"function tooltipDelay(func,delay) {\n let prev = Date.now() - delay;\n return (...args) => {\n let cur = Date.now();\n if (cur-prev >= delay) {\n prev = cur;\n func.apply(args[2][0],args);\n } else {\n containers.pointctx.clearRect(0,0,layoutOpts.width,layoutOpts.height);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md`\n---\n\n## Containers\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1039,"value":"md`---\n## Control Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"function draw(transform) {\n const sX = transform.rescaleX(x);\n const sY = transform.rescaleY(y);\n\n // Labels\n containers.xlab.data([{label:XLABEL}]).call(xlabeler);\n containers.ylab.data([{label:YLABEL}]).call(ylabeler);\n //console.log(dats)\n containers.X.call(fx.Axes(theData,extents).X.scale(sX));\n containers.Y.call(fx.Axes(theData,extents).Y.scale(sY));\n // get transforms for clearing\n let cT = containers.context.getTransform();\n let pT = containers.pointctx.getTransform();\n containers.context.clearRect(-cT.e,-cT.f,extents.width,extents.height);\n containers.pointctx.clearRect(-pT.e,-pT.f,extents.width,extents.height);// \n // draw the data bound to databin and pointbin\n drawLines(sX,sY,transform.k,containers.context);\n // drawing points last draws them on top of the lines\n drawPoints(sX,sY,transform.k,containers.context);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"zoomer = d3.zoom()\n .scaleExtent([0.9,100])\n .duration(700)\n .on(\"zoom\", () => {\n const transform = d3.event.transform;\n containers.context.save();\n draw(transform);\n containers.context.restore();\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":774,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"function drawPoints(sX,sY,k,ctx) {\n //points drawn to scales\n let pointGen = d3.symbol().context(ctx);\n const elems = containers.pointbin.selectAll(\"custom.points\");\n elems.each( function(d,i) {\n // each d in elems contains the stored data\n if(!/markers/gi.test(d.mode)){ \n return;\n }\n ctx.save();\n ctx.fillStyle = fx.rgb2A(d.marker.color, d.marker.hasOwnProperty(\"opacity\") ? d.marker.opacity : 1);\n ctx.translate(sX(d.x),sY(d.y));\n ctx.beginPath();\n pointGen.type(fx.markerType(d.marker.symbol)).size(d.marker.size**2 * (k>1?k*0.75:k))(d);\n ctx.closePath();\n ctx.fill();\n ctx.restore();\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2206,"value":"{\n const elems = containers.databin.selectAll(\"custom.lines\");\n var out = [];\n elems.each( d => out.push(d.x));\n out = d3.extent(d3.merge(out));\n \n return out\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1696,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"md`---\n## GrObs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"gX = g => g\n .attr(\"transform\", `translate(0,${extents.height})`)\n .attr(\"class\", \"axes x-axis\")\n .call(xAxis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"gY = g => g\n .attr(\"class\", \"axes y-axis\")\n .call(yAxis) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1083,"value":"xlabeler = g => {\n let xlab = g.selectAll(\"text\")\n .data([{label:XLABEL}]);\n \n xlab.enter()\n .append(\"text\")\n .attr(\"class\", \"x-label\")\n .attr(\"y\", extents.height-5)\n .attr(\"x\",extents.height/13)\n .attr(\"fill\", \"rgba(60,60,60,0.6)\")\n .attr(\"text-anchor\",\"left\")\n .attr(\"alignment-baseline\",\"baseline\")\n .merge(xlab)\n .text(d => d.label);\n \n xlab.exit().remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1090,"value":"ylabeler = g => {\n let ylab = g.selectAll(\"text\")\n .data([{label:YLABEL}]);\n \n ylab.enter()\n .append(\"text\")\n .attr(\"class\", \"y-label\")\n .attr(\"transform\", `rotate(-90)`)\n .attr(\"x\", -extents.height*12/13)\n .attr(\"dy\", 20)\n .attr(\"fill\", \"rgba(60,60,60,0.6)\")\n .attr(\"text-anchor\",\"left\")\n .attr(\"alignment-baseline\",\"baseline\")\n .merge(ylab)\n .text(d => d.label);\n \n ylab.exit().remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"md`\n---\n\n## Scalers (not scalars)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"x = fx.Scales(theData,extents).X","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"y = fx.Scales(theData,extents).Y","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"xAxis = fx.Axes(theData,extents).X","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"yAxis = fx.Axes(theData,extents).Y","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"md`\n---\n\n## Positionals`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"extents = ({\n width: layoutOpts.width - layoutOpts.margin.l - layoutOpts.margin.r,\n height: layoutOpts.height - layoutOpts.margin.t - layoutOpts.margin.b\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"md`\n---\n## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"theData = {\n let d = [];\n switch (dataSet) {\n case \"Two Lines\":\n return data;\n break;\n case \"Simple Points\":\n return dataPt;\n break;\n case \"Five Colors\":\n return data5;\n break;\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1021,"value":"md`---\n## Data Sets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`---\n## Libraries and Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"styles = html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"import {select,text,button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":810,"value":"md`---\n\n## Testing...\n### Make cells below for testing.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"viewof aBut = button({value: \"Animate\", description: \"Click to view animation.\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1435,"value":"{\n aBut;\n return tipAnim()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1236,"value":"canvasDraw = {\n const dims = {w: 1226, h:717};\n const canvas = d3.create('canvas')\n .attr('width', `${dims.w}px`)\n .attr('height', `${dims.h}px`)\n .attr('class', 'cv')\n .style('margin', '50,50,50,50');\n \n const cx = canvas.node().getContext('2d');\n cx.rect(1,1,dims.w-3,dims.h-1);\n cx.clip();\n return {cv: canvas, cx: cx, dims: dims}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1384,"value":"d3.range(100).map(v=> (\"00\" + ((0xFF + v/100*255 + 1) & 0x0FF).toString(16)).slice(-2) )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1440,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1441,"value":"tipAnim2()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2099,"value":"colorRect()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2091,"value":"function colorRect() {\n const canvas = d3.create('canvas')\n .attr('width', `500px`)\n .attr('height', `500px`)\n .attr('class', 'cv')\n .style('margin', \"5 5 5 5\");\n \n const cx = canvas.node().getContext('2d');\n \n const N = 6;\n \n let cscale = d3.scaleSequential(d3.interpolateViridis).domain([N-1,0]);\n // get the color stops\n let stops = d3.merge(d3.range(N).map( (v,i) => [v/N, v/N+1/(N**2)] ));\n stops.push(1);\n stops.splice(Math.floor(stops.length/2),1);\n stops = stops.reduce( (r,k,i) => (!(i%2) ? r.push([k]):r[r.length-1].push(k)) && r, []);\n \n let grad = cx.createLinearGradient(0,0,500,0);\n stops.forEach( (arr,i) => {\n grad.addColorStop(arr[0],cscale(i));\n grad.addColorStop(arr[1],cscale(i));\n } );\n \n /*\n grad.addColorStop(0,cscale(0));\n grad.addColorStop(0.25,cscale(0));\n grad.addColorStop(0.75,cscale(1));\n grad.addColorStop(1,cscale(1));\n grad.addColorStop(1,cscale(1));\n */\n cx.fillStyle = grad;\n cx.fillRect(0,20,500,500);\n return canvas.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2110,"value":"st = {\n const N = 3;\n const toMatrix = (arr, width) => \n arr.reduce((rows, key, index) => (index % width == 0 ? rows.push([key]) \n : rows[rows.length-1].push(key)) && rows, []);\n \n let stops = d3.merge(d3.range(N).map( (v,i) => [v/N, v/N+1/(N**2)] ));\n stops.push(1);\n stops.splice(Math.floor(stops.length/2),1);\n stops = stops.reduce( (r,k,i) => (!(i%2) ? r.push([k]):r[r.length-1].push(k)) && r, []);\n return stops\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2172,"value":"containers.div","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W41","stdlib":"1","titling":"auto"}} 32:"$31:body"