30:T9e1,chart = { // const svg = d3.select(DOM.svg(width, height)) // .property("value", []); const arc = d3.arc(); const chartRoot = html`

${chartTitle}

`; const svg_element = DOM.svg(width, height) chartRoot.appendChild(svg_element); 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") .attr("transform", d => `translate(${width / 2}, ${height / 2})`) .selectAll("g") .data(data) .enter() .append("path") .attr('d', d => arc({ innerRadius: x(d.x), outerRadius: x(d.x) + x.step(), startAngle: y(d.y), endAngle: y(d.y) + y.step(), })) .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; }31:T1f7c,holidays = ({ "MAJOR_US": { "static": { "1/1": "New Year's Day", "2/2": "Groundhog Day", "2/14": "Valentine's Day", "3/17": "St. Patrick's Day", "4/22": "Earth Day", "7/4": "Independence Day", "9/11": "Patriot Day", "10/31": "Halloween", "11/11": "Veterans' Day", "12/7": "Pearl Harbor Day", "12/25": "Christmas Day", "12/31": "New Year's Eve" }, "dynamic": { "1/19/2015": "MLK Day", "1/18/2016": "MLK Day", "1/16/2017": "MLK Day", "1/15/2018": "MLK Day", "1/21/2019": "MLK Day", "1/20/2020": "MLK Day", "2/16/2015": "Presidents' Day", "2/15/2016": "Presidents' Day", "2/20/2017": "Presidents' Day", "2/19/2018": "Presidents' Day", "2/18/2019": "Presidents' Day", "2/17/2020": "Presidents' Day", "5/10/2015": "Mother's Day", "5/8/2016": "Mother's Day", "5/14/2017": "Mother's Day", "5/13/2018": "Mother's Day", "5/12/2019": "Mother's Day", "5/10/2020": "Mother's Day", "5/25/2015": "Memorial Day", "5/30/2016": "Memorial Day", "5/29/2017": "Memorial Day", "5/28/2018": "Memorial Day", "5/27/2019": "Memorial Day", "5/25/2020": "Memorial Day", "6/21/2015": "Father's Day", "6/19/2016": "Father's Day", "6/18/2017": "Father's Day", "6/17/2018": "Father's Day", "6/16/2019": "Father's Day", "6/21/2020": "Father's Day", "9/7/2015": "Labor Day", "9/5/2016": "Labor Day", "9/4/2017": "Labor Day", "9/3/2018": "Labor Day", "9/2/2019": "Labor Day", "9/7/2020": "Labor Day", "10/12/2015": "Columbus Day", "10/10/2016": "Columbus Day", "10/9/2017": "Columbus Day", "10/8/2018": "Columbus Day", "10/14/2019": "Columbus Day", "10/12/2020": "Columbus Day", "11/26/2015": "Thanksgiving Day", "11/24/2016": "Thanksgiving Day", "11/23/2017": "Thanksgiving Day", "11/22/2018": "Thanksgiving Day", "11/28/2019": "Thanksgiving Day", "11/26/2020": "Thanksgiving Day" } }, "MAJOR_CA": { "static": { "1/1": "New Year's Day", "2/2": "Groundhog Day", "2/14": "Valentine's Day", "7/1": "Canada Day", "11/11": "Remembrance Day", "12/25": "Christmas Day", "12/26": "Boxing Day", "12/31": "New Year's Eve" }, "dynamic": { "5/10/2015": "Mother's Day", "5/8/2016": "Mother's Day", "5/14/2017": "Mother's Day", "5/13/2018": "Mother's Day", "5/12/2019": "Mother's Day", "5/10/2020": "Mother's Day", "5/18/2015": "Victoria Day", "5/23/2016": "Victoria Day", "5/22/2017": "Victoria Day", "5/21/2018": "Victoria Day", "5/20/2019": "Victoria Day", "5/18/2020": "Victoria Day", "6/21/2015": "Father's Day", "6/19/2016": "Father's Day", "6/18/2017": "Father's Day", "6/17/2018": "Father's Day", "6/16/2019": "Father's Day", "6/21/2020": "Father's Day", "9/7/2015": "Labour Day", "9/5/2016": "Labour Day", "9/4/2017": "Labour Day", "9/3/2018": "Labour Day", "9/2/2019": "Labour Day", "9/7/2020": "Labour Day", "10/12/2015": "Thanksgiving Day", "10/10/2016": "Thanksgiving Day", "10/9/2017": "Thanksgiving Day", "10/8/2018": "Thanksgiving Day", "10/14/2019": "Thanksgiving Day", "10/12/2020": "Thanksgiving Day" } }, "CHRISTIAN": { "static": { "12/24": "Christmas Eve", "12/25": "Christmas Day" }, "dynamic": { "2/18/2015": "Ash Wednesday", "2/10/2016": "Ash Wednesday", "3/1/2017": "Ash Wednesday", "2/14/2018": "Ash Wednesday", "3/6/2019": "Ash Wednesday", "2/26/2020": "Ash Wednesday", "3/29/2015": "Palm Sunday", "3/20/2016": "Palm Sunday", "4/9/2017": "Palm Sunday", "3/25/2018": "Palm Sunday", "4/14/2019": "Palm Sunday", "4/5/2020": "Palm Sunday", "4/3/2015": "Good Friday", "3/25/2016": "Good Friday", "4/14/2017": "Good Friday", "3/30/2018": "Good Friday", "4/19/2019": "Good Friday", "4/10/2020": "Good Friday", "4/5/2015": "Easter Sunday", "3/27/2016": "Easter Sunday", "4/16/2017": "Easter Sunday", "4/1/2018": "Easter Sunday", "4/21/2019": "Easter Sunday", "4/12/2020": "Easter Sunday" } }, "JEWISH": { "static": {}, "dynamic": { "4/3/2015": "Passover (Begin)", "4/11/2015": "Passover (End)", "4/22/2016": "Passover (Begin)", "4/30/2016": "Passover (End)", "4/10/2017": "Passover (Begin)", "4/18/2017": "Passover (End)", "3/30/2018": "Passover (Begin)", "4/7/2018": "Passover (End)", "4/19/2019": "Passover (Begin)", "4/27/2019": "Passover (End)", "4/8/2020": "Passover (Begin)", "4/16/2020": "Passover (End)", "9/13/2015": "Rosh Hashanah (Begin)", "9/15/2015": "Rosh Hashanah (End)", "10/2/2016": "Rosh Hashanah (Begin)", "10/4/2016": "Rosh Hashanah (End)", "9/20/2017": "Rosh Hashanah (Begin)", "9/22/2017": "Rosh Hashanah (End)", "9/9/2018": "Rosh Hashanah (Begin)", "9/11/2018": "Rosh Hashanah (End)", "9/29/2019": "Rosh Hashanah (Begin)", "10/1/2019": "Rosh Hashanah (End)", "9/18/2020": "Rosh Hashanah (Begin)", "9/20/2020": "Rosh Hashanah (End)", "9/22/2015": "Yom Kippur (Begin)", "9/23/2015": "Yom Kippur (End)", "10/11/2016": "Yom Kippur (Begin)", "10/12/2016": "Yom Kippur (End)", "9/29/2017": "Yom Kippur (Begin)", "9/30/2017": "Yom Kippur (End)", "9/18/2018": "Yom Kippur (Begin)", "9/19/2018": "Yom Kippur (End)", "10/8/2019": "Yom Kippur (Begin)", "10/9/2019": "Yom Kippur (End)", "9/27/2020": "Yom Kippur (Begin)", "9/28/2020": "Yom Kippur (End)", "9/27/2015": "Sukkot (Begin)", "10/4/2015": "Sukkot (End)", "10/16/2016": "Sukkot (Begin)", "10/23/2016": "Sukkot (End)", "10/4/2017": "Sukkot (Begin)", "10/11/2017": "Sukkot (End)", "9/23/2018": "Sukkot (Begin)", "9/30/2018": "Sukkot (End)", "10/13/2019": "Sukkot (Begin)", "10/20/2019": "Sukkot (End)", "10/2/2020": "Sukkot (Begin)", "10/9/2020": "Sukkot (End)", "12/6/2015": "Hanukkah (Begin)", "12/14/2015": "Hanukkah (End)", "12/24/2016": "Hanukkah (Begin)", "1/1/2017": "Hanukkah (End)", "12/12/2017": "Hanukkah (Begin)", "12/20/2017": "Hanukkah (End)", "12/2/2018": "Hanukkah (Begin)", "12/10/2018": "Hanukkah (End)", "12/22/2019": "Hanukkah (Begin)", "12/30/2019": "Hanukkah (End)", "12/10/2020": "Hanukkah (Begin)", "12/18/2020": "Hanukkah (End)" } } })32:[] 2e:{"title":"Donut Heat Map","cells":[{"id":1,"value":"md`# Donut Heat Map`","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":43,"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``","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, 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"},{"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(chart.children[2])","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 = events.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}\n\n \n \n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1253,"value":"events = {\n const [ startDate, endDate ] = xDate.domain();\n const startTime = startDate.getTime();\n const endTime = endDate.getTime();\n const MS_IN_A_DAY = 24 * 60 * 60 * 1000;\n const events = [];\n \n for (let time = startTime; time <= endTime; time += MS_IN_A_DAY) {\n const day = new Date(time);\n const staticKey = [day.getMonth() + 1, day.getDate()].join('/');\n const dynamicKey = [staticKey, day.getFullYear()].join('/');\n \n const staticEvent = staticHolidays[staticKey];\n const dynamicEvent = dynamicHolidays[dynamicKey];\n \n if (staticEvent) {\n events.push({day, title: staticEvent});\n }\n if (dynamicEvent) {\n events.push({day, title: dynamicEvent});\n }\n }\n \n return events;\n}","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":1640,"value":"innerRadius = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":1642,"value":"outerRadius = width / 2","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([outerRadius, innerRadius])","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([2 * Math.PI, 0])\n","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(10)\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":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"staticHolidays = ({\n ...holidays.MAJOR_US.static,\n ...holidays.MAJOR_CA.static,\n ...holidays.CHRISTIAN.static,\n// ...holidays.JEWISH.static,\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"dynamicHolidays = ({\n ...holidays.MAJOR_US.dynamic,\n ...holidays.MAJOR_CA.dynamic,\n ...holidays.CHRISTIAN.dynamic,\n// ...holidays.JEWISH.dynamic,\n}) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"labella = require('labella')","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":"$W32","stdlib":"1","titling":"auto"}