Skip to main content
SimilarExport ZIP
100%

Fork of Temperature in San Francisco Line Chart

✓ Published0🌍 Public
DDevyn Chew
Last edited Nov 8, 2022
Created on Nov 8, 2022

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.

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

SSeongwoo Choi
97% 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 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 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
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 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
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart visualizes a week of temperature data in San Francisco, plotting temperature values against time. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` to render a smooth SVG path. The data is sourced from Data Canvas - Sense Your City, though the code substitutes hash rate values from a local dataset instead of the temperature CSV. The chart includes labeled axes, grid lines, and a title, with styling applied via CSS classes.

DDaniel Cruz
95% match
Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This line chart shows temperature readings across one week in San Francisco, with time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file and rendered as a smooth curved line using D3 v5’s `line` generator with `curveBasis`. Axes are created with `axisBottom` and `axisLeft`, while scales use `scaleTime` and `scaleLinear`. The SVG output includes labeled axes, a title, and a maroon stroke for the line path.

Bbbroker
95% match
Loading thumbnail…

Fork of Temperature in San Fransisco Line Chart

A fork of the Temperature in San Francisco Line Chart displays a single week of temperature readings in San Francisco, plotted over time. The visualization uses a smooth curve to connect data points, with axis labels and gridlines rendered via SVG. The code leverages d3.scaleTime and d3.scaleLinear for the scales, d3.axisBottom and d3.axisLeft for the axes, and a d3.line generator with a curveBasis interpolator for the path. Data is loaded from a CSV file using d3.csv, with timestamps parsed and temperatures converted to numbers.

VVinceVerspeek
95% match