step 2

100%

✓ Published0🌍 Public

Last edited Aug 5, 2016

Created on Aug 5, 2016

This example displays temperature data over time as a smooth blue line chart. The visualization uses D3.js v4’s `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` APIs to map dates and temperature values to screen coordinates, while `d3.line` with `d3.curveBasis` creates the curved data series. The SVG rendering uses a hidden x-axis path and a steelblue stroke, with data formatted from a `%Y%m%d` date string via `d3.timeParse`.

AI-generated description

Built with blockbuilder.org

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Line Chart Temperature vs Time Part - 2

This example visualizes temperature over time using a smoothed line chart, where each data point is marked with a circle and a tooltip showing its timestamp. Built with React and D3 v5, it renders an SVG containing axes, grid lines, and the data marks. The code uses `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, `d3.line` with `curveNatural` for the interpolated path, and `d3.extent` to set the domain. Temperature and time labels are added, though no custom color encoding appears. The data is loaded from a CSV file.

Ggoyalshivam204

81% match

Loading thumbnail…

Line Chart

This line chart visualizes temperature data over time, using a smooth basis curve to connect data points. The chart is rendered as SVG in a D3.js v5 application, with axes created using `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom`. The line is drawn with the `line` generator and `curveBasis` for a smooth path. The data is loaded from a CSV file hosted on VizHub, and the plot includes labeled time and temperature axes with a title.

Yylzami40

80% match

Loading thumbnail…

step4

This example shows daily temperature readings for three cities (New York, San Francisco, and Austin) across several months, plotted as three multi-series line charts. The visualization displays each city's temperature trend over time on a shared time axis and temperature scale, with color distinguishing the cities. It uses D3 v4’s `d3.tsv` to load tab-separated data, `d3.line` with `d3.curveBasis` for smooth curves, and renders the result as SVG. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` map dates, temperatures, and city names respectively.

深深度碎片

79% match

Loading thumbnail…

Temperature Line Chart

This line chart visualizes temperature readings over time, with a smooth curved line and circular markers at each data point. The visualization uses D3’s `scaleTime` and `scaleLinear` for axes, `line()` with `curveBasis` for the path, and `axisBottom`/`axisLeft` for ticks. Data from a CSV of San Francisco temperatures is loaded via `csv` and parsed into dates and numbers. The SVG rendering includes gridlines, axis labels, and a title, with the line styled in steelblue.

DdeafMother

78% match

Loading thumbnail…

d3v4 - Gradient Color Line Chart

This example shows a line chart of temperature data over time, where the line’s color shifts through a red-gray-steelblue gradient based on value. The chart uses d3.v4's `d3.line()` with `d3.curveStep` to generate a stepped path, and a `linearGradient` with three `stop` elements, defined in SVG `defs`, applies the color scale via the `stroke` attribute. The data is loaded from a CSV of temperature readings, with x/y axes scaled using `d3.scaleLinear()`.

HHirosaji

78% match

Loading thumbnail…

Line Chart

This line chart displays temperature measurements over time, using a smooth basis curve to connect data points. The visualization is built with D3 version 6 and rendered as an SVG, with the temperature data sourced from a CSV file of San Francisco weather records. The chart employs `scaleTime` and `scaleLinear` for the axes, along with `axisBottom`, `axisLeft`, and `line` to generate the plot.

NNoobSaiyan

77% match

Loading thumbnail…

Line with time temperature

This example displays a line chart of temperature over time, using a smooth natural curve to connect weekly data points. The chart includes labeled axes for time and temperature, with a clean SVG rendering that emphasizes the trend. It uses React to structure the visualization and D3 v6 functions like `scaleTime`, `scaleLinear`, and `line().curve(curveNatural)` for data mapping and path generation. Data comes from a CSV file of San Francisco weekly temperatures, loaded with `d3.csv`.

JJonas Carvalho

77% match

Loading thumbnail…

Working with time

This visualization displays how temperature varies over time, plotted as a smooth line chart with time on the x-axis and temperature on the y-axis. The chart uses d3.scaleTime for the date-based x-axis and d3.scaleLinear for the temperature y-axis, with tick labels formatted to show weekdays. Data is loaded as CSV from a GitHub gist via d3.csv. The React framework with d3.v6 renders SVG elements, including axes, axis labels, and a path generated using d3.line with curveNatural.

BbeauMarko

77% match