2f:null 30:["$","title",null,{"children":"Line Chart with voronoi tips - class version | David B. | Observable"}] 35:T454,class Chart { constructor() { // Defining state attributes const attrs = { id: this.createId(), svgWidth: 400, svgHeight: 400, marginTop: 25, marginBottom: 25, marginRight: 25, marginLeft: 25, container: "body", defaultTextFill: "#2C3E50", defaultFont: "Helvetica", ctx: document.createElement("canvas").getContext("2d"), zeroBased: true, data: null, calc: null, svg: null, chart: null, d3Container: null, yTickMax: 100 }; // Defining accessors this.getState = () => attrs; this.setState = (d) => Object.assign(attrs, d); // Automatically generate getter and setters for chart object based on the state properties; Object.keys(attrs).forEach((key) => { //@ts-ignore this[key] = function (_) { if (!arguments.length) { return attrs[key]; } attrs[key] = _; return this; }; }); // Custom enter exit update pattern initialization (prototype method) this.initializeEnterExitUpdatePattern(); } }36:T41c,attachVoronoiTip = (Chart.prototype.attachVoronoiTip = function ({ data, chart, scaleX, scaleY, tip, calc: { chartWidth, chartHeight } }) { const voronoi = d3.Delaunay.from( data.flat(), (d) => scaleX(d.x), (d) => scaleY(d.y) ).voronoi([0, 0, chartWidth, chartHeight]); chart ._add({ tag: "g", className: "voronoi-wrapper" }) ._add({ tag: "path", className: "voronoi-path", data: data.flat() }) .attr("opacity", 0.5) .attr("stroke", "#ff1493") .attr("fill", "none") .style("pointer-events", "all") .attr("d", (d, i) => { const pathD = voronoi.renderCell(i); return pathD; }) .on("mouseenter", (event, d, i) => { const c = chart ._add({ tag: "circle", className: "mouse-enter-circle" }) .attr("r", 3) .attr("cx", scaleX(d.x)) .attr("cy", scaleY(d.y)); tip.show(event, d, c.node()); }) .on("mouseleave", () => { chart.selectAll(".mouse-enter-circle").remove(); tip.hide(); }); })37:[] 33:{"id":"d134fc17bf5816b4","slug":"line-chart-with-voronoi-tips-class-verion","title":"Line Chart with voronoi tips - class version","thumbnail":"68914153027f00b41a4881ba1fd2b81cfdc3f4cc68c86efb8490b24b09606a02","access_level":"public","create_time":"$D2021-12-25T21:31:57.113Z","update_time":"$D2021-12-25T22:19:26.678Z","view_time":null,"first_public_time":"$D2021-12-25T22:00:00.656Z","has_unpublished_edits":null,"fork":{"id":"b1e18ef74150bf28","slug":"defining-class-methods-outside-body","title":"Defining class methods outside body","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"stars":2,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024"},"version":392,"publish_version":392,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"483b125647736caa","slug":"chart-templates","title":"Templates","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"title":"Line Chart with voronoi tips - class version","cells":[{"id":0,"value":"# Line Chart with voronoi tips - class version","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"First, create a class","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"initializeEnterExitUpdatePattern = (Chart.prototype.initializeEnterExitUpdatePattern = function () {\n d3.selection.prototype._add = function (params) {\n var container = this;\n var className = params.className;\n var elementTag = params.tag;\n var data = params.data || [className];\n var exitTransition = params.exitTransition || null;\n var enterTransition = params.enterTransition || null;\n // Pattern in action\n var selection = container.selectAll(\".\" + className).data(data, (d, i) => {\n if (typeof d === \"object\") {\n if (d.id) {\n return d.id;\n }\n }\n return i;\n });\n if (exitTransition) {\n exitTransition(selection);\n } else {\n selection.exit().remove();\n }\n\n const enterSelection = selection.enter().append(elementTag);\n if (enterTransition) {\n enterTransition(enterSelection);\n }\n selection = enterSelection.merge(selection);\n selection.attr(\"class\", className);\n return selection;\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"render = (Chart.prototype.render = function () {\n // Define containers and set SVG width based on container size\n this.setDynamicContainer();\n\n // Calculate some properties\n this.calculateProperties();\n\n // Create scales\n this.createScales(this.getState());\n\n // Draw SVG and its wrappers\n this.drawSvgAndWrappers();\n\n // Drawing x and y axises\n this.drawAxises(this.getState());\n\n // Draw Lines\n this.drawLines(this.getState());\n\n // Draw voronoi tips\n this.attachVoronoiTip(this.getState());\n\n // listen for resize event and reRender accordingly\n this.reRenderOnResize();\n\n // Allow chaining\n return this;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"setDynamicContainer = (Chart.prototype.setDynamicContainer = function () {\n const { container, svgWidth } = this.getState();\n\n // Drawing containers\n const d3Container = d3.select(container);\n var containerRect = d3Container.node().getBoundingClientRect();\n let newSvgWidth = containerRect.width > 0 ? containerRect.width : svgWidth;\n this.setState({ d3Container, svgWidth: newSvgWidth });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"calculateProperties = (Chart.prototype.calculateProperties = function () {\n const {\n marginTop,\n marginLeft,\n marginRight,\n marginBottom,\n svgWidth,\n svgHeight\n } = this.getState();\n\n // Calculated properties\n var calc = {\n id: this.createId(), // id for event handlings,\n chartTopMargin: marginTop,\n chartLeftMargin: marginLeft,\n chartWidth: svgWidth - marginRight - marginLeft,\n chartHeight: svgHeight - marginBottom - marginTop\n };\n\n this.setState({ calc });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"createScales = (Chart.prototype.createScales = function ({\n data,\n yTickMax,\n zeroBased,\n calc: { chartWidth, chartHeight }\n}) {\n const minX = d3.min(data, (lineData) => d3.min(lineData, (d) => d.x));\n const maxX = d3.max(data, (lineData) => d3.max(lineData, (d) => d.x));\n let minY = d3.min(data, (lineData) => d3.min(lineData, (d) => d.y));\n if (zeroBased) minY = 0;\n let maxY = d3.max(data, (lineData) => d3.max(lineData, (d) => d.x));\n if (yTickMax) maxY = yTickMax;\n const scaleX = d3.scaleLinear().domain([minX, maxX]).range([0, chartWidth]);\n const scaleY = d3.scaleLinear().domain([minY, maxY]).range([chartHeight, 0]);\n this.setState({ scaleX, scaleY });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"drawSvgAndWrappers = (Chart.prototype.drawSvgAndWrappers = function () {\n const {\n d3Container,\n svgWidth,\n svgHeight,\n defaultFont,\n calc\n } = this.getState();\n const { chartLeftMargin, chartTopMargin, chartWidth, chartHeight } = calc;\n\n // Create tip instance\n const tip = d3Tip()\n .offset([-10, 0])\n .attr(\"class\", \"d3-tip\")\n .html(\n (EVENT, d) => `\n \n \n

Name

Value

\n `\n );\n\n // Draw SVG\n const svg = d3Container\n ._add({ tag: \"svg\", className: \"svg-chart-container\" })\n .attr(\"width\", svgWidth)\n .attr(\"height\", svgHeight)\n .style(\"background-color\", \"#fafafa\")\n .attr(\"font-family\", defaultFont);\n\n svg.call(tip);\n\n //Add container g element\n var chart = svg\n ._add({ tag: \"g\", className: \"chart\" })\n .attr(\n \"transform\",\n \"translate(\" + chartLeftMargin + \",\" + chartTopMargin + \")\"\n );\n\n this.setState({ chart, svg, tip });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"drawAxises = (Chart.prototype.drawAxises = function ({\n scaleX,\n scaleY,\n chart,\n calc: { chartWidth, chartHeight }\n}) {\n const axisWrapper = chart._add({\n tag: \"g\",\n className: \"axis-wrapper\"\n });\n const xAxisWrapper = axisWrapper\n ._add({\n tag: \"g\",\n className: \"x-axis-wrapper\"\n })\n .attr(\"transform\", `translate(0,${chartHeight})`);\n const xAxis = d3.axisBottom(scaleX);\n xAxisWrapper.call(xAxis);\n\n const yAxisWrapper = axisWrapper._add({\n tag: \"g\",\n className: \"y-axis-wrapper\"\n });\n\n const yAxis = d3.axisLeft(scaleY);\n yAxisWrapper.call(yAxis);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"drawLines = (Chart.prototype.drawLines = function ({\n data,\n chart,\n scaleX,\n scaleY\n}) {\n const line = d3\n .line()\n .x((d) => scaleX(d.x))\n .y((d) => scaleY(d.y));\n const linesWrapper = chart._add({\n tag: \"g\",\n className: \"lines-wrapper\"\n });\n\n linesWrapper\n ._add({ tag: \"path\", className: \"line-paths\", data: data })\n .attr(\"d\", (d) => line(d))\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke\", \"black\");\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":362,"value":"reRenderOnResize = (Chart.prototype.reRenderOnResize = function () {\n const { id, d3Container, svgWidth } = this.getState();\n d3.select(window).on(\"resize.\" + id, () => {\n const containerRect = d3Container.node().getBoundingClientRect();\n const newSvgWidth =\n containerRect.width > 0 ? containerRect.width : svgWidth;\n this.setState({ svgWidth: newSvgWidth });\n this.render();\n });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"---\nUtility functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":370,"value":"createId = (Chart.prototype.createId = function () {\n return Date.now().toString(36) + Math.random().toString(36).substr(2);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"chartContainer = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"chart = {\n // wait for 1 sec, to allow all external methods to be linked with our class, then invoke it (we won't need it in the real application)\n return new Promise((res) => {\n setTimeout((d) => {\n let ch = new Chart()\n .container(chartContainer)\n .svgHeight(300)\n .marginLeft(100)\n .data([\n [\n { x: 10, y: 100 },\n { x: 20, y: 90 },\n { x: 50, y: 10 },\n { x: 70, y: 80 }\n ],\n [\n { x: 10, y: 90 },\n { x: 20, y: 70 },\n { x: 50, y: 20 },\n { x: 60, y: 50 },\n { x: 90, y: 5 }\n ]\n ])\n .render();\n\n res(ch);\n }, 1000);\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"{\n const chartClassCode = (chart.constructor + \"\").replace(/\\}$/g, \"\");\n const keys = Object.keys(chart.__proto__).sort((a, b) => {\n if (a == \"render\") return -1;\n if (b == \"render\") return 1;\n return a > b ? 1 : -1;\n });\n const body = keys\n .map((key) => (chart.__proto__[key] + \"\").replace(/^function/g, key))\n .join(\"\\n\\n\");\n\n const classStr = chartClassCode + body + \"}\";\n\n return Inputs.textarea({\n label: \"Final class code\",\n value: classStr,\n rows: 200\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"d3 = require(\"d3@v6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"d3V6Tip = require(\"d3-v6-tip\", \"d3-delaunay@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"d3Tip = d3V6Tip.tip","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"