30:Ta67,chart = { const chartRoot = html`

${chartTitle}

` chartRoot.appendChild(holidaySelector); const container = d3.select(chartRoot) .select('.chart-container') .style('width', width + 'px') .style('height', height + 'px'); container.select('.background') .style('top', margin.top + 'px') .style('left', margin.left + 'px') .style('width', (width - (margin.left + margin.right)) + 'px') .style('height', (height - (margin.top + margin.bottom)) + 'px') .style('background-color', backgroundColor); const canvasEl = DOM.canvas(width - margin.right, height - margin.bottom); const svgEl = DOM.svg(width, height); container.node().appendChild(canvasEl) container.node().appendChild(svgEl); const svg = d3.select(svgEl); const canvas = d3.select(canvasEl); const ctx = canvasEl.getContext('2d'); const tooltip = d3.select(chartRoot.querySelector('.tooltip')); svg.classed('svg-chart', true).property("value", []).dispatch("input"); canvas.classed('canvas-chart', true); data.forEach(d => { ctx.beginPath(); ctx.fillStyle=color(d.count); ctx.rect(x(d.x), y(d.y), x.bandwidth() + 1, y.bandwidth() + 1); ctx.fill(); }); svg.append("g").call(xAxis); svg.append("g").call(yAxis); const eventsG = svg.append('g') .attr("transform", d => `translate(${margin.left}, ${height - margin.bottom})`); const brushG = svg.append("g"); brushG.call(d3.brushX() .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]]) .on("start brush end", () => brushed(svg, d3.event))); brushG.select('.overlay') .attr('fill', 'none') .on("mouseout", hideTooltip) .on("mousemove", showTooltip); renderEvents(eventsG); const dateFormat = d3.timeFormat('%a %b %e'); const timeFormat = d3.timeFormat('%H:%M'); const MS_IN_10_MINUTE = 1000 * 60 * 10; function showTooltip() { const { offsetX, offsetY } = d3.event; const time = new Date(Math.floor(yTime.invert(offsetY) / MS_IN_10_MINUTE) * MS_IN_10_MINUTE); tooltip.classed("hidden", false) .text(`${dateFormat(xDate.invert(offsetX))}, ${timeFormat(time)}`) .style("left", (offsetX + (offsetX < width / 2 ? 5 : - 187)) + "px") .style("right", "") .style("top", (offsetY - 35) + "px"); } function hideTooltip() { tooltip.classed("hidden", true); } return chartRoot; }31:[] 2e:{"title":"Heat Map Days Canvas","cells":[{"id":1,"value":"md`# Heat Map Days Canvas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"viewof backgroundColor = DOM.input('color')","pinned":false,"hidden":false,"mode":"ojs"},{"id":481,"value":"viewof ridesColor = {\n var input = DOM.input('color');\n input.value = '#00ff00';\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"margin = ({top: 30, right: 25, bottom: 85, left: 35})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1843,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":1509,"value":"chartTitle = 'Some Title'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1049,"value":"style = html`\n${holidaySelectorStyle}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1584,"value":"textColor = '#154360'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":1469,"value":"brushed = _.debounce((svg, event) => {\n let value = [];\n if (event.selection) {\n const [x0, x1] = event.selection;\n value = data.filter(d => x0 <= x(d.x) && x(d.x) < x1);\n }\n\n svg.property(\"value\", value).dispatch(\"input\");\n}, 400)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1366,"value":"renderEvents = (g) => {\n const format = d3.timeFormat('%a %b %e');\n \n const flags = g.selectAll('rect.flag')\n .data(eventLabelNodes)\n .enter()\n .append('g') \n .attr(\"transform\", d => `translate(${d.x}, ${d.y})`);\n \n flags\n .append('foreignObject')\n .attr('x', d => -d.dx / 2)\n .attr('width', labelProperties.width)\n .attr('height', labelProperties.height)\n .append('xhtml:div')\n .append('div')\n .classed('event-label', true)\n .attr('width', labelProperties.width + 'px')\n .attr('height', labelProperties.height + 'px')\n .attr('title', ({ data: {title, day} }) => `${format(day)} - ${title}`)\n .text(d => d.data.title);\n \n g.selectAll('event-link')\n .data(eventLabelNodes)\n .enter()\n .append('path')\n .classed('event-link', true)\n .attr('d', d => labelRenderer.generatePath(d));\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"selectedData = Generators.input(d3.select(chart).select('.svg-chart').node())","pinned":false,"hidden":false,"mode":"ojs"},{"id":1297,"value":"labelForce = new labella.Force({\n minPos: - margin.left,\n maxPos: (width - margin.left) - 1,\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1299,"value":"labelRenderer = new labella.Renderer({\n layerGap: 12,\n nodeHeight: labelProperties.height,\n direction: 'down'\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1396,"value":"labelProperties = ({width: 70, height: 14})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"eventLabelNodes = {\n const nodes = holidays.map(({ day, title }) => \n new labella.Node(xDate(day) - margin.left, labelProperties.width, {title, day}));\n labelForce.nodes(nodes).compute();\n return labelRenderer.layout(labelForce.nodes());\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1751,"value":"holidaySelector = holidaySelectorFactory(xDate.domain()[0], xDate.domain()[1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1756,"value":"holidays = Generators.input(holidaySelector)","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"color = d3.scalePow()\n .exponent(0.5)\n .domain(d3.extent(data, d => d.count))\n .range([backgroundColor, ridesColor])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1803,"value":"x.bandwidth()","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"x = d3.scaleBand()\n .domain(d3.range(d3.min(data, d => d.x), d3.max(data, d => d.x) + 1))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"y = d3.scaleBand()\n .domain(d3.range(d3.min(data, d => d.y), d3.max(data, d => d.y) + 1))\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"xDate = d3.scaleTime()\n .domain(d3.extent(data, d => d.time))\n .range(x.range())","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"yTime = d3.scaleTime()\n .domain(d3.extent(data, d => d.y)\n .map(block => {\n const hour = Math.floor(block / 6);\n const minute = block % 6 * 10;\n return new Date(2017, 0, 1, hour, minute);\n }))\n .range(y.range())\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(d3.axisTop(xDate))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(yTime).tickFormat(d3.timeFormat(\"%H:%M\")))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"fill\", \"#000\")\n .attr(\"x\", 5)\n .attr(\"y\", margin.top)\n .attr(\"dy\", \"0.32em\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":944,"value":"\ndata = _.flatten(d3.range(100)\n .map(day => d3.range(24 * 6)\n .map(block => {\n const time = new Date(2017, 0, 1, Math.floor(block / 6), (block % 6) * 10);\n return {\n day,\n block,\n time: new Date(time.setDate(day + 1)),\n x: day,\n y: block,\n count: Math.random(),\n };\n \n })\n ))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"labella = require('labella')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"holidayDateRange = xDate.domain()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1684,"value":"holidayDefaults = ({MAJOR_US: true, MAJOR_CA: true, CHRISTIAN: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1638,"value":"import { selector as holidaySelectorFactory, style as holidaySelectorStyle }\nwith { holidayDefaults as defaults }\nfrom \"@trebor/holiday-tools\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":949,"value":"_ = require(\"lodash\")\n//_ = require(\"https://raw.githubusercontent.com/lodash/lodash/4.17.10-npm/core.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}