working with time

Working with Time

This scatter plot visualizes temperature readings over a week from the Data Canvas Sense Your City Dataset. Each circle represents a temperature measurement at a specific time, with a tooltip showing the day of the week. The visualization uses React for rendering SVG elements and d3.scaleTime and d3.scaleLinear for mapping timestamps and temperatures to pixel coordinates. The code employs d3.extent, d3.max, d3.timeFormat, and the csv loading function from d3-fetch to process and display the data.

Ssophburke

Working with Time Scatter Plot

A scatter plot displays temperature readings over time, with each circle representing a single observation. The visualization uses React and D3 v7, leveraging `d3.scaleTime` and `d3.scaleLinear` for axes and `d3.csv` to load the Data Canvas Sense Your City dataset. SVG circles render the points, with hover tooltips showing the formatted time via `timeFormat`. The axis components are custom React functions, and the plot includes labeled axes for time and temperature.

RRedSorrel

Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, using a time-scaled x-axis and linear y-axis. The visualization employs React components with D3 v5 scales and SVG rendering, where each circle represents a temperature measurement with a tooltip showing the date. The code uses `scaleTime` and `scaleLinear` for axis scaling, `timeFormat` for tick labels, and custom React `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded asynchronously via D3’s `csv` function from a GitHub gist URL.

Jjuanmy400

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The chart uses React components for rendering and D3 scales—specifically `scaleTime` and `scaleLinear`—to map the timestamp and temperature values from the Data Canvas Sense Your City dataset. Each data point is drawn as an SVG circle with a tooltip showing the formatted day. The visualization incorporates custom axis components that generate ticks and grid lines.

DDean Bozic

Working with time

This scatter plot visualizes the relationship between time and temperature using the Data Canvas Sense Your City dataset. The visualization employs a yellow background circle with black stroke as a decorative frame. The chart uses D3 v6 scales (scaleTime and scaleLinear) to map timestamps and temperature values, with circles representing individual data points that display tooltips on hover. The React application constructs SVG elements through custom components for axes and marks, with specific styling applied to axis ticks and labels.

RRMartins11

Working with Time

This scatter plot visualizes temperature readings over time from the Data Canvas Sense Your City Dataset, with each circle representing a data point. The React-based D3 v5 application uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, rendering axis ticks and circular marks as SVG elements. Tooltips display formatted timestamps via the `title` element, while the chart is styled with a Poppins font and custom colors for ticks and marks.

SSong Tao Chen

Working with Time

This scatter plot uses D3 v6 and React to visualize temperature readings from the Data Canvas Sense Your City dataset over one week. The x-axis uses a time scale with day-based tick formatting, while the y-axis shows temperature values with a linear scale. SVG circles represent individual data points, each with a tooltip showing the timestamp. The code demonstrates how to combine React components with D3 scales, including `scaleTime`, `scaleLinear`, `extent`, and custom axis components for rendering the visualization.

WWolfgang

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the data, with `extent` and `max` computing the domains. The visualization renders as an SVG, with custom axis components and circular marks that include tooltips via SVG `<title>` elements. Data comes from the Data Canvas Sense Your City dataset, loaded as CSV through `d3.csv`.

Jjerate11