D3 Example

100%

✓ Published0🌍 Public

Last edited Jun 17, 2015

Created on Jun 17, 2015

As more data loads, this D3 example builds a multi-day temperature line chart for San Francisco, one CSV file at a time. Each file holds a day of hourly readings, and the visualization re-renders as each new day is fetched, revealing the dataset’s daily cycles. The SVG line chart, based on a standalone example, shows the temperature curve extending across time with each incremental load, demonstrating how to stream and update data progressively in the browser.

AI-generated description

This example shows one way to load data files one by one, and re-render the visualization each time more data is fetched. This data set presents temperature in San Francisco every hour, over 26 days. The data for each day is in a separate CSV file. Here is more information about this data, and here's the script that generated these files.

This just shows how to load data incrementally. For ideas on how to make this look even smoother, see this Path Transitions article by Mike Bostock.

This example was created to address this conversation on the D3 Google Group: Is it possible to smoothly load 200MB data to remote clients' browser with D3?.

The line chart visualization code is based on a previous example: Standalone Line Chart.

Similar vizzes

Loading thumbnail…

D3 Example

This example shows a line chart of temperature readings in San Francisco over a week in March 2015, rendered as an SVG. The chart uses D3's time scale for the x-axis (timestamp) and a linear scale for the y-axis (temperature in °C). The line is drawn with a black, 1-pixel stroke, and both axes include styled tick labels and descriptive titles ("Time" and "Temperature °C") with a Poiret One font. The visualization reads the data from a CSV file and updates the scales and line path accordingly.

CCurran Kelleher

87% match

Loading thumbnail…

D3 Course 3: Line Chart

This example presents a line chart of temperature over time in San Francisco, plotting daily temperature readings along a continuous timeline. The visualization uses D3 v5 with an SVG rendering approach, employing scaleTime and scaleLinear for the axes, and a line generator with curveBasis to create a smooth path. The chart includes labeled axes for "Time" and "Temperature," a title, and gridlines generated via axisBottom and axisLeft with tick sizes. Data is loaded asynchronously from a CSV file through a custom getData() promise, which resolves after a two-second delay before rendering.

GGabrz

85% match

Loading thumbnail…

Temperature in San Francisco with D3.js!

This example visualizes hourly temperature readings in San Francisco over several days in March 2015. Each data point appears as a semi-transparent circle on a scatterplot, with time on the x-axis and temperature in degrees Celsius on the y-axis. The chart is rendered as SVG using D3.js v5, with scales and axes built via `scaleLinear`, `axisBottom`, and `axisLeft`. Data is loaded from a CSV file using `csv`, and the circles are appended to the SVG with `selectAll().data().enter()`.

CCalvin Gomez

83% match

Loading thumbnail…

Stylized Line Plot

This example visualizes daily temperature variations in San Francisco using D3.js and React. The line plot shows temperature trends over time, with semi-transparent circular markers highlighting individual data points and tooltips displaying dates on hover. The visualization implements the D3 margin convention, using `scaleTime` and `scaleLinear` for axes, `line` with `curveNatural` for the smooth path, and React components for rendering SVG elements. Data is loaded asynchronously via `csv` from a GitHub gist, with the chart styled using Montserrat font and custom axis colors.

Llaurajchang

82% match

Loading thumbnail…

D3 Temperature Line Chart

This example displays a line chart of temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. It uses D3 v7 with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render smooth paths into SVG. The data comes from a CSV file loaded via `d3.csv`, and the chart includes labeled axes, a title, and circular data points styled with CSS. Grid lines are drawn through negative tick sizes.

YYoung Song

82% match

Loading thumbnail…

D3 Course 3: Line Chart

This line chart displays temperature readings in San Francisco over time, with time on the x-axis and temperature on the y-axis, using a smooth curve. The visualization is rendered as an SVG using D3 v5, and loads its data from a CSV file via `d3.csv`. The code employs `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` with `curveBasis` to construct the chart, and includes a custom `getData` function that resolves the dataset after a delay.

Aabdullatku

82% match

Loading thumbnail…

Loading and Parsing CSV Data

This example animates a time-series area and line chart of temperature data from San Francisco, loading the dataset from a remote CSV file. The visualization reveals temperature trends over time, with a gradient-filled area beneath a red line that smoothly updates as new data points are appended. Built with D3 v5, it uses `csv()` to parse the data, `scaleTime` and `scaleLinear` for axes, and the `area` and `line` generators with a basis curve. A transition loop sequentially shifts data through the chart, redrawing both paths to create a flowing effect.

Llystran

82% match

Loading thumbnail…

D3 course - working with time

This example visualizes a week of San Francisco temperatures in degrees Celsius using a line chart with a gradient stroke and colored scatter points. It shows temperature fluctuations over time, with each point offering a tooltip displaying the exact date and rounded temperature. The visualization is built with React and D3 v7, using `scaleTime` and `scaleLinear` for axes, `d3.line` with curve interpolation for the path, and a custom `linearGradient` for the stroke. Data is loaded asynchronously via `d3.csv` from a GitHub gist.

JJames Rhodes

81% match