AREA CHART

100%

✓ Published0🌍 Public

Last edited Mar 22, 2020

Created on Mar 22, 2020

This area chart displays one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses D3.js v5 to render an SVG path with a smooth curve via `d3.area` and `curveBasis`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while scales are set using `d3.scaleTime` and `d3.scaleLinear`. The chart includes labeled axes and a title, with the filled area styled light blue.

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in San Francisco. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

Loading thumbnail…

area

This area chart displays temperature data for one week in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.area with curveBasis to create a smooth filled region between the line and the baseline, with orange fill. Axes are generated using d3.axisBottom and d3.axisLeft, with scales from d3.scaleTime and d3.scaleLinear. The rendering is SVG-based, and the code imports utilities from D3 v6, including extent, max, and format for tick labels.

Eeravellisaimeghana

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

Loading thumbnail…

D3-5: Area Charts

This area chart visualizes one week of temperature in San Francisco, using data sourced from Data Canvas - Sense Your City. It presents time on the x-axis (via `d3.scaleTime`) and temperature on the y-axis (via `d3.scaleLinear`), with the filled region generated by `d3.area` and a curved basis interpolation. The SVG rendering includes labeled axes, gridlines via `d3.axisBottom` and `d3.axisLeft`, and a title, all styled through custom CSS classes.

Bbkopruluoglu3

93% match

Loading thumbnail…

Area Chart Temperature in San Francisco

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It displays temperature in degrees Celsius over time, using a smooth, curved area fill. The visualization is built with D3 v7 and renders as an SVG. Code leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and the `area` generator with `curveBasis` to create the shaded region. Data is loaded as CSV and parsed with timestamps converted to `Date` objects, with axes, labels, and a title included.

AAvisa Poshtkouhi

93% match

Loading thumbnail…

Area Chart

This area chart displays a week of temperature data for San Francisco, with time on the x-axis and temperature on the y-axis, using a smoothed, filled path to convey the trend. The visualization, built with D3 v5 and rendered as SVG, applies a basis curve to the area generator for a fluid line and fills the shape in maroon with transparency. A CSV file provides the data, loaded asynchronously, while axis tick marks extend across the plot for grid-like reference, and both axes are labeled. The title appears at the top, with styling handled via an external stylesheet.

ZZ-Richard

92% match

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

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

92% match

Loading thumbnail…

Area Chart by Davide.js

This area chart visualizes temperature variations in San Francisco over one week, using data from DATA CANVAS: sense your City. The SVG rendering employs D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create a smooth filled path, with axes annotated via `axisLeft` and `axisBottom`. Data is loaded as CSV and parsed into timestamps and numeric temperatures.

DDavideSanto

92% match