50. D3 Time Axis Prettier

100%

50. D3 Time Axis Prettier

✓ Published43🌍 Public

Last edited Feb 26, 2026

Created on Feb 9, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

49. D3 Time Axis

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()`.

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

83% match

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

82% match

Loading thumbnail…

Line Time 2

The chart displays a stepped line tracing a time series of monthly values from a CSV file, with data points highlighted by large circles. The visualization renders to an SVG element, using D3 v7’s `scalePoint`, `scaleLinear`, `line`, and `curveStep` APIs to construct the path, alongside `axisBottom` and `axisLeft` for the axes. Data is loaded via `csv`, sorted by date, and mapped onto the scales with a 0.5 padding factor. A title text element sits above the plotting area.

Ddiegobrivo

78% match

Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

EEleonore9

77% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

77% match

Loading thumbnail…

d3 playground

This example demonstrates a time-series line chart of daily amounts loaded from a CSV file, using axes with tick labels. It uses d3.csv to parse data, d3.scaleTime and d3.scaleLinear for scales, and d3.axisBottom and d3.axisLeft for the axes. Guide lines are drawn as SVG line elements, followed by circles for each data point, all rendered within an SVG container sized via width and height attributes.

Kkosakase

77% match

Loading thumbnail…

D3 Line Chart

A responsive D3.js line chart displays time-series data sampled every ten days across 2014, with a red locator circle that tracks touch or drag events. The chart loads CSV data via `d3.csv`, uses `d3.time.scale` and `d3.svg.line` for rendering, and adapts its margins and axis orientation based on window width. It includes two static text annotations and redraws on window resize through a custom `Chart.render` function.

PPacsangon

77% match