Simple Area Chart with Tooltip I wanted to create a simple area chart with tooltip as data viz exercise and found myself Googling many resources to make this work. So I tohught I'd share my solution that is up to date with D3 v5 and hope this would be useful for someone one day. The dataset is pulled from Population Time Series Data
chart = { // Area const area = d3.area() .x(d => xScale(d.date)) .y1(d => yScale(d.population)) .y0(yScale(0)) ; svg.append('path') .attr('d', area(data)) .attr('stroke', '#147F90') .attr('stroke-width', '2px') .attr('fill', '#A6E8F2') ; // Axis const xAxis = d3.axisBottom() .scale(xScale); const xAxisTranslate = height - margin.bottom; svg.append('g') .attr('transform', `translate(0, ${xAxisTranslate})`) .call(xAxis) ; const yAxis = d3.axisLeft() .tickFormat(d3.format('~s')) .scale(yScale); svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(yAxis) ; // Interactivity svg.append('line').classed('hoverLine', true) svg.append('circle').classed('hoverPoint', true); svg.append("text").classed('hoverText', true); svg.append('rect') .attr('fill', 'transparent') .attr('x', 0) .attr('y', 0) .attr('width', width) .attr('height', height) ; svg.on('mousemove', mouseMove); // Render return svg.node(); }
Data
sourceData = [ {"population":"76094000","date":"1900-01-01"}, {"population":"77584000","date":"1901-01-01"}, {"population":"79163000","date":"1902-01-01"}, {"population":"80632000","date":"1903-01-01"}, {"population":"82166000","date":"1904-01-01"}, {"population":"83822000","date":"1905-01-01"}, {"population":"85450000","date":"1906-01-01"}, {"population":"87008000","date":"1907-01-01"}, {"population":"88710000","date":"1908-01-01"}, {"population":"90490000","date":"1909-01-01"}, {"population":"92407000","date":"1910-01-01"}, {"population":"93863000","date":"1911-01-01"}, {"population":"95335000","date":"1912-01-01"}, {"population":"97225000","date":"1913-01-01"}, {"population":"99111000","date":"1914-01-01"}, {"population":"100546000","date":"1915-01-01"}, {"population":"101961000","date":"1916-01-01"}, {"population":"103268000","date":"1917-01-01"}, {"population":"103208000","date":"1918-01-01"}, {"population":"104514000","date":"1919-01-01"}, {"population":"106461000","date":"1920-01-01"}, {"population":"108538000","date":"1921-01-01"}, {"population":"110049000","date":"1922-01-01"}, {"population":"111947000","date":"1923-01-01"}, {"population":"114109000","date":"1924-01-01"}, {"population":"115829000","date":"1925-01-01"}, {"population":"117397000","date":"1926-01-01"}, {"population":"119035000","date":"1927-01-01"}, {"population":"120509000","date":"1928-01-01"}, {"population":"121767000","date":"1929-01-01"}, {"population":"123076741","date":"1930-01-01"}, {"population":"124039648","date":"1931-01-01"}, {"population":"124840471","date":"1932-01-01"}, {"population":"125578763","date":"1933-01-01"}, {"population":"126373773","date":"1934-01-01"}, {"population":"127250232","date":"1935-01-01"}, {"population":"128053180","date":"1936-01-01"}, {"population":"128824829","date":"1937-01-01"}, {"population":"129824939","date":"1938-01-01"}, {"population":"130879718","date":"1939-01-01"}, {"population":"132122446","date":"1940-01-01"}, {"population":"133402471","date":"1941-01-01"}, {"population":"134859553","date":"1942-01-01"}, {"population":"136739353","date":"1943-01-01"}, {"population":"138397345","date":"1944-01-01"}, {"population":"139928165","date":"1945-01-01"}, {"population":"141388566","date":"1946-01-01"}, {"population":"144126071","date":"1947-01-01"}, {"population":"146631302","date":"1948-01-01"}, {"population":"149188130","date":"1949-01-01"}, {"population":"152271417","date":"1950-01-01"}, {"population":"154877889","date":"1951-01-01"}, {"population":"157552740","date":"1952-01-01"}, {"population":"160184192","date":"1953-01-01"}, {"population":"163025854","date":"1954-01-01"}, {"population":"165931202","date":"1955-01-01"}, {"population":"168903031","date":"1956-01-01"}, {"population":"171984130","date":"1957-01-01"}, {"population":"174881904","date":"1958-01-01"}, {"population":"177829628","date":"1959-01-01"}, {"population":"180671158","date":"1960-01-01"}, {"population":"183691481","date":"1961-01-01"}, {"population":"186537737","date":"1962-01-01"}, {"population":"189241798","date":"1963-01-01"}, {"population":"191888791","date":"1964-01-01"}, {"population":"194302963","date":"1965-01-01"}, {"population":"196560338","date":"1966-01-01"}, {"population":"198712056","date":"1967-01-01"}, {"population":"200706052","date":"1968-01-01"}, {"population":"202676946","date":"1969-01-01"}, {"population":"205052174","date":"1970-01-01"}, {"population":"207660677","date":"1971-01-01"}, {"population":"209896021","date":"1972-01-01"}, {"population":"211908788","date":"1973-01-01"}, {"population":"213853928","date":"1974-01-01"}, {"population":"215973199","date":"1975-01-01"}, {"population":"218035164","date":"1976-01-01"}, {"population":"220239425","date":"1977-01-01"}, {"population":"222584545","date":"1978-01-01"}, {"population":"225055487","date":"1979-01-01"}, {"population":"227224681","date":"1980-01-01"}, {"population":"229465714","date":"1981-01-01"}, {"population":"231664458","date":"1982-01-01"}, {"population":"233791994","date":"1983-01-01"}, {"population":"235824902","date":"1984-01-01"}, {"population":"237923795","date":"1985-01-01"}, {"population":"240132887","date":"1986-01-01"}, {"population":"242288918","date":"1987-01-01"}, {"population":"244498982","date":"1988-01-01"}, {"population":"246819230","date":"1989-01-01"}, {"population":"249464396","date":"1990-01-01"}, {"population":"252153092","date":"1991-01-01"}, {"population":"255029699","date":"1992-01-01"}, {"population":"257782608","date":"1993-01-01"}, {"population":"260327021","date":"1994-01-01"}, {"population":"262803276","date":"1995-01-01"}, {"population":"265228572","date":"1996-01-01"}, {"population":"267783607","date":"1997-01-01"}, {"population":"270248003","date":"1998-01-01"}, {"population":"272690813","date":"1999-01-01"} ]
data = sourceData.map(d => ({ date: new Date(d.date), population: +d.population }))
Configuration
height = 500;
width = 1000;
margin = ({ top: 40, right: 20, bottom: 20, left: 40, })
svg = d3.select(DOM.svg(width, height));
Scales
xScale = { const xExtent = d3.extent(data, d => d.date); const xScale = d3.scaleTime() .domain(xExtent) .range([margin.left, width - margin.right]); return xScale; }
yScale = { const yMax = d3.max(data, d => d.population); const yMin = 0; const yScale = d3.scaleLinear() .domain([yMin, yMax]) .range([height - margin.bottom, margin.top]); return yScale; }
Interactivity
mouseMove = () => { d3.event.preventDefault(); const mouse = d3.mouse(d3.event.target); const [ xCoord, yCoord, ] = mouse; const mouseDate = xScale.invert(xCoord); const mouseDateSnap = d3.timeYear.floor(mouseDate); if (xScale(mouseDateSnap) < margin.left || xScale(mouseDateSnap) > width - margin.right) { return; } const bisectDate = d3.bisector(d => d.date).right; const xIndex = bisectDate(data, mouseDateSnap, 1); const mousePopulation = data[xIndex].population; svg.selectAll('.hoverLine') .attr('x1', xScale(mouseDateSnap)) .attr('y1', margin.top) .attr('x2', xScale(mouseDateSnap)) .attr('y2', height - margin.bottom) .attr('stroke', '#147F90') .attr('fill', '#A6E8F2') ; svg.selectAll('.hoverPoint') .attr('cx', xScale(mouseDateSnap)) .attr('cy', yScale(mousePopulation)) .attr('r', '7') .attr('fill', '#147F90') ; const isLessThanHalf = xIndex > data.length / 2; const hoverTextX = isLessThanHalf ? '-0.75em' : '0.75em'; const hoverTextAnchor = isLessThanHalf ? 'end' : 'start'; svg.selectAll('.hoverText') .attr('x', xScale(mouseDateSnap)) .attr('y', yScale(mousePopulation)) .attr('dx', hoverTextX) .attr('dy', '-1.25em') .style('text-anchor', hoverTextAnchor) .text(d3.format('.5s')(mousePopulation)); };
Library
d3 = require("d3@5")