line chart

100%

✓ Published1🌍 Public

Last edited Mar 5, 2021

Created on Mar 5, 2021

This example shows daily minimum temperatures in Berlin for February, with orange and blue background areas highlighting warm and freezing periods around a marked freezing point. The line chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` generator to map date and temperature data from a CSV file. SVG circles mark each data point, while axes include tick grids and rotated labels, rendered with a beige background via D3 selections.

AI-generated description

A basic line chart using D3.js.

MIT Licensed

Similar vizzes

Loading thumbnail…

Basic Line Chart

This basic line chart visualizes temperature readings over the first ten days of a month, with each day plotted on the x-axis and temperature in Celsius on the y-axis. The chart includes labeled axes, a curved trend line, and semi-transparent data point circles, all rendered as SVG. The code uses D3 v5 functions including `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to generate the scales, axes, and smoothed path from the CSV data.

FFhouston17

77% match

Loading thumbnail…

A Line-Chart with D3.js

The visualization displays yearly average rainfall and temperature in Germany from 1991 to 2015 as a dual-line chart, with red lines for temperature and blue lines for precipitation. It uses D3.js v5.7.0 with SVG rendering, leveraging `d3.nest()` to group raw CSV data by year and `d3.mean()` to compute annual averages. The chart implements linear scales, axis generators (`d3.axisBottom`, `d3.axisLeft`, `d3.axisRight`), and line generators to plot the two time series, with labeled axes for clarity.

Bbirat-banstola

76% match

Loading thumbnail…

Line chart

This line chart visualizes daily mean temperature changes over time, with the x-axis representing days and the y-axis showing mean temperature in degrees. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs to render an SVG path with red strokes. Data is loaded from a CSV file via `d3.csv`, and dates are parsed with `d3.timeParse`. Grid lines are drawn using tick sizes, and axis labels are added manually within the SVG.

KKishen Patel

76% 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

76% match

Loading thumbnail…

FullStack D3 1

A line chart displays daily maximum temperatures over time, with a light blue rectangular region highlighting temperatures below the freezing point of 32 degrees Fahrenheit. The visualization uses D3 v5 to load JSON weather data, parse dates, and generate the SVG line and axes. The chart is rendered inside a React application, with margins and scales configured programmatically to fit the window width.

Ssakhabutdinov

75% match

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature readings in degrees Celsius for cities worldwide, with each city represented by a colored line. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `nest` to group data by city, while `axisBottom` and `axisLeft` render the labeled axes with grid lines. A `colorLegend` function, built with SVG circles and text, maps city names to a `schemeCategory10` palette. The data originates from Data Canvas - Sense Your City, and the chart emphasizes final temperature values by sorting city lines in descending order.

AAmirah Syafiqah

75% match

Loading thumbnail…

ICE 7 - Line Chart

This line chart displays daily average air temperatures in Belgium for 2021, using a red gradient line to trace temperature trends over time. The x-axis shows months with grid lines, while the y-axis labels temperature values. Built with D3 v6, it uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to generate a smooth path. The SVG renders axis ticks with a brown gradient fill, and the line’s color comes from a linearGradient defined in the SVG defs.

BBaswa Sathvika Reddy

75% match

Loading thumbnail…

Line Chart

This example visualizes temperature over time with a line chart. The SVG rendering plots a line and points connecting daily temperature readings, with axes and tick labels generated from the data. Built with React and D3 v5, it uses `scaleLinear` for scaling, `line` from D3 for the path, and `timeFormat` for tick labels. The data is loaded as CSV from a remote URL using D3's `csv` utility, and React state manages the asynchronous data fetching.

Uuplusv

75% match