Fork of Temperature in San Francisco Line Chart

100%

Fork of Temperature in San Francisco Line Chart

✓ Published0🌍 Public

Last edited Dec 10, 2021

Created on Dec 9, 2021

Forked from Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses a smooth, curved line to connect temperature readings over time, with labeled axes and a title. The chart is rendered as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for scales, `line` with `curveBasis` for the path, and `axisBottom` and `axisLeft` for tick marks. Data is loaded via `csv` and parsed into dates and numeric temperatures.

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.

Made in this video:

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The SVG rendering uses D3 v5 to plot time against temperature, with a smooth curve generated by the `line` and `curveBasis` functions. Styled axes and tick marks are configured via `axisLeft`, `axisBottom`, and CSS classes, while the chart includes labeled axes, a title, and a maroon polyline. The data is loaded as CSV asynchronously, parsed into date and numeric values, and then scaled with `scaleTime` and `scaleLinear` for the x and y dimensions.

Ffrozengem397

98% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart plots temperature in Celsius against time, with a smooth curve connecting the data points. Created with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and `line` with `curveBasis` for the path. Gridlines, axis labels, and a title are rendered as SVG elements within a 960x500 viewport.

AAbdullah Zahid

98% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from the Data Canvas - Sense Your City project. It shows temperature fluctuations over time using a smooth curved line, with labeled axes for time and temperature. The visualization is built with D3 v5, using `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for axes, and the `line` generator with `curveBasis` for the curved path. Data is loaded via `csv` and rendered as SVG elements.

Aanagi2597

98% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

A line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization plots temperature in degrees Celsius over time, using a smoothed basis curve to connect data points. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render the SVG path. The chart includes labeled axes, a titled plot area, and styled grid lines from the tick marks. The data is loaded from a CSV file via `csv` and processed through the `extent` function.

Nnyebbers

98% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate a smooth curved path through the data points. The data comes from the Data Canvas - Sense Your City dataset and is loaded via `d3.csv`, with timestamps parsed as JavaScript `Date` objects. The chart includes labeled axes, gridlines, and a title, all rendered as SVG elements.

Zzihelian

98% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to render an SVG with time-scaled x-axis and linear y-axis, employing `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` smoothing. Gridlines are drawn via tick sizes while axis labels and a title are appended as SVG text elements. Data is loaded from an external CSV and parsed for temperature and timestamp values.

PPeter Prevos

98% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. It displays temperature values over time, with the area beneath the line filled to emphasize the temperature curve. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `area`, and `curveBasis` to render the SVG chart. Axes are labeled and styled via CSS, while data is loaded as CSV and parsed with timestamps converted to Date objects.

IIliJa Ryzhov

98% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime and d3.scaleLinear to map timestamps and temperatures, with d3.line and the curveBasis curve smoothing the path. It renders as an SVG with gridlines from axis ticks, axis labels, and a centered title. The code parses CSV data, converts temperature to numbers and timestamps to Date objects, then draws the chart using d3.axisBottom and d3.axisLeft.

Aaidatabaeva

98% match