Skip to main content
SimilarExport ZIP
100%

11.c - sanfran temp area chart - dataviz 2018

✓ Published1🌍 Public
Zzach b.
Last edited Nov 23, 2021
Created on Nov 23, 2021

A week of San Francisco temperatures appears as a smooth blue area chart with a black line overlay and maroon points marking each reading. The chart uses a time-based x-axis and a linear y-axis for degrees Celsius. Built with D3 v7, it employs `scaleTime`, `scaleLinear`, `d3.line`, `d3.area`, and `curveBasis` for smoothing. Data is loaded via `d3.csv` from a VizHub-hosted CSV. SVG rendering includes gridlines, axis labels, and a title, with styling handled through CSS classes.

AI-generated description

datraviz 2018 #11.c - temp over time - area chart

-- This [area] 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…

11.b - sanfran temp line chart - dataviz 2018

This line chart displays one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v7 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and circles for individual data points. The chart includes custom margins, gridlines via `tickSize`, and clear axis labels, with styling applied through external CSS.

Zzach b.
92% match
Loading thumbnail…

Temperature San. Fran. area chart

This visualization displays a week of temperature readings in San Francisco using a smooth area chart. The chart plots time on the x-axis and temperature in Celsius on the y-axis, with the area between the line and baseline filled in royal blue. The code loads CSV data from Data Canvas and renders it as SVG using D3 v7 APIs, including d3.area with curveBasis, scaleTime, scaleLinear, and axisBottom/axisLeft. The axes include gridlines and rotated axis labels, with a title positioned above the plot area.

RRobindj2000
91% match
Loading thumbnail…

Temperatures in San Fransisco Area Chart

A week of temperature readings from San Francisco appears as a smooth, maroon area chart, with a time-based x-axis and a linear temperature y-axis in degrees Celsius. The visualization uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create the filled path. Data is loaded from a CSV file via the `csv` method, with axes and labels styled using custom CSS. The chart displays the temperature trend over the week with a clear title and grid lines.

SSimon Pettersson
91% match
Loading thumbnail…

San Francisco Temperatures Area Chart

This area chart visualizes San Francisco temperatures over a week, using a smooth basis curve to fill the region beneath the temperature line. The chart displays time on the x-axis and temperature on the y-axis, with grid lines and labeled axes. The code uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis`, drawing to an SVG canvas. Data is loaded from a CSV file hosted on VizHub, with timestamps parsed as dates and temperatures as numbers.

Hhirokat
91% match
Loading thumbnail…

Temp in San Francisco Area Chart

This area chart displays a week of temperature data in San Francisco, using a smooth, curved line to trace the changing values over time. The visualization encodes time on the x-axis and temperature in Celsius on the y-axis, with axis gridlines and labeled ticks providing context. Built with D3 v5, the code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and a `d3.area` generator with `d3.curveBasis` to render the path. The data comes from the Data Canvas - Sense Your City dataset, loaded via CSV.

IIan Russell
91% match
Loading thumbnail…

Temperature in Sanfrancisco Area Chart

This area chart visualizes a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a smooth curved area fill in maroon, with axis labels titled "Time" and "Temperature." Built with D3 v5, the code employs `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.area` with `curveBasis` to generate the SVG path. Data is parsed from a CSV hosted on VizHub, with axes and gridlines rendered via `d3.axisBottom` and `d3.axisLeft`.

AAbhishek Chandarana
91% match
Loading thumbnail…

Temp in San Fran Area Chart

This area chart displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis, using a smooth curve to connect the data points. The visualization pulls data from a CSV file hosted on VizHub and renders it as an SVG using D3 v5’s `area` generator with `curveBasis` for the smooth line. It employs `scaleTime` for the temporal axis, `scaleLinear` for temperature, and includes gridlines via custom axis ticks. Axis labels and a title are added as SVG text elements.

Jjlongwellchc
90% match
Loading thumbnail…

10_Temp in San Fran Area chart

This area chart shows a week of temperature readings in San Francisco, with the maroon-filled area under a basis spline curve revealing the overall trend over time. The chart uses `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.area` with `d3.curveBasis` to generate the smooth filled path, and `d3.scalePoint` for the overlaid semi-transparent blue circles marking each data point. The data is loaded from a CSV file, with timestamps parsed as dates and temperatures as numbers.

FFMajid-ops
90% match