2b:null 2c:["$","title",null,{"children":"Interactive sparkline with d3 | kj9 | Observable"}] 31:Ta80,draw = (data) => { console.log(data); const wrapper = d3.select(el); const svg = wrapper .select("[data-chart]") .append("svg") .attr("viewBox", `0 0 ${dimensions.width} ${dimensions.height}`); const xAccessor = (d) => d.date; const yAccessor = (d) => d.downloads; const xDomain = d3.extent(data, xAccessor); const xScale = d3.scaleTime().domain(xDomain).range([0, dimensions.width]); const yDomain = [0, d3.max(data, yAccessor)]; const yScale = d3 .scaleLinear() .domain(yDomain) .range([dimensions.height, dimensions.marginTop]); const lineGenerator = d3 .line() .x((d) => xScale(xAccessor(d))) .y((d) => yScale(yAccessor(d))) .curve(d3.curveBumpX); const line = svg /* Append `path` */ .append("path") /* Bind the data */ .datum(data) /* Pass the generated line to the `d` attribute */ .attr("d", lineGenerator) /* Set some styles */ .attr("stroke", "var(--stroke)") .attr("stroke-width", 4) .attr("stroke-linejoin", "round") .attr("fill", "none"); const areaGenerator = d3 .area() .x((d) => xScale(xAccessor(d))) .y1((d) => yScale(yAccessor(d))) .y0(dimensions.height) .curve(d3.curveBumpX); const area = svg .append("path") .datum(data) .attr("d", areaGenerator) .attr("fill", "var(--fill)"); const markerLine = svg .append("line") .attr("x1", 0) .attr("x2", 0) .attr("y1", 0) .attr("y2", dimensions.height) .attr("stroke-width", 2) .attr("stroke", "var(--stroke)") .attr("opacity", 0); const markerDot = svg .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", "var(--stroke)") .attr("opacity", 0); const bisect = d3.bisector(xAccessor); svg.on("mousemove", (e) => { const pointerCoords = d3.pointer(e); const [posX, posY] = pointerCoords; /* Find date from position */ const date = xScale.invert(posX); /* Find the closest data point */ const index = bisect.center(data, date); const d = data[index]; const x = xScale(xAccessor(d)); const y = yScale(yAccessor(d)); markerLine.attr("x1", x).attr("x2", x).attr("opacity", 1); markerDot.attr("cx", x).attr("cy", y).attr("opacity", 1); const formatDate = d3.timeFormat("%Y-%m-%d"); const getText = (data, d) => { /* Current date */ const to = xAccessor(d); /* Date one week previously */ const from = d3.timeDay.offset(to, -7); return `${formatDate(from)} to ${formatDate(to)}`; }; d3.select("[data-heading]").text(getText(data, d)); d3.select("[data-total]").text(yAccessor(d)); }); }32:[] 2f:{"id":"01bb390b6fcba723","slug":null,"title":"Interactive sparkline with d3","thumbnail":"712f670dd07ebcb6084a6165c6bac364e2ff51e0de30cd633f5bd0300350212d","access_level":"public","create_time":"$D2023-01-29T13:34:53.036Z","update_time":"$D2023-02-03T11:38:55.245Z","view_time":null,"first_public_time":"$D2023-01-29T13:34:53.036Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"9a1d7227cee687d6","login":"kj9","name":"kj9","avatar_url":"https://avatars-next.observableusercontent.com/d4d04a521026803172339d7d44e2d105118dc0d969d29f4b9999450f75599677","tier":"starter_2024"},"version":204,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"71f807c27be719b8","login":"kj9","name":"kj9","avatar_url":"https://avatars-next.observableusercontent.com/d4d04a521026803172339d7d44e2d105118dc0d969d29f4b9999450f75599677","tier":null}],"members":[{"type":"individual","id":"71f807c27be719b8","login":"kj9","name":"kj9","avatar_url":"https://avatars-next.observableusercontent.com/d4d04a521026803172339d7d44e2d105118dc0d969d29f4b9999450f75599677","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Interactive sparkline with d3","cells":[{"id":148,"value":"# Interactive sparkline with d3\nreplicating [this article](https://tympanus.net/codrops/2022/03/29/building-an-interactive-sparkline-graph-with-d3/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"html`\n

\n\t\t\n\t\tPurple\n\t
\n\t\t\n\t\tRed\n\t
\n\t\t\n\t\tBlue\n\t

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"el = html`\n\n\n

\n\t

\n\t\t

Weekly downloads

\n\t\t

800

\n\t

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"{\n const inputs = d3.selectAll('input[type=\"radio\"]');\n const colors = inputs.nodes().map((input) => input.value);\n d3.select(\".controls-list\").on(\"click\", (e) => {\n const { value, checked } = e.target;\n\n if (!value || !checked) return;\n\n document.body.classList.remove(...colors);\n document.body.classList.add(value);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"draw(sortData)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"sortData = {\n const data = await d3.json(\"https://api.npoint.io/9f3edee2d00c8ade835c\");\n\n return data\n .slice(0, 100)\n .map((d) => {\n return {\n ...d,\n date: new Date(d.date)\n };\n })\n .sort((a, b) => d3.ascending(a.date, b.date));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"dimensions = ({\n width: 600,\n height: 200,\n marginTop: 8,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"