Fork of Line_Stroke_Death

100%

Fork of Line_Stroke_Death

✓ Published0🌍 Public

Last edited Mar 29, 2023

Created on Mar 29, 2023

This fork of Line_Stroke_Death displays one week of San Francisco temperature data in Celsius as a smooth orange line chart, with month on the x-axis and users on the y-axis. The visualization uses d3.scaleLinear for both axes, d3.line with curveBasis for the path, and d3.axisBottom and d3.axisLeft for tick marks. Data is loaded as CSV from a GitHub gist, styled with an orange stroke and thick line width, and rendered as SVG in a 960x500 viewport.

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 Line_Stroke_Death

This line chart displays temperature data for San Francisco over one week, sourced from Data Canvas - Sense Your City. It plots monthly usage values on both axes, with an orange curved line connecting data points. The visualization uses D3 v5’s scaleLinear, scaleTime, axisBottom, axisLeft, and line generator with curveBasis. SVG elements render the chart, including gridlines via tickSize, axis labels, and a title. Data is loaded from a CSV file using d3.csv.

SSUSHMA CHIRRA

93% match

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

88% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This visualization displays a week of temperature data in San Francisco as a smooth red line chart, with time on the x-axis and degrees Celsius on the y-axis. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the SVG path. Data is loaded via `csv` from a remote dataset, with circles and grid lines styled through CSS. The chart includes labeled axes and a title, rendered entirely in SVG.

KKonyk Myroslav

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

87% match

Loading thumbnail…

Fork of Temperature in San Francisco Line Chart

This fork of a Data Canvas project visualizes one week of temperature data in San Francisco as a smooth line chart. The SVG rendering is built with d3.v5, using `scaleTime` and `scaleLinear` for the axes and a `line` generator with `curveBasis` for the smoothed temperature path. Data is loaded from a CSV file via VizHub, with timestamps converted to `Date` objects and temperatures to numbers. Grid lines, axis labels, and a title are drawn using standard D3 axis and text primitives, all styled with the accompanying CSS.

Pprojectcybersyn2

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

87% match

Loading thumbnail…

Fork of Linechart

This linechart displays one week of temperature data in San Francisco, using a smooth curved line to connect readings over time. The visualization relies on D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis`, rendering to SVG. Data originates from the Data Canvas - Sense Your City project, loaded via `d3.csv` from a GitHub gist, though the temperature values remain as unparsed strings in the current code.

PPiotr Paszek

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

87% match