20. Working with Time

100%

20. Working with Time

✓ Published0🌍 Public

Last edited Mar 31, 2021

Created on Mar 31, 2021

A scatter plot visualizes temperature readings over a one-week period in San Francisco, using time on the x-axis and temperature on the y-axis. The React-based example employs d3.scaleTime, d3.scaleLinear, and d3.extent to map data from the Data Canvas Sense Your City dataset. SVG circles represent individual measurements, with d3.timeFormat for weekday tick labels and native `<title>` elements for tooltips, demonstrating time-scale handling in D3 v5.

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

95% match

Loading thumbnail…

Working with time

A scatter plot displays temperature readings from a week of San Francisco weather data, with time on the x-axis and temperature on the y-axis. The visualization uses React to render SVG circles, with d3.scaleTime and d3.scaleLinear handling the scales. d3.axisBottom and d3.axisLeft are replaced by custom React components for tick marks, while d3.csv loads the dataset and d3.timeFormat formats the day labels. The chart highlights the daily temperature variation across the week.

SSabin Bhandari

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

93% match

Loading thumbnail…

Working With Time

This example shows a scatter plot of temperature readings over one week in San Francisco. Time is plotted on the x-axis using d3.scaleTime, while temperature appears on the y-axis with d3.scaleLinear. The SVG rendering displays a blue path connecting data points, with individual circles that reveal the day of the week as a tooltip via a native `<title>` element. Data loading relies on d3.csv and React’s useEffect hook. Axes are built from custom React components using d3’s tick generation and timeFormat for weekday labels.

Ccoltonjcox92

93% match

Loading thumbnail…

Working with Time

A scatter plot displays one week of San Francisco temperatures, with time on the x-axis and temperature on the y-axis. The visualization uses a React and SVG structure with d3.scaleTime and d3.scaleLinear for scales, d3.extent for domain calculation, and d3.timeFormat for tick labels showing abbreviated weekdays. Circles are rendered and colored with a teal fill, and hovering reveals the exact timestamp via a `<title>` tooltip. The data is loaded asynchronously from a CSV using d3.csv.

Rrstrauss127

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

93% match

Loading thumbnail…

Working with Time

This scatter plot visualizes temperature readings over a week in San Francisco, with time on the x-axis and temperature on the y-axis. It uses React to render SVG elements and D3 v5’s `scaleTime`, `scaleLinear`, `extent`, and `timeFormat` to map data to coordinates and format weekday labels. The dataset is loaded via D3’s `csv` from a GitHub gist, and hovering over a circle reveals its timestamp through an SVG `<title>` tooltip.

Jjwlam83

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

93% match