Skip to main content
SimilarExport ZIP
100%

AreaChart

✓ Published2🌍 Public
PPiotr Paszek
Last edited Apr 24, 2021
Created on Apr 24, 2021
Forked from Linechart

This area chart shows one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The chart uses D3 v6 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.area` with a curve basis. Data is loaded from a CSV file via `d3.csv` and parsed into temperature and timestamp values. The visualization includes labeled axes, a title, and grid lines created through custom tick sizes.

AI-generated description

This linechart shows one week of temperature (in degrees Celcius) in San Francisco. Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

Area chart

This area chart visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The chart uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` with a `curveBasis` to create the shaded region. The data is loaded from a CSV file via `d3.csv`, and axes are generated with `d3.axisBottom` and `d3.axisLeft`, which include gridlines and labeled tick marks.

MMuiruriscode
97% match
Loading thumbnail…

Area Chart

This area chart visualizes a week of temperature data for San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The data is loaded from a CSV hosted on VizHub using `d3.csv`. The SVG rendering uses `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisBottom` and `d3.axisLeft` for labeled axes, and an `d3.area` generator with `curveBasis` to create the smooth maroon filled region. The visualization includes axis tick lines, padded ticks, and a title, with axis labels rotated for legibility.

Ggilbster
96% match
Loading thumbnail…

Area Chart

This area chart displays the temperature in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using D3 v7, and it employs `scaleTime` and `scaleLinear` for the axes, with `line` and `curveBasis` to draw the smooth line path. Data is loaded from a CSV file hosted on VizHub, and axis labels and a title are added using D3's `axisBottom` and `axisLeft` functions.

JJuyeonee
95% match
Loading thumbnail…

Area chart

This area chart visualizes temperature variations in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The data comes from a CSV file loaded via `d3.csv`, and timestamps are parsed as dates. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with `curveBasis` to create a smooth filled path, rendered as SVG. Axes are drawn with `axisBottom` and `axisLeft`, styled with custom CSS classes for ticks and labels.

VVinh H. Le
94% match
Loading thumbnail…

Area Chart

This area chart depicts a week of temperature readings in San Francisco, showing how the y-axis maps temperature and the x-axis maps date and time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `area()` with `curveBasis` to generate the filled path, and `axisBottom`/`axisLeft` for gridlines. Data comes from a CSV file of San Francisco temperatures, loaded via `csv`, with circles overlaid on the area to highlight individual measurements.

MMunTatt Yap
94% match
Loading thumbnail…

Area Chart

This area chart visualizes temperature readings in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart uses a green filled area beneath a blue line, rendered as SVG via d3. The code imports specific d3 modules including `area`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the visualization. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures as numbers. The chart includes styled axes, grid lines, and a title, with axis labels rotated for the y-axis.

HHuaiyu Sun
94% match
Loading thumbnail…

A Week in San Francisco Area Chart

This area chart visualizes San Francisco temperature data over one week, with time on the x-axis and temperature on the y-axis. The chart uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` to render a smooth maroon filled path within an SVG. Grid lines and axis labels are styled via CSS, and the data is loaded as CSV from a remote URL, parsed with `csv`, then processed by mutating each row’s timestamp and temperature values before rendering.

Eecw99
94% match
Loading thumbnail…

Area chart

This area chart displays one week of temperature in degrees Celsius for San Francisco, using data from the Data Canvas - Sense Your City project. The visualization fills the space between a baseline and the temperature line with a light pink area, making fluctuations easy to spot. Built with D3 v5, it uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `area` with `curveBasis` to generate the smooth filled path. Axis labels and a title are added via SVG text elements, and the timestamp and temperature values are parsed from a CSV file.

Ggayathrikavya
94% match