30:T715,viewof CHART = { let view = html``; const svg = d3 .select(view) .attr("viewBox", [0, 0, width, height]) .style('height', 'auto') .attr('width', width) .style('border', '1px solid white'); let g = svg.append('g').attr('class', 'main-group'); let labels = g .append('g') .attr('class', 'labels') .call(g => { // g.append('rect') // .attr('height', height) // .attr('width', width) // .attr('fill', d3.rgb(150, 150, 60, 0)) // .attr('x', 0) // .attr('y', 0) // .attr('clip-path', clip); g.call(yAxis); }); let marks = g .append('g') .attr('class', 'marks') .attr('clip-path', d => (LabelsCutOff ? 'url(#clip)' : '')); // .call(g => // g // .append('rect') // .attr('height', height) // .attr('width', width) // .attr('fill', blue) // .attr('x', margin.left) // .attr('y', margin.top) // ); svg.node().value = { marks, labels }; yield svg.node(); //called multiple times from the zoom event labels.call(AxisTop, xScale); labels.call(AxisBottom, xScale); // labels.call(Today, xScale); marks.call(Tasks, xScale); //only called once }31:T4ca,function handleClickOnTask(yScale) { d3.event.preventDefault(); d3.event.stopPropagation(); let dataPoint = d3.select(this).data()[0]; let toolTip = createTooltip(dataPoint); let position = d3 .select(this) .select(':first-child') .node() .getBBox(); // mutable pos = position; d3.select('.container') // [position.offsetTop(), position.offsetLeft()]; .selectAll('.tooltip-container') .data([dataPoint], d => d.name + +d.time) .join('div') .attr('class', 'tooltip-container') .attr( 'style', `position:absolute; display:inline-block; border:1px solid black; height:auto; width:auto; border-radius:10px; font-size:12px; padding:5px 15px; text-align:right; background:#efefef` ) .style( 'top', `${position.y + (yScale.bandwidth() / 2 - position.height)}px` ) .style('left', `${position.x + position.width + 5}px`) .style('opacity', 0.7) .node() .appendChild(toolTip); //TODO: use the values below to add a hovering line var xval = d3.mouse(this)[0] || d3.touches(this)[0]; }32:T5f6,Tasks = (g, xScale) => g .selectAll('.task') .data(Data, d => d.name + +d.time) .join('g') .attr('class', 'task') .each(function(d) { let data = d; let it = null; if (d.activeDuration === 0 || onlySHAPES) { it = d3 .select(this) .selectAll('.task-shape') .data([d], d => d.name + +d.time) .join('path') .attr('class', 'task-shape') .attr( 'transform', d => `translate(${xScale( new Date(+d.time + +d.activeDuration / 2) )},${yScale(d.name) + yScale.bandwidth() / 2}) scale(3)` ) .attr("d", d => shape(d.name)); } else { it = d3 .select(this) .selectAll('.task-shape') .data([d], d => d.name + +d.time) .join('rect') .attr('class', 'task-shape') .attr('rx', d => 14) .attr('ry', d => 14) .attr( 'transform', d => `translate(${xScale(d.time)},${yScale(d.name) + yScale.bandwidth() / 4})` ) .attr('height', d => yScale.bandwidth() / 2) .attr( 'width', d => xScale(new Date(+d.time + +d.activeDuration)) - xScale(d.time) ); } it.attr('fill', d => colorScale(Categories.indexOf(d.name) / Categories.length) ).on('mousemove', handleTaskHover); }) // .on('click', handleClickOnTask, yScale)33:[] 2e:{"title":"Timeline Events","cells":[{"id":0,"value":"md`# Timeline Events`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1065,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`\n\\`d3.symbol\\` shapes are the easiest way to position events\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"mutable hovered = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"shape(Routes[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":782,"value":"shape = d3.scaleOrdinal(Routes, d3.symbols.map(s => d3.symbol().type(s)()))","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"Data[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":851,"value":"AxisBottom = (g, scale) =>\n g\n .selectAll('.x-axis-bottom')\n .data(['x-axis-bottom'])\n .join('g')\n .attr('class', d => d)\n .attr(\"transform\", `translate(${0}, ${height - margin.bottom})`)\n .call(\n d3\n .axisBottom()\n .scale(scale)\n .tickSize(-height + margin.top + margin.bottom)\n .tickPadding(2)\n .tickSizeOuter(0)\n )\n .call(g => {\n g.selectAll('text')\n .filter(function(d, i) {\n if (d3.select(this).text() === '12AM') {\n d3.select(d3.select(this).node().parentNode).remove();\n }\n })\n .remove();\n g.selectAll('line').attr('stroke-dasharray', [2, 10]);\n g.selectAll('.domain')\n .attr('stroke-width', 2 * (height - margin.top - margin.bottom))\n .attr('opacity', 1)\n .attr('stroke', '#f5f5f5');\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"function handleTaskHover(d) {\n d3.event.preventDefault();\n d3.event.stopPropagation();\n let thisData = d3.select(this).data();\n mutable hovered = Data.find(x => +x.time === +d.time);\n\n //TODO: use the values below to add a hovering line\n var xval = d3.mouse(this)[0] || d3.touches(this)[0];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"Data","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"ZOOM = {\n let zoom = d3\n .zoom()\n .scaleExtent([1, 500])\n .translateExtent([[0, 0], [width, height]])\n .on(\"zoom\", () => {\n const newXScale = d3.event.transform.rescaleX(xScale);\n CHART.labels.call(AxisTop, newXScale);\n CHART.labels.call(AxisBottom, newXScale);\n // CHART.labels.call(Today, newXScale);\n CHART.marks.call(Tasks, newXScale);\n });\n\n d3.select(viewof CHART).call(zoom);\n yield \"I make zoom work.\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"md`## Scale & Axis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"xScale = d3\n .scaleTime()\n .domain(d3.extent(Data, x => +x.time))\n .range([margin.left, width - margin.right])\n .clamp(false)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"yScale = d3\n .scaleBand()\n .domain(Categories)\n .range([margin.top, height - margin.bottom])\n .padding(0.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"yAxis = g =>\n bind(g, 'y-axis')\n .attr(\"transform\", `translate(${0},${0})`)\n .call(\n d3\n .axisLeft(yScale)\n .tickPadding(-margin.left / 2)\n .tickSize(-width)\n .tickSizeOuter(0)\n )\n .call(g => {\n g.selectAll('line')\n .attr('stroke-width', yScale.bandwidth())\n .attr('stroke', '#f5f5f5');\n g.selectAll('text')\n .each(function(g) {\n d3.select(this)\n .node()\n .parentNode.appendChild(\n svg``\n );\n })\n .attr('text-anchor', 'middle');\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"colorScale = d3.scaleSequential(d3.interpolateTurbo)\n// .domain([Routes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":595,"value":"md`## Utility`","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"interval = \"timeWeek\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"getTimeExtent = (data,interval) => {\n let [min, max] = d3.extent(data, d => d.time);\n min = d3[interval].floor(min);\n max = d3[interval].ceil(max);\n return [ min, max ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"createTooltip = data => html`\n

\n ${timeFormat(data.time)}\n

\n${data.name} @${data.dosage}\n${data.activeDuration !== '-' ? `(${data.activeDuration})` : ''}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"timeFormat = d3.timeFormat('%a, %b-%d %I:%H %p')","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`## ANX`","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"Routes = [...new Set(Data.map(x => x.route))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":833,"value":"Categories = [...new Set(Data.map(x => x.name))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import {\n Data,\n // Categories,\n getWidth,\n bind\n} from '@stroked/timeline-data'","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"// import { AxisTop } from '@stroked/timeline-axis'","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"height = 1080","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { margin } from '@ajayyy/gantt'","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"viewof blue = d3\n .select(DOM.input('color'))\n .attr('value', d3.color('#E1F3FC').hex())\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":700,"value":"viewof LabelsCutOff = d3\n .select(DOM.input('checkbox'))\n .property('checked', true)\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"AxisTop = (g, scale) =>\n g\n .selectAll('.x-axis-top')\n .data(['x-axis-top'])\n .join('g')\n .attr('class', d => d)\n .attr(\"transform\", `translate(0,${margin.top})`)\n .call(\n d3\n .axisTop()\n .scale(scale)\n // .ticks(d3.timeWeek.every(2))\n .tickSize(-(height - margin.top - margin.bottom))\n // .tickFormat(d =>\n // d3\n // .timeFormat('%-b%-d')(d)\n // .toUpperCase()\n // )\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"viewof onlySHAPES = d3\n .select(DOM.input('checkbox'))\n .property('checked', true)\n .node()","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}