2e:null 2f:["$","title",null,{"children":"Heat Map Days | Robert Harris | Observable"}] 34:T8b8,chart = { const chartRoot = html`

${chartTitle}

`; const svg_element = DOM.svg(width, height) chartRoot.appendChild(svg_element); chartRoot.appendChild(holidaySelector); const svg = d3.select(svg_element); const tooltip = d3.select(chartRoot.querySelector('.tooltip')); svg.property("value", []).dispatch("input"); svg.append('rect') .attr("fill", backgroundColor) .attr("x", margin.left) .attr("y", margin.top) .attr("width", width - (margin.left + margin.right)) .attr("height", height - (margin.top + margin.bottom)); 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 dot = svg.append("g") .selectAll("g") .data(data) .enter().append("rect") .attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr('stroke-width', 0.7) .attr('stroke', d => color(d.count)) .attr("fill", d => color(d.count)) .attr("width", x.step()) .attr("height", y.step()); 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') .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 ? 20 : - 180)) + "px") .style("right", "") .style("top", (offsetY + 15) + "px"); } function hideTooltip() { tooltip.classed("hidden", true); } return chartRoot; }35:[] 32:{"id":"0d16ab34547a463b","slug":"heat-map-days","title":"Heat Map Days","thumbnail":"077c810d6524c623cf21f7982df577629bd064777b4e1a337733c9c1158fbb9b","access_level":"public","create_time":"$D2018-05-09T22:27:08.371Z","update_time":"$D2018-05-28T19:50:19.764Z","view_time":null,"first_public_time":"$D2018-05-09T23:02:57.400Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"ee5a008260fc7c56","login":"trebor","name":"Robert Harris","avatar_url":"https://avatars-next.observableusercontent.com/936178c81d52f4a3b97d8b2ff7e401b2903b30c97bb5cf5f409e37128137a067","tier":"starter_2024"},"version":1791,"publish_version":1791,"role":null,"authored":false,"authors":[{"type":"individual","id":"d504d175c0c36f4b","login":"trebor","name":"Robert Harris","avatar_url":"https://avatars-next.observableusercontent.com/936178c81d52f4a3b97d8b2ff7e401b2903b30c97bb5cf5f409e37128137a067","tier":null}],"members":[{"type":"individual","id":"d504d175c0c36f4b","login":"trebor","name":"Robert Harris","avatar_url":"https://avatars-next.observableusercontent.com/936178c81d52f4a3b97d8b2ff7e401b2903b30c97bb5cf5f409e37128137a067","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Heat Map Days","cells":[{"id":1,"value":"md`# Heat Map Days`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"viewof backgroundColor = DOM.input('color')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"margin = ({top: 30, right: 25, bottom: 85, left: 35})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1509,"value":"chartTitle = 'Some Title'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"style = html`\n${holidaySelectorStyle}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1584,"value":"textColor = '#154360'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1469,"value":"brushed = _.debounce((svg, event) => {\n let value = [];\n if (event.selection) {\n// const [[x0, y0], [x1, y1]] = event.selection;\n// value = data.filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1);\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"selectedData = Generators.input(chart.children[2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1297,"value":"labelForce = new labella.Force({\n minPos: - margin.left,\n maxPos: (width - margin.left) - 1,\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"labelRenderer = new labella.Renderer({\n layerGap: 12,\n nodeHeight: labelProperties.height,\n direction: 'down'\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1396,"value":"labelProperties = ({width: 70, height: 14})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1751,"value":"holidaySelector = holidaySelectorFactory(xDate.domain()[0], xDate.domain()[1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1756,"value":"holidays = Generators.input(holidaySelector)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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])\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"xDate = d3.scaleTime()\n .domain(d3.extent(data, d => d.time))\n .range(x.range())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"labella = require('labella')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1648,"value":"holidayDateRange = xDate.domain()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1684,"value":"holidayDefaults = ({MAJOR_US: true, MAJOR_CA: true, CHRISTIAN: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1638,"value":"import { selector as holidaySelectorFactory, style as holidaySelectorStyle }\nwith { holidayDefaults as defaults }\nfrom \"@trebor/holiday-tools\"","pinned":false,"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":949,"value":"_ = require(\"lodash\")\n//_ = require(\"https://raw.githubusercontent.com/lodash/lodash/4.17.10-npm/core.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"