Fork of SF AreaChart

100%

Fork of SF AreaChart

✓ Published0🌍 Public

Last edited Jul 3, 2022

Created on Jul 3, 2022

This fork shows a week of San Francisco temperatures as a filled area chart over time. The chart renders an SVG path using `d3.area` with a `curveBasis` smoothing, while `d3.scaleTime` and `d3.scaleLinear` map timestamps and temperatures to axes. Axis labels and gridlines are drawn with `d3.axisBottom` and `d3.axisLeft`. Data loads from a remote CSV containing hourly temperature readings, parsed with `d3.csv` into `Date` and numeric values.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of line chart

This fork of a line chart displays temperature readings for San Francisco over time, using an area path rendered by `d3.area` with a `curveBasis` to smooth the line. The visualization employs `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Data loads from a CSV file via `d3.csv`, parsing timestamps and numeric temperatures. The chart includes labeled axes, a title, and grid lines styled with CSS within an SVG canvas.

Ttheaddies

91% match

Loading thumbnail…

Fork of Temperature in San Francisco

This example visualizes a week of temperature readings in San Francisco using an area chart that fills the space between a curve and the baseline. The chart includes labeled axes for time and temperature, with gridlines and a title. The code uses D3 v7’s `csv` loader to fetch the dataset, `scaleTime` and `scaleLinear` for scales, `axisBottom` and `axisLeft` for axes, and the `area` generator with `curveBasis` to create the smooth filled path rendered as SVG.

Ggharakhani1986

91% match

Loading thumbnail…

Fork of Temperature in San Francisco Area Chart

This visualization presents a week of temperature data in San Francisco as an area chart, using a maroon filled path to emphasize the variation in degrees Celsius over time. It employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` to render the SVG. The data is loaded from a CSV via `d3.csv` and parsed into date and numeric values. The chart includes labeled axes and a title, with grid lines and a smooth curve connecting the temperature readings.

DDanier

91% match

Loading thumbnail…

Fork of A Week in San Francisco Area Chart

A smooth maroon area chart displays San Francisco temperature trends over time, with the x-axis labeled "Time" and the y-axis labeled "Temperature." The visualization loads CSV data from a Gist URL, parsing timestamps and numeric temperatures. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to render an SVG path with gridlines and axis labels. The chart is a follow-along project from a D3 course.

Aayodhyanandh

91% match

Loading thumbnail…

Fork of Area Chart

This area chart visualizes temperature over time for San Francisco, using a smooth curve to show the trend with overlaid scatter points. The visualization loads CSV data via `d3.csv` and renders using D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The `d3.area` generator with `curveBasis` creates the filled path, while individual temperature readings appear as semi-transparent circles. The SVG output includes labeled axes, a title, and gridlines, with styling applied via CSS classes.

Cceresfin

91% match

Loading thumbnail…

Fork of SF temp area chart

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart displays temperature in degrees Celsius over time, with a maroon-filled area beneath a line path. The code uses D3 v5's `area` generator with `curveBasis` for smooth rendering, alongside `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` for axes. SVG output is styled with CSS, including large tick labels and an axis label rotated -90 degrees. Data is loaded as CSV and parsed into timestamps and numeric temperatures before rendering.

Wwieswies

91% match

Loading thumbnail…

Fork of Fork of Temperature in San Francisco Area Chart

This area chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a maroon filled area beneath a curved line to emphasize the temperature trend across the week. Built with D3 v7, it employs `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis` to generate the smooth path, while `d3.axisBottom` and `d3.axisLeft` render the labeled axes. Data is loaded as CSV from an external URL.

Ggharakhani1986

90% match

Loading thumbnail…

Fork of Temperatures in San Francisco AreaChart

This visualization shows a week of temperature readings in San Francisco as a filled area chart. The area spans from the baseline to the temperature values over time, using D3 v6’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create the smooth shaded shape. The SVG rendering includes axis labels, a title, and grid lines via `axisBottom` and `axisLeft`. Data is loaded from a CSV file hosted on VizHub, with timestamps converted to JavaScript `Date` objects and temperatures parsed as numbers.

Aannadehtiarova

90% match