Skip to main content
SimilarExport ZIP
100%

Line Plot

✓ Published1🌍 Public
HHollyClarke19
Last edited Mar 23, 2021
Created on Mar 23, 2021
Forked from Working with Time

This line plot visualizes weekly temperature data from the ‘Data Canvas Sense Your City’ dataset, showing temperature readings over time. The chart uses D3 scales (`scaleTime`, `scaleLinear`) and axes components (`AxisBottom`, `AxisLeft`) to map time to the x-axis and temperature to the y-axis. The data is loaded via D3’s `csv` parser and rendered as a smooth curved line using `line()` with `curveNatural`. The visualization is built with React components, renders as SVG, and includes custom styling for ticks, labels, and the path stroke.

AI-generated description

A line plot showing the 'data canvas sense your city' dataset using D3 and React.

MIT Licensed

Similar vizzes

Loading thumbnail…

Linechart

This line chart visualizes weekly temperature measurements from the Data Canvas Sense Your City Dataset, plotting timestamps along the x-axis and temperature values along the y-axis. The SVG rendering uses React components, with d3.scaleTime and d3.scaleLinear mapping data to coordinates, and d3.line with curveNatural producing a smooth path through the points. Axes are rendered via custom React components using d3 ticks, while the Marks component applies a teal stroke to the line. Data is loaded asynchronously from a provided CSV URL using d3.csv.

SSophia Cofone
93% match
Loading thumbnail…

Line Chart

This line chart displays weekly temperature readings from the Data Canvas Sense Your City dataset, plotting timestamp on the x-axis and temperature on the y-axis. The visualization uses React with D3 v7 to create an SVG rendering, employing d3.scaleTime and d3.scaleLinear for axes, and d3.line for the smoothed path with its curveNatural interpolation. Tick marks are rendered through reusable axis components, while the Poppins font styles the labels and axis text.

BBen Seebeck
92% match
Loading thumbnail…

Line Chart w/ d3, react

This line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time. The React component uses d3-scale functions like scaleTime and scaleLinear to map data to SVG coordinates, while d3.line with curveNatural draws the smoothed path. Axis components are custom React elements that render d3 ticks, and the useData hook loads the CSV asynchronously with d3.csv.

Ddata-inside
92% match
Loading thumbnail…

Line Chart

This line chart visualizes temperature measurements from the Data Canvas Sense Your City dataset (week_temperature_sf.csv), plotting temperature over time with a step curve. The chart uses React to render the SVG and d3’s `scaleTime`, `scaleLinear`, and `line().curve(curveStep)` to map data points, while the `AxisBottom` and `AxisLeft` components generate tick marks and labels. The visualization shows a clear stepwise temperature pattern across the week, with axis labels for "Time" and "Temperature," and the data is loaded asynchronously via d3’s `csv` function.

MMartin H. Normark
91% match
Loading thumbnail…

Temperature Line Chart

This line chart visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting temperature against time. The React component uses d3.scaleTime and d3.scaleLinear for axes, with data loaded via d3.csv. A smooth curve, generated by d3.line().curve(curveNatural), connects points, while circles with tooltips provide individual readings. The SVG rendering includes custom AxisBottom and AxisLeft components that map ticks from the scales, and the chart displays time on the x-axis and temperature on the y-axis with labeled axes.

TTatyana Milanova
90% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time. The smooth curve, rendered using d3.line with curveNatural, uses a teal stroke and simple axis ticks without circles. Built with React and d3.scaleTime/scaleLinear, the SVG visualization maps timestamps to x-coordinates and temperatures to y-coordinates, while React hooks manage asynchronous data loading via d3.csv.

Llaplantalaplanta
90% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature data from the Data Canvas Sense Your City dataset, plotting temperature over time with a smooth natural curve. The React-based visualization uses d3-scale for time and linear scales, d3-shape’s line generator with curveNatural, and custom React components for axes. SVG rendering features a clean Poppins font, teal stroke styling, and labeled axes for time and temperature. The data loads asynchronously via d3.csv and displays a loading state until parsed.

SSam
90% match
Loading thumbnail…

Line Chart - from Working with Time

This line chart visualizes temperature readings over one week from the Data Canvas Sense Your City dataset, depicting time on the x-axis and temperature on the y-axis. The SVG visualization, built with React and D3 v5, uses `scaleTime` and `scaleLinear` for axes, and draws the line with `line().curve(curveNatural)` while rendering data points as circles with tooltips showing the timestamp. Styled with the Poppins font and teal marks, the example demonstrates natural curve interpolation for time-series data.

Aarock392
90% match