Skip to main content
SimilarExport ZIP
100%

Fork of Working with Time

✓ Published1🌍 Public
Eeng-makumba
Last edited May 3, 2022
Created on May 3, 2022
Forked from Working with Time

This example plots temperature over time for San Francisco using a fork of the "Working with Time" template, with a React frontend and D3’s `scaleTime` and `scaleLinear`. The SVG scatter plot renders each data point as a circle, using D3’s `timeFormat` for tooltips and axis labels, reading data from the Data Canvas Sense Your City dataset via D3’s `csv` loader. The code uses React components for axes and marks, with D3’s `extent` to set the domain.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

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
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 visualization presents a scatter plot of temperature readings taken hourly over a week in San Francisco, using the Data Canvas Sense Your City dataset. The code loads the data via D3’s `csv` and `scaleTime`/`scaleLinear` functions, then renders the time-series as SVG circles within a React component. Axes are built with reusable React components, and each circle includes a native `<title>` element for a tooltip displaying the formatted timestamp.

Ssivaprasadsidharth@gmail.com
93% match
Loading thumbnail…

Fork of Working with Time

This visualization presents a scatter plot of temperature readings taken hourly over a week in San Francisco, using the Data Canvas Sense Your City dataset. The code loads the data via D3’s `csv` and `scaleTime`/`scaleLinear` functions, then renders the time-series as SVG circles within a React component. Axes are built with reusable React components, and each circle includes a native `<title>` element for a tooltip displaying the formatted timestamp.

Ssivaprasadsidharth@gmail.com
93% match
Loading thumbnail…

Fork of Working with Time

A scatter plot shows temperature readings over one week in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses React with D3 v5, employing `scaleTime`, `scaleLinear`, `extent`, and `csv` to load and parse the Data Canvas Sense Your City dataset. SVG marks are rendered as circles with embedded tooltips, while `AxisBottom` and `AxisLeft` components generate tick marks. A natural curve connects the points, and the chart is styled with Poppins font and custom axis labels.

EEdgar Alves
93% 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…

Fork of Working with Time

This interactive scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City dataset, focusing on a week of San Francisco weather data. The visualization maps timestamps to the x-axis and temperature values to the y-axis, with each data point rendered as an SVG circle. Built using React and D3 v5, the code leverages `scaleTime` for the temporal axis, `scaleLinear` for the temperature axis, and `extent` to compute domains. Axis components and marks are modularized into separate files, while hover tooltips display the formatted time via a native `<title>` element.

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