Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited Oct 7, 2022

Created on Oct 7, 2022

This is a fork of a D3.js line chart that visualizes temperature measurements over time, depicting a week of San Francisco weather data from the Data Canvas Sense Your City dataset. The visualization uses a time-scaled x-axis and a linear y-axis for temperature. The chart is built with React and uses D3's `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to create a smooth path, rendered as SVG.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Working with Time

This fork visualizes a week of San Francisco temperature readings from the Data Canvas Sense Your City Dataset as a scatter plot. Time runs along the horizontal axis with temperature on the vertical axis, rendered as SVG circles using React components. The code employs d3.csv for data loading, d3.scaleTime and d3.scaleLinear for scales, and d3.extent for domain calculation. Native SVG title elements provide hover tooltips, while custom AxisBottom and AxisLeft React components generate the tick marks and labels.

Llatifiss

95% match

Loading thumbnail…

Fork of Working with Time

A fork of the "Working with Time" example visualizes temperature over time as a scatter plot with a smooth line connecting points. The chart plots time on the x-axis and temperature on the y-axis, using a dataset from Data Canvas Sense Your City (week temperature data for San Francisco). Built with React and D3 v5, it leverages D3 scales (`scaleTime`, `scaleLinear`), the `line` and `curveNatural` path generators, and `csv` for data loading. The SVG rendering includes interactive circle tooltips via a `<title>` element.

RRod* Wilhelmy

95% match

Loading thumbnail…

Fork of Working with Time

This fork of the Working with Time example displays a San Francisco temperature time series as a smooth curved line chart in SVG. The visualization uses React components for axes and marks, with D3 scales (scaleTime, scaleLinear) and the curveNatural line generator to render the data path. The data comes from the Data Canvas Sense Your City Dataset’s weekly temperature measurements, loaded via d3.csv.

EEugenio2192

94% match

Loading thumbnail…

Fork of Working with Time

A line chart plots San Francisco temperature readings over a week, using a natural curve to connect daily data points from the Data Canvas Sense Your City dataset. The React app loads CSV data with d3.csv, maps timestamps with `scaleTime`, and maps temperature values with `scaleLinear`. SVG rendering uses React components for axes and marks, while d3's `line` generator with `curveNatural` draws the path, and native SVG `<title>` elements provide tooltips.

PPratik Raja

94% match

Loading thumbnail…

Fork of Working with Time

This fork of a working-time example plots temperature against time for one week in San Francisco, using data from Data Canvas Sense Your City. A scatter plot displays each temperature reading as a circle, with time on the horizontal axis and temperature on the vertical axis. Built with React and D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to SVG coordinates, while `d3.csv` loads the dataset from a remote URL. Axes are rendered as custom React components, with time-formatted tick labels and an SVG `<title>` element for tooltips.

WWilliam Cheung

94% match

Loading thumbnail…

Fork of Working with time

This fork of "Working with time" displays a temperature-over-time scatterplot for a week in San Francisco, with daily timestamps on the x-axis and temperature on the y-axis. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear for scaling, d3.line with curveNatural for the trend path, and d3.csv for data loading. Axis components from d3.axis are manually recreated as functional React components, while circles with title tooltips highlight each data point.

LLawrence Liu

93% match

Loading thumbnail…

Fork of Working with Time

A line chart tracks San Francisco temperature readings over one week, with time on the x-axis and degrees on the y-axis. The visualization uses React components to render SVG axes and a d3.line path from the Data Canvas Sense Your City dataset. d3.scaleTime, d3.scaleLinear, and d3.extent handle scaling and domain computation, while d3.timeFormat labels weekdays.

SSan

93% match

Loading thumbnail…

Fork of Fork of Working with time

This fork of Curran’s working-with-time example visualizes a week of San Francisco temperature readings from the Data Canvas Sense Your City dataset. The vertical axis shows temperature in degrees, while the horizontal time axis is formatted by day of the week. React renders SVG marks and axes, with d3.scaleTime and d3.scaleLinear mapping the data, d3.line with curveNatural drawing the smooth path, and d3.csv loading the remote CSV file.

TtrwMK

93% match