2b:null 2c:["$","title",null,{"children":"Line chart with tooltip | Berkeley MIDS W209 Information Visualization Course | Observable"}] 31:Tea2,chart = { // Declare the chart dimensions and margins. const width = 928; const height = 500; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; // Declare the x (horizontal position) scale. const x = d3.scaleUtc(d3.extent(aapl, d => d.Date), [marginLeft, width - marginRight]); // Declare the y (vertical position) scale. const y = d3.scaleLinear([0, d3.max(aapl, d => d.Close)], [height - marginBottom, marginTop]); // Declare the line generator. const line = d3.line() .x(d => x(d.Date)) .y(d => y(d.Close)); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;") .style("-webkit-tap-highlight-color", "transparent") .style("overflow", "visible") .on("pointerenter pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); // Add the x-axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); // Add the y-axis, remove the domain line, add grid lines and a label. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(height / 40)) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Daily Close ($)")); // Append a path for the line. svg.append("path") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("d", line(aapl)); // Create the tooltip container. const tooltip = svg.append("g"); function formatValue(value) { return value.toLocaleString("en", { style: "currency", currency: "USD" }); } function formatDate(date) { return date.toLocaleString("en", { month: "short", day: "numeric", year: "numeric", timeZone: "UTC" }); } // Add the event listeners that show or hide the tooltip. const bisect = d3.bisector(d => d.Date).center; function pointermoved(event) { const i = bisect(aapl, x.invert(d3.pointer(event)[0])); tooltip.style("display", null); tooltip.attr("transform", `translate(${x(aapl[i].Date)},${y(aapl[i].Close)})`); const path = tooltip.selectAll("path") .data([,]) .join("path") .attr("fill", "white") .attr("stroke", "black"); const text = tooltip.selectAll("text") .data([,]) .join("text") .call(text => text .selectAll("tspan") .data([formatDate(aapl[i].Date), formatValue(aapl[i].Close)]) .join("tspan") .attr("x", 0) .attr("y", (_, i) => `${i * 1.1}em`) .attr("font-weight", (_, i) => i ? null : "bold") .text(d => d)); size(text, path); } function pointerleft() { tooltip.style("display", "none"); } // Wraps the text with a callout path of the correct size, as measured in the page. function size(text, path) { const {x, y, width: w, height: h} = text.node().getBBox(); text.attr("transform", `translate(${-w / 2},${15 - y})`); path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`); } return svg.node(); }32:[] 2f:{"id":"31dd746b2aae3406","slug":null,"title":"Line chart with tooltip","thumbnail":"3d0e16b8241fb7c523c66294909ce22428a12de4d67b49d5b3ac7bbfd0e2a355","access_level":"public","create_time":"$D2026-02-19T00:54:03.333Z","update_time":"$D2026-02-19T00:54:03.333Z","view_time":null,"first_public_time":"$D2026-02-19T00:54:03.333Z","has_unpublished_edits":null,"fork":{"id":"1a77e4f83d1f0ed9","slug":"line-with-tooltip/2","title":"Line chart with tooltip","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"70c3e45a1a202b95","login":"berkeleyvis","name":"Berkeley MIDS W209 Information Visualization Course","avatar_url":"https://avatars-next.observableusercontent.com/15549145605863403a5e1a9e52e5f27f9a102749b0a2c648195d93efe07a5f34","tier":"education_2026","bio":""},"version":356,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1ae8c0930ef28f2d","login":"clover-ausdemore","name":"Clover Ausdemore","avatar_url":"https://avatars-next.observableusercontent.com/ffd008f6ecb6b4ce2b8bb6e7a1eb2d88c205e381da38583271174e07efb926dd","tier":null,"bio":""}],"members":[{"type":"individual","id":"1ae8c0930ef28f2d","login":"clover-ausdemore","name":"Clover Ausdemore","avatar_url":"https://avatars-next.observableusercontent.com/ffd008f6ecb6b4ce2b8bb6e7a1eb2d88c205e381da38583271174e07efb926dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Line chart with tooltip","cells":[{"id":1,"value":"

Line chart with tooltip

D3 › Gallery

\n\n# Line chart with tooltip\n\nThis [line chart](/@d3/line-chart) shows the price of Apple stock with an interactive tip. Data: [Yahoo Finance](https://finance.yahoo.com/lookup)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"Using [Observable Plot](/plot/)’s concise API, this chart typically needs a single line of code:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":333,"value":"Plot.lineY(aapl, {x: \"Date\", y: \"Close\", stroke: \"steelblue\", tip: true}).plot({y: {grid: true}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"