Skip to main content
SimilarExport ZIP
100%

Ep. 26+27 | Working with Time

✓ Published2🌍 Public
YYee Han
Last edited May 29, 2021
Created on Dec 24, 2020

A time series scatter plot of San Francisco weekly temperature data from the Data Canvas Sense Your City dataset, rendered as an SVG via React components. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map timestamps and temperatures, with a natural curve connecting points via `d3.line` and `curveNatural`. Axis ticks are formatted with `timeFormat('%a')` for weekday labels, and hovering over circles reveals tooltips via SVG `<title>` elements. The code integrates reusable axis and mark components while fetching data with `d3.csv`.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

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

Working with Time

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.

HHollyClarke19
89% 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
89% 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
88% match
Loading thumbnail…

Working with Time

This visualization shows a week of temperature readings in San Francisco as a smooth line chart, with points marking each hourly measurement. The time axis uses a time scale and formats tick labels as abbreviated weekday names. Built with React and D3 v7, the chart uses `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and custom `AxisBottom` and `AxisLeft` components to render the SVG. Data comes from the Data Canvas Sense Your City API, loaded via `csv`, with tooltips on points displaying the formatted timestamp.

Jjiro2017
88% match
Loading thumbnail…

Working with Time

This scatter plot visualizes weekly temperature readings in San Francisco, using time on the x-axis and temperature on the y-axis. The React-based visualization renders SVG circles, with axes built using D3’s `scaleTime` and `scaleLinear` APIs and tick generation via those scales’ `.ticks()` methods. Each circle includes a native SVG `<title>` tooltip showing the formatted timestamp. Data is loaded asynchronously from a CSV file using D3’s `csv` function and parsed with a custom row conversion, while `extent` and `.nice()` determine the scales’ domains.

Rroc286
88% match
Loading thumbnail…

Working with Time

Working with Time shows temperature readings from a week in San Francisco as a smooth line chart. The visualization uses React to render SVG elements, with D3's `scaleTime` and `scaleLinear` mapping timestamps and temperatures to coordinates. A natural curve connects the data points, which are marked with small circles that display tooltips via SVG `<title>` elements. The CSV data is loaded with D3's `csv` function, while custom axis components and a `line` path generator with `curveNatural` handle the plotting.

Aafcchilders
88% 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
88% match