30:T54d,viewof CHART = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style('height', 'auto') .attr('width', width) .attr('id', DOM.uid('SVG')) .style('border', '1px solid white'); let g = svg.append('g').attr('class', 'main-group'); let clip = DOM.uid('clip-listener'); svg .append("clipPath") .attr("id", clip.id) .attr('fill', 'white') .append("rect") .attr('height', height) .attr('width', width); let marks = g.append('g').attr('class', 'marks'); // .call(g => // g // .append('rect') // .attr('height', height) // .attr('width', width) // .attr('fill', 'white') // .attr('x', margin.left) // .attr('y', margin.top) // ); let labels = g .append('g') .attr('class', 'overlay') .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); }); 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:T43f,Tasks = (g, xScale) => g .selectAll('.task') .data(weeklyData, d => d.name + +d.time) .join('g') .attr('class', 'task') .each(function(d) { let data = d; let endTime = d.activeDuration === '-' ? d.time : new Date(+d.time + +d.activeDuration); d3.select(this) .selectAll('.task-shape') .data([d], d => d.name + +d.time) .join('rect') .attr('class', 'task-shape') // .attr('rx', d => // d.activeDuration === '-' ? yScale.bandwidth() / 4 : 14 // ) // .attr('ry', d => (d.activeDuration === '-' ? 1000 : 14)) .attr('fill', d => colorScale(d.route)) .attr('opacity', 2) .attr( 'transform', d => `translate(${xScale(d.time)},${yScale(d.name) + yScale.bandwidth() / 4})` ) .attr('height', d => yScale.bandwidth() / 2) .attr('width', d => xScale(endTime) - xScale(d.time) + 5); }) .on('mousemove', handleTaskHover) // .on('click', handleClickOnTask, yScale)33:[] 2e:{"title":"Weekly Timeline","cells":[{"id":0,"value":"md`# Weekly Timeline`","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"md`### Instructions\n#### 1. Zoom chart by finger pinch or scrolling\n#### 2. Pan Chart by dragging`","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"mutable hovered = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1807,"value":"weeklyData","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"colorScale(weeklyData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"html``","pinned":true,"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 = weeklyData.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":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"ZOOM = {\n let zoom = d3\n .zoom()\n .scaleExtent([1, 4])\n .translateExtent([[0, 0], [width, height]]) // translate only extent of xaxis\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(getTimeExtent(weeklyData, interval))\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(Drugs)\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 )\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\n .scaleOrdinal()\n .domain(Routes)\n .range(d3.schemeTableau10)","pinned":false,"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":8,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"import {\n weeklyData,\n Categories as Drugs,\n Routes,\n getWidth,\n bind\n} from '@stroked/timeline-data'","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"import { AxisTop, AxisBottom, Today } from '@stroked/timeline-axis'","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { height, margin } from '@ajayyy/gantt'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}