49. D3 Time Axis

100%

49. D3 Time Axis

✓ Published1🌍 Public

Last edited Feb 26, 2026

Created on Feb 9, 2026

This example shows a time-series scatter plot where each daily data point is represented by a small circle, with formatted date labels placed beside the points and a time-based x-axis. The visualization uses D3.js version 4.5.0 with `d3.scaleTime()` for the x-axis, `d3.scaleLinear()` for the y-axis, and `d3.axisBottom()` and `d3.axisLeft()` for the axes. Data is loaded from a CSV file containing dates and amounts, with values parsed using `d3.timeParse()` and displayed using `d3.timeFormat()`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

D3: Time axis, prettier

This example shows a time-based scatterplot of daily amounts, with vertical grid lines and circular markers positioned along a date axis. The visualization uses D3 v5 and loads data from a CSV file via `d3.csv`, parsing date strings with `d3.timeParse` and formatting axis labels with `d3.timeFormat`. Axes are created using `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime` and `d3.scaleLinear` handle the positioning. The SVG rendering draws lines and circles for each data point, making the temporal trend of the amount values immediately apparent.

Nnikomc

88% match

Loading thumbnail…

50. D3 Time Axis Prettier

A time-series line chart displays daily values for January 2017, using vertical guide lines and circles to mark each data point. The visualization loads data from a CSV file and employs d3.scaleTime with a padded domain for the x-axis, while d3.axisBottom with nine ticks and a custom time format prettifies the date labels. d3.scaleLinear handles the y-axis, and the SVG is built with d3.select and appended elements.

Aamakanju@nyit.edu

85% match

Loading thumbnail…

41. D3 Time Scale

This visualization plots a daily time series from January 2017, showing a semi-random “Amount” value for each date. It uses D3’s `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The SVG renders small circles for each data point, with date labels placed behind them. The data is loaded from a CSV file using `d3.csv` and a row converter that parses dates with `d3.timeParse`.

Aamakanju@nyit.edu

85% match

Loading thumbnail…

42. D3 Axes

This example demonstrates how to add an axis to a scatter plot using D3.js version 4. A dataset of coordinate pairs is plotted as circles, with each circle’s size scaled by its y-value using a square-root scale. The visualization renders in SVG and includes a bottom axis created with `d3.axisBottom()`, while linear scales (`d3.scaleLinear`) map the data domain to the visual range. Red text labels display each point’s coordinates next to the circles.

Aamakanju@nyit.edu

81% match

Loading thumbnail…

45. D3 Axes Y

A scatterplot displays 11 data points as circles, with each point labeled by its x,y coordinates in red text. The visualization implements two linear scales for the x- and y-axes using `d3.scaleLinear()`, plus a square-root scale (`d3.scaleSqrt()`) to encode the y-values as circle radii. Vertical and horizontal axes are added using `d3.axisBottom()` and `d3.axisLeft()`, both with five ticks, and rendered as SVG groups. The chart uses a 500×300 SVG canvas with explicit padding.

Aamakanju@nyit.edu

81% match

Loading thumbnail…

44. D3 Axes Clean

This example shows a scatter plot of coordinate pairs plotted with D3.js version 4.5.0. It renders circles and red text labels in an SVG canvas, using `d3.scaleLinear` for x and y axes and `d3.scaleSqrt` for circle radius sizing based on the y-value. The X-axis is customized with `d3.axisBottom` and `tickValues` to display only four specific tick marks (0, 100, 250, 600), demonstrating how to reduce axis clutter.

Aamakanju@nyit.edu

81% match

Loading thumbnail…

47. D3 Axes No Labels

A scatterplot displays 50 randomly generated data points as circles, with their horizontal position mapped from a linear scale and their vertical position from a second linear scale. Circle area encodes the y-value through a square-root scale. The chart includes x and y axes with ticks, created via `d3.axisBottom` and `d3.axisLeft`, but all text labels are removed. The SVG is built dynamically with random data generated in JavaScript, using `d3.scaleLinear` and `d3.scaleSqrt` for coordinate and size mappings.

Aamakanju@nyit.edu

79% match

Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Yyastika

78% match