clinos2

100%

✓ Published0🌍 Public

Last edited Mar 1, 2021

Created on Mar 1, 2021

A temperature time-series scatter plot for San Francisco week data from the Data Canvas Sense Your City Dataset, rendered as an SVG with React and D3 v5. The line chart connects daily temperature readings, with labeled circles showing exact values and hover-based tooltips revealing timestamps. The visualization uses `scaleTime` and `scaleLinear` for axes, `curveNatural` for the line path, and React state management for interactive tooltip positioning.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

clinios Stylized Line Chart

This stylized line chart visualizes San Francisco weekly temperature data from the Data Canvas Sense Your City dataset, showing temperature trends over time. The visualization uses a natural curve interpolation to connect data points, with circles colored teal for temperatures below 22 degrees and red for those above. Built with React and D3 v5, it employs scaleTime and scaleLinear for axes, while the svg rendering includes custom axis components that highlight specific tick values with gridlines.

TTawhid Abdullah

91% match

Loading thumbnail…

Untitled

This visualization displays the temperature of San Francisco over a week, using data from the Data Canvas Sense Your City dataset. A smooth, natural curve connects the data points, showing temperature trends over time on a scatter plot-like chart. Built with React and rendered as an SVG, the code uses d3’s `scaleTime`, `scaleLinear`, `extent`, `timeFormat`, and `line` with `curveNatural` to map timestamps and temperatures. Axes are generated via `AxisBottom` and `AxisLeft`, with a labeled time axis on the x-axis and temperature on the y-axis.

BBhawna Agarwal

86% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time for a week in San Francisco, using data from the Data Canvas Sense Your City dataset. The visualization combines a smooth natural curve for the line path and circular markers with tooltips for each data point. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` for the path, and renders as SVG. The chart features a Poppins font, teal color scheme, and custom axis styling.

Ttsys45gh

85% match

Loading thumbnail…

data canvas sense your city

This visualization displays temperature trends over a week in San Francisco using a line chart rendered with SVG. The React app loads CSV data via D3's `csv` parser, then uses `scaleTime` and `scaleLinear` to map timestamps to x-coordinates and temperatures to y-coordinates. The line path is generated with D3's `line` and `curveNatural`, while custom `AxisBottom` and `AxisLeft` components render ticks and gridlines. Circles with tooltips mark individual data points. The chart demonstrates integrating D3 scales, axes, and shapes within a React component structure.

GGuitong Li

85% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature variations in San Francisco using the Data Canvas Sense Your City dataset. The chart displays a smooth, natural curve connecting temperature readings over time, with small circular markers positioned at each data point. Built with React and D3 v5, it uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveNatural for the path, and d3.csv for data loading. The minimalist design features a teal color scheme, Poppins typography, and native SVG rendering with hover tooltips showing formatted dates.

Jjuanmy400

85% match

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature over time for San Francisco, plotted from the Data Canvas Sense Your City dataset. A smooth, natural curve connects weekend temperature readings, with the time axis formatted to show weekday abbreviations. Built with React and D3 v5, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveNatural` to render the path. The SVG output includes styled tick marks, axis labels, and a teal stroke, while the code includes commented-out circular markers and tooltips for potential interactivity.

Ddmljc

85% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature data from San Francisco, sourced from the Data Canvas Sense Your City dataset. The visualization uses React to render SVG elements, with D3’s `scaleTime` and `scaleLinear` mapping timestamps to positions along the axes. A smooth curve is drawn using D3’s `line()` generator with `curveNatural` interpolation, styled with a teal stroke. The chart includes labeled axes for time and temperature, with tick marks formatted using `timeFormat`.

JJun Suzuki

84% match

Loading thumbnail…

Stylized Line Chart

This line chart visualizes temperature readings from San Francisco’s week in the Data Canvas Sense Your City dataset, with time on the x-axis and temperature on the y-axis. The data loads asynchronously via d3.csv, while React (with hooks) manages rendering of SVG elements. d3.scaleTime, d3.scaleLinear, and d3.extent set the scales, and d3.line with curveNatural draws a smooth, stylized teal path. Axis ticks and labels are generated by custom React components, with d3.timeFormat for abbreviated day labels and Poppins font styling.

Rrshormazabal

84% match