Working with Time

100%

Working with Time

✓ Published1🌍 Public

Last edited Mar 22, 2021

Created on Mar 22, 2021

This scatterplot shows temperature readings from the "data canvas sense your city" dataset over a one-week period in San Francisco. The visualization uses D3 v6 scales (`scaleTime` and `scaleLinear`) to map timestamps and temperatures to SVG circle positions, with axes rendered as custom React components (AxisBottom, AxisLeft). The code loads CSV data via `d3.csv`, formats time ticks with `timeFormat('%a')`, and includes native SVG `<title>` elements as tooltips showing each point's day.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Working with Time

A scatter plot displays San Francisco temperature readings over one week, with time on the x-axis and temperature on the y-axis. Each point represents a measurement, and hovering reveals the exact day via a tooltip. The visualization uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear for scaling, d3.extent for domain calculation, and d3.csv for loading the Data Canvas Sense Your City dataset. Custom axis components generate ticks and labels, while circular marks encode the data points.

TTrustPaul

95% match

Loading thumbnail…

Working with Time

This example visualizes a week of temperature readings in San Francisco as a scatter plot, with time on the x-axis and temperature on the y-axis. Each circle represents a single measurement, and hovering reveals the exact timestamp. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data to SVG coordinates, while custom `AxisBottom` and `AxisLeft` components render the ticks. The code loads data from a CSV file containing the "Data Canvas Sense Your City" dataset and formats the time axis using `timeFormat("%a")` for day abbreviations.

RRajat Dangat

94% match

Loading thumbnail…

Working with time

A scatter plot shows temperature readings over time for San Francisco, with each circle representing a daily measurement. The x-axis displays weekdays using a time scale, while the y-axis maps temperature values on a linear scale. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `extent` to set domains, with custom axis components rendering SVG ticks and labels. Data loads asynchronously via the `csv` function from Data Canvas Sense Your City.

TtrwMK

94% match

Loading thumbnail…

Working With Time

This interactive scatterplot visualizes San Francisco’s temperature readings over one week, with time on the x-axis and temperature on the y-axis. Using D3 v5 scales (`scaleTime` and `scaleLinear`) and React, the chart renders SVG circles for each data point via the `Marks` component, while `AxisBottom` and `AxisLeft` generate tick marks and labels. The data comes from a CSV file loaded asynchronously with `d3.csv`, and hovering over a circle shows its exact time via a native SVG `<title>` tooltip.

Aaakarsh satyam

94% match

Loading thumbnail…

Working with Time

This scatter plot shows San Francisco temperature readings over a week, with time on the x-axis and temperature on the y-axis. Each circle represents a single hourly measurement, with a native SVG `<title>` element providing a tooltip on hover. The visualization uses React to render SVG elements, with D3's `scaleTime`, `scaleLinear`, and `extent` functions handling the scales and domains. Data is loaded asynchronously from a CSV file via the `d3.csv` method, and custom React components for the axes and marks keep the code modular.

Vvangenned

94% match

Loading thumbnail…

Fork of Working with Time

This scatter plot visualizes temperature over time using the Data Canvas Sense Your City dataset, showing daily temperature readings across a week in San Francisco. The visualization uses D3 v5's scaleTime and scaleLinear to map timestamps to the x-axis and temperatures to the y-axis, with React 16 rendering the SVG output. Each data point is drawn as a circle with tooltip support via the SVG title element, while the left and bottom axes are generated programmatically through the custom AxisLeft and AxisBottom components. The code loads CSV data asynchronously using d3.csv and formats time labels with d3.timeFormat.

Ggreghowe79

93% match

Loading thumbnail…

Working with Time

This example visualizes temperature readings from the San Francisco Data Canvas Sense Your City dataset as a scatter plot over time. The horizontal axis encodes time, formatted with the `timeFormat` function to show weekdays, while the vertical axis maps temperature values using a `scaleLinear` scale. Rendered as SVG circles, each data point includes a tooltip with its timestamp. The React-based implementation uses D3’s `scaleTime` and `extent` utilities to compute the domain, with custom `AxisBottom`, `AxisLeft`, and `Marks` components for drawing the chart.

SSophia Cofone

93% match

Loading thumbnail…

Working with Time

This scatterplot displays temperature readings over the course of a week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses React hooks to load a CSV dataset via `d3.csv`, then renders SVG circles with the help of `d3.scaleTime` and `d3.scaleLinear` for the axes. Each point is color-coded teal, and hovering reveals a tooltip formatted with `d3.timeFormat` that shows the day and temperature value.

NNikita Toropov

93% match