Skip to main content
SimilarExport ZIP
100%

41. D3 Time Scale

✓ Published1🌍 Public
Aamakanju@nyit.edu
Last edited Feb 27, 2026
Created on Feb 9, 2026

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

AI-generated description

time_scale_data.csv

This file consists of a daily time series, from January 1 through 31, 2017. The "Amount" value in each row is semi-random, and was generated by me, Scott Murray, using the Numbers spreadsheet application.

You are welcome to use, reuse, adapt, and republish these random numbers in any context. They are about as useful as Dilbert’s budget numbers.

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…

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
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…

Untitled

This interactive time-series chart displays a daily value over three months and lets the user switch between daily, weekly, and monthly aggregated views. It renders an SVG line chart using D3 v3, with axis labels, an orange line, and a tooltip that appears on hover over the chart area. The code aggregates data by summing values for each time unit and linearly interpolates gaps, using APIs like `d3.time.scale`, `d3.svg.axis`, and `d3.bisector`. Buttons enable the time-unit selection, and the chart updates dynamically on click.

Ffaversin17
77% match
Loading thumbnail…

Fork of D3 Scale - ScaleTime

This example demonstrates how D3’s `scaleTime()` maps dates to x-coordinates along a linear time axis. It plots four circles at quarterly intervals between January 2016 and January 2017, positioning them at y=200 while labeling each with its full date string. The visualization uses an SVG canvas, with data bound via D3’s selection join (`selectAll().data().join()`). The scale’s domain spans one year, and its range runs from x=60 to x=900, making temporal spacing explicit. The code imports `scaleTime` from D3’s scales module.

SSubhendu Karmakar
76% match
Loading thumbnail…

Untitled

This example shows the annual variation of a single numeric value from 1895 to 2019, plotted as a time series using D3.js v6. The visualization calculates an SVG line chart from a CSV file with two columns, mapping the year to the x-axis and the value to the y-axis. The code loads the data with `d3.csv`, appends an SVG canvas with a fixed width and height, and prepares to render the dataset, though the drawing logic is incomplete. The chart relies on D3’s data-joining methods to bind the parsed rows to visual elements.

KKaitlyn Trudeau
75% match
Loading thumbnail…

Untitled

This bar chart displays monthly values over time, with each bar’s height representing a numeric amount in dollars. The chart uses D3.js (version 3.5.17) to parse date strings from a CSV file, map dates to ordinal positions on the x-axis, and scale values linearly on the y-axis. Axes are rendered using `d3.svg.axis` with rotated tick labels, and the bars are drawn as SVG rectangles filled in steel blue.

AAnju60
75% match
Loading thumbnail…

Untitled

An interactive time-series line chart displays daily, weekly, and monthly aggregations of value and quantity data from a CSV file. Buttons allow switching between these temporal resolutions, with the line path redrawing accordingly. Tooltips appear on mouseover, and the chart uses D3 v3 APIs including `d3.csv`, `d3.time.scale`, `d3.bisector`, and `d3.svg.axis`, with an SVG canvas and smooth animation during transitions.

Ggabrielribeirob
75% match