Skip to main content
SimilarExport ZIP
100%

Area chart

✓ Published1🌍 Public
MMuiruriscode
Last edited Oct 5, 2021
Created on Oct 5, 2021
Forked from Fork of Line 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.

AI-generated description

This line chart shows one week temperarature(in degrees celcius) in San Francisco the data comes from Data canvas-sense your city

MIT Licensed

Similar vizzes

Loading thumbnail…

AreaChart

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.

PPiotr Paszek
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
97% 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
95% 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 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
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…

Temperature in San Francisco: 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. Using D3 v5, the code loads CSV data, maps timestamps and temperature values through `scaleTime` and `scaleLinear`, and renders the area path with the `area()` generator and `curveBasis` smoothing. The SVG includes labeled axes, grid lines via tick sizes, and a title, all styled through external CSS.

LLongYuu
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