Skip to main content
SimilarExport ZIP
100%

Line Chart - from Working with Time

✓ Published0🌍 Public
Aarock392
Last edited Dec 24, 2019
Created on Dec 24, 2019

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.

AI-generated description

Learning to Make a Line Chart - A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart - from Working with Time

This line chart displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The React-based visualization renders as an SVG, using d3.scaleTime and d3.scaleLinear to map data from the Data Canvas Sense Your City dataset. A path generated with d3.line and curveNatural connects the points, while circle elements provide tooltips via the title tag. Axes are built programmatically using d3.timeFormat and custom React components for bottom and left ticks.

Ssophburke
95% match
Loading thumbnail…

Working with Time

A line chart shows temperature readings over one week from the Data Canvas Sense Your City dataset. The visualization uses D3 v7 scales and axes to map time on the x-axis and temperature on the y-axis, with a smooth curve generated by `d3.line` and `curveNatural`. Rendered as SVG in a React application, the chart includes custom axis components and labeled axes.

TThomas Cormican
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…

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
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
92% match
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature trends over a week using data from the Data Canvas Sense Your City dataset. A smooth, natural curve connects the temperature measurements, with teal styling and a clean Poppins font. The visualization is built with React and D3 v5, using `scaleTime` for the time axis, `scaleLinear` for the temperature axis, and `curveNatural` for path interpolation. The SVG rendering includes custom axis components and reusable marks that draw the line path with round stroke caps and joins.

CChika
91% match
Loading thumbnail…

Stylized Line Chart

This chart displays temperature readings over time from the Data Canvas Sense Your City dataset, showing weekly variations in a smooth, stylized line. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, with `line()` and `curveNatural` for a curved path. The chart features labeled axes, a Poppins font, and teal color accents, rendering as pure SVG without interactive elements.

RRaincal
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
91% match