Fork of Temperature in San Francisco Line Chart

100%

Fork of Temperature in San Francisco Line Chart

✓ Published0🌍 Public

Last edited Jan 21, 2021

Created on Jan 21, 2021

Forked from Temperature in San Francisco Line Chart

This fork of a D3.js line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas. It plots temperature values over time on SVG-rendered axes, using `scaleTime` and `scaleLinear` for scaling, with `axisBottom` and `axisLeft` for tick marks. The line is drawn with a `line` generator and a basis curve, styled as a maroon path. The chart includes labeled axes and a title, all rendered via the d3.v5 library.

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork displays a week of temperature data for San Francisco as a smooth line chart, from a Data Canvas dataset. D3 v5’s `scaleTime` and `scaleLinear` map timestamps and temperatures to SVG coordinates, while `axisBottom` and `axisLeft` render labeled grid axes. The `line` generator with `curveBasis` draws the curved path, and the SVG titling and styling come from appended text elements and CSS classes.

Vvk

97% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork of the D3.js example visualizes one week of temperature data for San Francisco using a line chart. The chart plots temperature on the y-axis against time on the x-axis, with data loaded from a CSV file containing timestamp and temperature values. The code leverages D3 v5 APIs including `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with `curveBasis`, rendering the result as SVG elements. Axis labels and a title are added using SVG text elements, while CSS styles define the appearance of the maroon line and tick marks.

DDevyn Chew

97% 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. It renders as an SVG using D3 v5, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator with `curveBasis` for the smoothed path. The chart includes labeled axes, a title, and styled tick lines and text via CSS.

BBurg

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. 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

96% 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 the Data Canvas - Sense Your City dataset. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and a `line` generator with `curveBasis` to smooth the temperature curve. Circles mark individual data points. The chart includes labeled axes for time and temperature, a title, and a styled maroon path with gridlines, all composed within a fixed-width SVG canvas.

Eetiosa

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 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

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. 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

96% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork of a 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 over time, with each timestamp converted to a `Date` object and temperature parsed as a number. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleTime`, `axisLeft`, `axisBottom`, and `line` with a basis curve for smoothing. A maroon line path represents the data, set against a light gray grid with labeled axes and a title, all rendered as SVG.

JJonas Wilz

96% match