Skip to main content
SimilarExport ZIP
100%

Fork of Temperature in San Francisco Line Chart

✓ Published0🌍 Public
Jjwadhwa6
Last edited Feb 21, 2022
Created on Feb 21, 2022

This line chart displays one week of temperature data in degrees Celsius for multiple cities, sourced from the Data Canvas - Sense Your City dataset. It plots time on the x-axis and temperature on the y-axis, with each city’s series drawn as a distinct colored path using D3’s `line` generator with a basis curve. The code uses `d3.csv`, `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `nest` to structure the data, while axes and labels are rendered via `axisBottom` and `axisLeft`. The visualization is rendered as an SVG, with each city color-coded through the `schemeCategory10` palette.

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, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth, maroon path. SVG rendering displays grid lines, tick labels, and axis labels, while the code loads data via D3's `csv` function and styles the chart with CSS for fonts and colors.

Jjwadh
96% 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, with time on the x-axis and temperature in Celsius on the y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth, maroon path. SVG rendering displays grid lines, tick labels, and axis labels, while the code loads data via D3's `csv` function and styles the chart with CSS for fonts and colors.

Jjwadh
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, using data from the Data Canvas - Sense Your City project. The visualization plots temperature over time with a smooth curve, rendered as an SVG. The code employs D3 v5 APIs including `d3.csv` for loading the dataset, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with `curveBasis` for the path. Axis labels and a title are appended as text elements.

Aanagi2597
95% 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 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
95% 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, with time on the x-axis and degrees Celsius on the y-axis. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to draw a smooth maroon path. Grid lines are generated via tick sizes, and axis labels and a title are added as SVG text. The code loads CSV data asynchronously and converts timestamps to `Date` objects before rendering.

Bbillmccabeusa@hotmail.com
95% 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 degrees Celsius against time, using a smooth curve generated with the `d3.line` and `curveBasis` APIs. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while scales are created using `d3.scaleTime` and `d3.scaleLinear`. The SVG rendering includes styled grid lines, axis labels, and a title, with data loaded via `d3.csv`.

YYasara Peiris
95% 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
95% 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, with time on the x-axis and temperature in degrees Celsius on the y-axis. The D3.js v5 code uses `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for gridlines and ticks. Data is parsed from a CSV file, rendered as an SVG, and styled with maroon strokes and custom fonts. The chart includes a title and axis labels, presenting a clean, minimal aesthetic.

Ddeep221b
95% match