Fork of Working with Time

100%

Fork of Working with Time

✓ Published0🌍 Public

Last edited Jun 14, 2022

Created on Jun 14, 2022

This fork of Working with Time visualizes a week of temperature readings from the Data Canvas Sense Your City dataset, plotting timestamps against temperature values. The visualization uses SVG rendering with React components, while relying on D3 v5’s scaleTime, scaleLinear, extent, and timeFormat APIs to construct axes and map data points. The scatter plot marks are defined but not rendered in the current code, leaving the chart primarily to display axes and labels. Data loads asynchronously from the provided CSV via d3.csv.

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 of “Working with Time” visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a time-series scatter plot. Using React with D3 v5, it renders SVG circles positioned via d3.scaleTime and d3.scaleLinear on axes generated with custom tick components, while d3.csv loads and parses the timestamp and temperature values. The y-axis label is rotated via SVG transforms, and each circle includes a native `<title>` tooltip formatted with d3.timeFormat.

Jjudietrich

95% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes weekly temperature readings from the Data Canvas Sense Your City dataset, plotting temperature over time using React and D3 v5. It renders SVG circles positioned by `d3.scaleTime` and `d3.scaleLinear`, with axis components generated through the D3 `ticks()` method. The chart includes a `<title>` tooltip showing abbreviated weekday labels via `timeFormat`, and loading states display a "Loading..." message while `d3.csv` fetches the data.

AAbin

93% match

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

93% match

Loading thumbnail…

Fork of Working with Time

A fork of Curran Kelleher's "Working with Time" example, this scatter plot visualizes temperature readings over one week from the Data Canvas Sense Your City Dataset. The React application uses D3 v5 scales (`scaleTime` and `scaleLinear`) and React components for axes and marks, rendering SVG circles with a `title` element for tooltips. The data is loaded asynchronously via `csv()` from a GitHub gist, with time formatted using `timeFormat('%a')` for weekday labels on the bottom axis.

GGregS1290

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

93% match

Loading thumbnail…

Fork of Working with Time

A fork of the Working with Time example, this visualization renders a scatter plot of the Data Canvas Sense Your City temperature dataset as a time series. Using React with D3 v5, the code employs `scaleTime` and `scaleLinear` to map timestamps and temperatures to SVG coordinates, with `AxisBottom`, `AxisLeft`, and `Marks` components drawing axes and data points. A CSV loaded via `d3.csv` provides the data, and each circle includes a `<title>` tooltip formatted with `timeFormat`. The visualization presents weekly temperature readings across the x-axis and temperature values on the y-axis.

IIrene-zou

93% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, showing the fluctuation of weekly temperatures. The visualization uses React with D3 v5 scales, including `scaleTime` and `scaleLinear`, to map data points as circles on an SVG canvas. Axes are rendered via custom React components, with `timeFormat` for date labels and a native SVG `<title>` element for hover tooltips. Data is loaded asynchronously using D3's `csv` method and processed through useState and useEffect hooks.

Aalitemel89

93% match

Loading thumbnail…

Fork of Working with Time

This example visualizes weekly temperature readings from the Data Canvas Sense Your City dataset as a scatter plot, with time on the x-axis and temperature on the y-axis. The plot is rendered as SVG, with each data point drawn as a circle using React components that generate `circle` elements. The code leverages `d3.scaleTime` and `d3.scaleLinear` for axis scaling, `d3.timeFormat` for tick labels, and `d3.csv` to load the data from a remote URL. A `d3.zoom` call is included, though its behavior is not fully implemented in the displayed code.

MMetalquill

93% match