Skip to main content
SimilarExport ZIP
100%

D3 Example

✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 6, 2015
Created on May 14, 2015

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.

AI-generated description

A standalone D3 line chart.

This is example 107 of the screencast Introduction to D3.

<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1948663&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->

Similar vizzes

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

Temperature in San Francisco Line Chart

This example shows a line chart of temperature readings over a week in San Francisco, rendered as an SVG using D3 v5. The chart plots timestamps on the x-axis and temperature on the y-axis, with a smooth basis-curve line and labeled axes. It loads CSV data from a remote URL, parses the timestamp strings into Date objects, and applies a time scale for the x-axis and a linear scale for the y-axis. The visualization uses `d3.select`, `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` with a basis curve to draw the smooth path, styled with a steelblue stroke.

Hhugomell
87% match
Loading thumbnail…

D3 Example

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.

CCurran Kelleher
87% 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
87% match
Loading thumbnail…

Line chart

This line chart visualizes temperature readings in San Francisco over several days in March 2015. The chart plots time on the x-axis and temperature in degrees Celsius on the y-axis, with a smooth red curve connecting the data points. It uses D3 v7's `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `line` with `curveBasis` to draw the smooth path. The data is loaded from a CSV file and rendered as an SVG.

EEngine194
87% match
Loading thumbnail…

D3 Temperature in San Francisco Line Chart

This line chart visualizes temperature variations in San Francisco over a week, using a smooth curved line to show the trend over time. The visualization employs D3 v7's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. The data is loaded from a CSV file, with timestamps parsed into Date objects and temperatures converted to numbers. The chart includes labeled axes, grid lines, and a title, while the line is styled with a maroon stroke and rounded joins.

Aadbirch
87% match
Loading thumbnail…

Line Chart

This example visualizes the temperature in San Francisco over time using a smooth, orange line chart generated with D3.js v5. The SVG rendering displays time on the x-axis and temperature on the y-axis, with styled axis labels and a title. The code fetches data from a CSV file, scales the axes with `scaleTime` and `scaleLinear`, creates grid lines via `axisBottom` and `axisLeft`, and draws the curve using the `line` and `curveBasis` functions.

PPabloReyesBetanzo
87% match