Skip to main content
SimilarExport ZIP
100%

D3: Time axis, prettier

✓ Published0🌍 Public
Nnikomc
Last edited Mar 31, 2020
Created on Mar 31, 2020

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.

AI-generated description

Learning about time-based axes (from Scott Murray's book).

MIT Licensed

Similar vizzes

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
81% match
Loading thumbnail…

Making Scatter Plot with D3

This example shows a scatter plot of date-value pairs from a CSV file, with points animating from radius 0 to 5 over one second. It uses D3 v5’s `scalePoint`, `scaleLinear`, `axisLeft`, and `axisBottom`, and applies an SVG `transition` to grow the circles. The y-axis scales values, while the x-axis maps dates as categorical points. Data is loaded via `d3.csv`, and the plot includes labeled axes and a title.

JJuan David Bolaños Rojas
81% match
Loading thumbnail…

D3 tryout

This example demonstrates a basic time-series line chart using D3 version 6. It plots a single series of date-value pairs from a remote CSV dataset, with a time-scaled x-axis and a linear y-axis. The code uses `d3.csv` to load and parse the data, `d3.timeParse` for date formatting, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` to generate the SVG path. The visualization renders as a simple steelblue line with axes, using an SVG container created with `d3.select`.

BBinod Sapkota
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
79% match
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee
78% match
Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans
78% match
Loading thumbnail…

D3 Course Code Along - Line Chart

This example shows a line chart of temperature readings over time, with two day patterns displayed as individual data points. The chart includes labeled axes, grid lines, and a title. The code uses D3 v5 with `scaleTime` and `scaleLinear` to map data, `axisLeft` and `axisBottom` to create axes, and `csv` to load the temperature data from a local file. SVG circles are used for each point, with a timestamp parsed into a JavaScript `Date` object.

Rrenenadorp
78% match
Loading thumbnail…

Simple scatter plot in v4

This example shows a simple line graph with circular data points overlaid to create a scatter plot, displaying stock closing prices over time. The visualization uses d3.csv to load the data, d3.timeParse to convert date strings, and d3.scaleTime and d3.scaleLinear to map the date and price values to pixel coordinates. A d3.line generator draws the line path, while appended circle elements mark each data point. The chart includes axes generated with d3.axisBottom and d3.axisLeft, all rendered as SVG within the page.

Dd3noob
78% match