Fork of Temperature in San Francisco Line Chart

100%

Fork of Temperature in San Francisco Line Chart

✓ Published0🌍 Public

Last edited Mar 13, 2023

Created on Mar 13, 2023

Forked from Temperature in San Francisco Line Chart

This chart displays a week of temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to plot a smooth line on an SVG canvas. Grid lines and labeled axes are styled via CSS, and the data is loaded from a CSV file hosted on GitHub.

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 displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with a `curveBasis` smoother to draw the maroon temperature curve. Data is loaded via `csv` from a remote dataset, and the SVG rendering includes styled axes, tick marks, and a title. The code demonstrates a typical margin-based layout with axis labels and gridlines, sourced from Data Canvas - Sense Your City.

NNoobSaiyan

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization is built with D3.js v5, using `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and `line` with `curveBasis` to draw the smoothed temperature curve. The data originates from the Data Canvas - Sense Your City project and is loaded via a CSV file from vizhub. The SVG rendering includes custom styling for gridlines, axis labels, and a title.

AAustin0524

96% 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 degrees Celsius on the y-axis. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map the data, `axisBottom` and `axisLeft` for labeled axes, and a `line` with `curveBasis` to draw the smoothed temperature path. The data, loaded via `csv` from a dataset on Gray Area’s Data Canvas, is rendered as SVG with styled grid lines, axis labels, and a title.

Nnexus1058

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data points, with d3.line and curveBasis drawing a smooth path. The code leverages d3.axisBottom and d3.axisLeft for labeled axes, and the data originates from Data Canvas - Sense Your City, loaded via d3.csv.

BBlakeMcMurray

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart displays one week of hourly temperature readings in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data, and d3.line with curveBasis to draw a smooth path. Axes are rendered via d3.axisBottom and d3.axisLeft, with gridlines specified through tickSize. Temperature data, sourced from Data Canvas - Sense Your City, is loaded as CSV and parsed into JavaScript Date objects and numbers before being displayed in an SVG container.

SSaip Can Hasbay

96% 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 degrees Celsius on the y-axis, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5 to parse the CSV data, apply time and linear scales, and draw a smoothed curve via `line()` with `curveBasis`. Axis labels and tick marks are generated using `axisBottom` and `axisLeft`, while the SVG rendering includes a maroon path with styled gridlines and text elements.

Iindushashi.g@gmail.com

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

A line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The code uses d3.csv to load the data, then applies d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.line with d3.curveBasis to render a smoothed SVG path. Axis gridlines and labels are added manually, while the title and axis text use custom styling. The data originates from the Data Canvas - Sense Your City project.

SSathishAanand

96% 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 plotted on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data to SVG coordinates, with axes generated via d3.axisBottom and d3.axisLeft. The line path is drawn using d3.line with a curveBasis interpolation, and data is loaded from a CSV file on VizHub. The chart includes labeled axes, a title, and grid lines.

AAnas1108

96% match