Tempature Linechart/

100%

Tempature Linechart/

✓ Published1🌍 Public

Last edited Nov 3, 2020

Created on Nov 3, 2020

This line chart shows one week of temperature in degrees Celsius in San Francisco, sourced from Data Canvas - Sense Your City. D3's `scaleTime` and `scaleLinear` map time and temperature values to the SVG canvas, with `axisBottom` and `axisLeft` generating the axes and gridlines. The data is loaded via `csv` and rendered as a smoothed path using `line` with `curveBasis`, drawn in hot pink with a 5-pixel stroke. The graph title and axis labels are added as SVG text elements.

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.

Code learned from Curran: Curran — Intro to datavisualisation.

MIT Licensed

Similar vizzes

Loading thumbnail…

Temp 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 plots temperature in degrees Celsius over time, with a smooth curve connecting the data points. Built using d3.v5, the code employs `d3.scaleLinear`, `d3.scaleTime`, `d3.axisLeft`, and `d3.axisBottom` to construct the axes, while `d3.line` with `d3.curveBasis` generates the smoothed path. The SVG rendering includes axis labels, grid lines, and a title, with data loaded from a CSV file.

IIan Russell

94% match

Loading thumbnail…

Temperature San. Fran. line chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from the Data Canvas - sense your city initiative. The visualization captures temperature fluctuations over time using a smooth, curved line rendered as an SVG path. Built with D3 v7, it uses `scaleTime` and `scaleLinear` for axes, `d3.line` with `curveBasis` for the path, and `axisBottom` and `axisLeft` for tick marks and labels. The chart includes a title, axis labels, and styled grid lines, with data loaded asynchronously from a CSV file.

RRobindj2000

93% match

Loading thumbnail…

Line Chart

This line chart displays one week of temperature (in Celsius) in San Francisco using data from Data Canvas - Sense Your City. The D3 v5 code loads the CSV dataset and maps timestamps to a time scale and temperatures to a linear scale, rendering the smoothed line with a curveBasis generator. SVG axes are customized via axisBottom and axisLeft, with labels and a title added to the visualization.

Ddangquangt

93% match

Loading thumbnail…

Temperature in SF Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City project. The visualization uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render a smooth path, while gridlines, axis labels, and a title are added via SVG elements. The data is loaded from a CSV file using `csv`, and each timestamp is parsed into a `Date` object before rendering.

BbeauMarko

93% match

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature in degrees Celsius for San Francisco, sourced from the Data Canvas - Sense Your City project. It uses D3 v5 to load CSV data, then applies `scaleTime` and `scaleLinear` to map timestamps and temperature values to SVG coordinates. An `axisBottom` and `axisLeft` render labeled axes with grid lines, while a curved line path, generated via `line` with `curveBasis`, traces temperature trends. The chart includes a title and axis labels, with styling applied through external CSS.

Llystran

93% match

Loading thumbnail…

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 v5 to render an SVG with a time-scaled x-axis and linear temperature scale, with data loaded via `csv`. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with `curveBasis` to produce a smooth maroon path, complete with labeled axes and a title.

Lluiz0518

93% match

Loading thumbnail…

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 a smooth curve tracking readings over time. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the path. Grid lines and labeled axes for time and temperature support the visualization, while the data is loaded via `d3.csv` and parsed into JavaScript `Date` objects.

Ccodiechanel

93% match

Loading thumbnail…

Temp in SF Line Chart

This line chart visualizes the temperature in San Francisco over a week, plotting time on the x-axis and temperature on the y-axis with a smooth, curved path and semi-transparent circular markers for each data point. The chart includes labeled axes and a title, rendered in an SVG using D3 v5. The code imports specific D3 modules including `scaleTime`, `scaleLinear`, `line`, `curveBasis`, and `axisBottom`/`axisLeft` to construct the scales and axes. Data is loaded from the Data Canvas - Sense Your City dataset via `csv()`, with timestamps parsed as dates and temperatures as numbers.

AAngus Hon

93% match