tmln = { const markerDefaultColor = "#9880C2"; const markerSelectedColor = "#9880C2"; const markerFadedColor = "#E4DDEE"; const markerPersonalColor = "#5598E2"; const labelDefaultColor = "#331A5B"; const labelSelectedColor = "#331A5B"; const labelFadedColor = "#E4DDEE"; const labelPersonalColor = "#093B72"; const annotationDefaultColor = "#E4DDEE"; const annotationPersonalColor = "#CADFF7"; const svg = d3.select(DOM.svg(params.svg.width, params.svg.height)) .attr("title", "Marine Conservation") .attr("id", "timeline"); const chartBackground = svg.append("rect") .attr("id", "chart-background") .attr("fill", "#fff") // fallback for CSS .attr("x", 0) .attr("y", 0) .attr("width", params.svg.width) .attr("height", params.svg.height); const chartTitle = svg.append("g") .attr("class", "chart-title") .append("text") .attr("id", "title-text") .attr("text-anchor", "start") .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) .attr("y", 24) .attr("dy", "2em") .style("font-weight", "700") .style("font-size", "clamp(1.2rem, 4vw, 2.5rem)") // minimum, preferred, maximum .text( title ); const chartSubtitle = svg.append("g") .attr("class", "chart-subtitle") .append("text") .attr("text-anchor", "start") .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) .attr("y", 24) .attr("dy", "5.5em") .style("font-weight", "400") .style("font-size", "clamp(1rem, 2.5vw, 1.25rem)") // minimum, preferred, maximum .text(subtitle); // const byline = svg.append("g") // .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x * 0.4 : params.event.offset}, ${params.svg.height - (params.margin.bottom / 2)})`) // .append("text") // .attr("id", "byline") // .attr("x", 0) // .attr("y", 0) // .attr("dy", "0.5em") // .text('Graphic by @DiDoesDigital'); const plot = svg.append("g") .attr("id", "plot") .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x : params.smallScreenMargin.left}, ${params.plot.y})`); const gy = plot.append("g") .attr("id", "y-axis") .attr("class", "axis") .call(axis.y) .attr("aria-hidden", "true") .call(g => g.selectAll(".tick text").call(halo)); const annotations = plot.append("g") .attr("class", "annotations") .selectAll("g") .data(periods) .join("g"); const annotationsLeftMargin = params.plot.x + 240 + 24; annotations.append("line") .attr("aria-hidden", "true") .attr("stroke", annotationDefaultColor) .attr("stroke-width", 3) .attr("x1", annotationsLeftMargin) .attr("x2", annotationsLeftMargin) .attr("y1", d => y(d.startDate)) .attr("y2", d => y(d.endDate)); annotations.append("text") .attr("x", annotationsLeftMargin + 24) .attr("y", d => y(d.startDate)) .attr("dy", "0.7em") .style("font-size", 16) .style("font-weight", 600) .text(d => width >= params.mediumScreenSize ? d.name : '') annotations.append("text") .attr("x", annotationsLeftMargin + 24) .attr("y", d => y(d.startDate)) .attr("dy", "2.0em") .style("font-size", 16) .style("font-weight", 400) .text(d => width >= params.mediumScreenSize ? d3.timeFormat("%Y")(d.startDate) + " – " + d3.timeFormat("%Y")(d.endDate) : '') // .text(d => width >= params.mediumScreenSize ? d3.timeFormat("%e %b")(d.startDate) + " – " + d3.timeFormat("%e %b")(d.endDate) : '') // .text(d => d3.format("d")((d.endDate - d.startDate) / (1000*60*60*24)) + " days") const markers = plot.append("g") .attr("class", "markers") .selectAll("circle") .data(data) .join("circle") .attr("transform", d => `translate(0, ${y(d.date)})`) .attr("aria-hidden", "true") .attr("fill", d => d.eventType === "disaster" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.eventType === "disaster" ? markerDefaultColor : markerPersonalColor) // .attr("stroke-width", 1) .attr("cx", 0.5) .attr("cy", (params.marker.radius / 2) + 0.5) .attr("r", params.marker.radius); const dodgedYValues = dodge(data.map(d => y(d.date)), labelSeparation); // const dodgedYValues = data.map(d => y(d.date)); // for debugging alignment const eventLabels = plot.append("g") .attr("class", "eventLabels") .selectAll("text") .data(d => d3.zip( data, dodgedYValues, )) .join("text") .attr("class", "event-title") .style("font-weight", "400") .style("fill", ([d]) => d.eventType === "disaster" ? labelDefaultColor : labelPersonalColor) .attr("x", width >= params.smallScreenSize ? params.event.offset : params.smallScreenEvent.offset) .attr("y", ([, y]) => y) .attr("dy", "0.35em"); eventLabels.append("tspan") .text(([d]) => d.eventName); eventLabels.append("tspan") .text(([d]) => ` ${d.eventDescription} ${d3.timeFormat("%A, %e %B")(d.date)}`) .attr("x", width); // .text(([d]) => d.eventName); const tooltip = d3.create("div") .attr("class", "tooltip") .attr("aria-hidden", "true") .html(` `); const rangeY = dodgedYValues.map(x => x + params.plot.y); const rangeY0 = rangeY[0]; const fuzzyTextHeightAdjustment = 16 svg.on("touchend mouseout", function(event) { markers .attr("fill", d => d.eventType === "disaster" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.eventType === "disaster" ? markerDefaultColor : markerPersonalColor); eventLabels .style("opacity", 1); }); svg.on("touchmove mousemove", function(event) { const mouseY = d3.pointer(event,this)[1]; const nearestEventY = rangeY.reduce((a, b) => Math.abs(b - mouseY) < Math.abs(a - mouseY) ? b : a); const dodgedIndex = rangeY.indexOf(nearestEventY); const dataEvent = data[dodgedIndex]; if (mouseY >= rangeY0 - fuzzyTextHeightAdjustment) { eventLabels .filter((d, i) => i !== dodgedIndex) .style("opacity", 0.3); eventLabels .filter((d, i) => i === dodgedIndex) .style("opacity", 1); markers .filter((d, i) => i !== dodgedIndex) .attr("fill", markerFadedColor) .attr("stroke", markerFadedColor); markers .filter((d, i) => i === dodgedIndex) .attr("fill", d => d.eventType === "disaster" ? markerDefaultColor : markerPersonalColor) .attr("stroke", d => d.eventType === "Shared" ? markerDefaultColor : markerPersonalColor) .raise(); tooltip.style("opacity", 1); tooltip.style("transform", `translate(${(width >= params.smallScreenSize ? params.plot.x + 8 : 0)}px, calc(-100% + ${nearestEventY}px))`); tooltip.select("#date") // .text(d3.timeFormat("%A, %e %B")(dataEvent.date)); .text(d3.timeFormat("%b %Y")(dataEvent.date)); tooltip.select("#name") .html(dataEvent.eventName); tooltip.select("#description") .html(dataEvent.eventDescription); } }); svg.on("touchend mouseleave", () => tooltip.style("opacity", 0)); return html`

${tooltip.node()} ${svg.node()}

`; // return svg.node(); // yield svg.node(); // d3.selectAll(".event-name div").attr('class', 'teft'); }