Skip to main content
SimilarExport ZIP
100%

Working with time

✓ Published0🌍 Public
Cchrismeeky
Last edited Oct 20, 2021
Created on Oct 19, 2021

This interactive scatter plot visualizes temperature readings over time, with each point representing a data sample and a smooth curve connecting the series. Users can brush horizontally across the chart to highlight specific time ranges, which turns the corresponding circles red. Built with React and D3 v7, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `curveNatural`, and `d3.brushX` for the selection interaction. Data comes from a CSV file of weekly San Francisco temperatures, rendered as SVG elements with custom axes.

AI-generated description

Stylized scatter plot using React and D3

MIT Licensed

Similar vizzes

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

Working with Time

This interactive scatter plot visualizes temperature readings over a week-long period, using a time-based x-axis and linear temperature scale on the y-axis. Built with React and D3 v5, the visualization loads CSV data from the Data Canvas Sense Your City dataset and renders SVG circles for each measurement. The code utilizes scaleTime, scaleLinear, extent, and timeFormat APIs to handle temporal scales and date formatting, while custom React components manage axis rendering and data point marks with tooltips showing the day of the week.

NNick
91% match
Loading thumbnail…

Working with time

This example visualizes temperature over time using an SVG scatterplot, where each circle marks a temperature reading at a specific timestamp. The x-axis uses a time scale to map dates, while the y-axis linearly maps temperature values. The chart includes labeled axes, tick marks, and a tooltip that displays the full date on hover. It is built with React and D3 v5, leveraging `scaleTime`, `scaleLinear`, and `extent` to compute scales, with data loaded from a CSV file containing weekly San Francisco temperature records.

LLawrence Liu
91% 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
91% match
Loading thumbnail…

Working with Time

A scatter plot displays hourly temperature readings over a week, using a time-based x-axis and a linear y-axis for degrees. Built with React and D3 v5, it renders circles as SVG marks, with axes generated by custom components. The data comes from a CSV file of San Francisco temperatures, loaded via `d3.csv`. Scales are created with `d3.scaleTime` and `d3.scaleLinear`, and tooltips are provided by native SVG `<title>` elements showing formatted time values.

MMinh Luong
91% match
Loading thumbnail…

Working with time

This example visualizes San Francisco temperature readings over one week, plotting temperature against time as a smooth curve with individual data points marked by circles. It uses React to render SVG elements, with d3.scaleTime and d3.scaleLinear mapping the temporal and temperature domains. The d3.line generator with curveNatural creates the interpolated path, while custom AxisBottom and AxisLeft components draw the ticks. Data is loaded as CSV via d3.csv and parsed into JavaScript Date objects, with tooltips formatted using timeFormat.

MMosheAron
91% match