Drop shadow on text in v4

Drop shadow on text in v5

This example displays an area chart of stock closing prices over time, with a titled axis and a line overlay. The visualization uses D3 v5 to render SVG shapes, including a shaded area path and a stroked line, while the main title is drawn twice to create a drop-shadow effect. The first text element uses a white stroke and opacity to simulate the shadow, and a second text element is placed on top. Data is loaded from a CSV file and parsed with `d3.timeParse`, with scales and axes created using `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`.

91% match

Drop shadow on text in v7

This example shows a time-series area chart of stock closing prices, with a prominent title that appears twice to create a drop shadow effect. The chart uses d3.csv to load the data, d3.timeParse for date formatting, and d3.scaleTime and d3.scaleLinear to set the scales. The area and line paths are built with d3.area and d3.line, while axes are generated via d3.axisBottom and d3.axisLeft. The shadow is achieved by rendering the title text twice: first with a white stroke and reduced opacity, then overlaid by the solid text.

90% match

Drop shadow on text in v6

This chart displays a time series of stock closing prices over a month, rendered as both a light blue area graph and a steel-blue line. A title with a white drop-shadow effect is created by duplicating the text element, with the underlying copy styled using a thick white stroke. The visualization uses d3.js v6, leveraging `d3.csv`, `d3.scaleTime`, `d3.area`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to build the SVG output from the CSV data.

88% match

Simple tooltips in v4

This example shows a simple line chart of stock closing prices over time, with interactive tooltips that appear when the user hovers over each data point. The tooltip displays the formatted date and closing value near the cursor. Built with d3.js v4, it uses `d3.timeParse` and `d3.scaleTime` for the date axis, `d3.line` to draw the path, and mouseover/mouseout events to animate the tooltip's opacity via `transition`. Data comes from a CSV file and is rendered as SVG circles and axes.

73% match

Scatterplot with v4

This example shows a line graph of stock closing prices over time, with scatterplot points overlaid on the line to mark individual data values. The code loads a CSV file with dates and closing prices, parses the dates with `d3.timeParse`, and defines scales using `d3.scaleTime` and `d3.scaleLinear`. It renders the line with a `d3.line` path and adds circles for each data point using SVG. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The visualization uses d3.v4 and is rendered as SVG in the browser.

Line graph with gradient in v4

This example shows a line graph of stock closing prices over time, with the line colored by a vertical gradient that shifts from red to black to green based on price levels. The visualization uses d3.v4 to load CSV data, parse dates with `d3.timeParse`, and render an SVG path via `d3.line`. A `linearGradient` with multiple stop points is applied to the line’s stroke, and axes are added using `d3.axisBottom` and `d3.axisLeft`. The data is drawn from `data.csv` containing date and close values.

Axis Labels in v4

This example shows a line chart of stock closing prices over time, with clear labels for both the x-axis (“Date”) and y-axis (“Value”). It uses d3.csv to load time-series data, d3.timeParse to convert date strings, and d3.scaleTime and d3.scaleLinear to map data to screen coordinates. The line is drawn as an SVG path with d3.line, and the axes are rendered via d3.axisBottom and d3.axisLeft. Custom text elements are appended to label the axes, demonstrating how to add axis titles in d3 v4.

Simple graph with grid lines in v4

A line chart displays stock closing prices over time from a CSV file, with light gray grid lines added behind the data. The chart uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and `d3.axisBottom` and `d3.axisLeft` with custom tick sizes to generate the grid. The visualization is based on a gist by d3noob, serving as a follow-up to a simpler line graph example.