Fork of Scatter Plot

100%

Fork of Scatter Plot

✓ Published1🌍 Public

Last edited Jul 5, 2023

Created on Jul 5, 2023

This interactive scatter plot visualizes temperature readings over time using React and D3 v7. The visualization employs scaleTime and scaleLinear to map timestamps and temperature values to SVG coordinates, while custom AxisBottom and AxisLeft components render the time-formatted x-axis and numeric y-axis. The data is loaded asynchronously from a CSV file containing weekly San Francisco temperature measurements using D3's csv utility. Each data point is rendered as a circle mark with a tooltip displaying the day of the week.

AI-generated description

A program that loads in some data using D3 utilities, and uses React state to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes temperature over time in San Francisco, with each circle representing a daily measurement. The chart uses D3 scales (scaleLinear) to map data to positions, while React components render the SVG axes and marks. Axis ticks are styled with grid lines, and the data is loaded from a CSV file using D3’s csv method. Hovering over a circle reveals its timestamp via a native SVG title tooltip. The visualization is built with React 16.9 and D3 v5, using a Poppins font and a clean, minimal aesthetic.

AAnkit-Ian-53787

92% match

Loading thumbnail…

Scatter Plot with Time Series

A scatter plot displays temperature readings against timestamps from a San Francisco weekly weather dataset, using circular marks positioned by time and linear temperature scales. Built with React and D3 v6, the visualization renders as SVG with reusable axis components and tooltips showing formatted day labels. Data loads via CSV from a remote gist, with `scaleTime` and `scaleLinear` handling the mapping, while `d3.timeFormat` formats tick labels.

AAndres de la Garza

90% match

Loading thumbnail…

Fork of Fork of Working with Time

This scatter plot shows how temperatures in San Francisco vary over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization loads data from a CSV file via the `d3.csv` function and renders SVG circles using React, with D3's `scaleTime` and `scaleLinear` managing the axes. Each circle includes a tooltip displaying the formatted date, while axis labels and ticks are generated by custom React components. The plot uses a clean, minimalist design with a Poppins font and muted colors.

RRoberto

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This example visualizes a time series of weekly temperature readings from San Francisco, plotting temperature against time as a scatter plot overlaid with a smooth connecting line. The chart uses React to render SVG elements, with axes and marks built as reusable components. Scales are created using d3.scaleTime and d3.scaleLinear, while the line path is generated with d3.line and the curveNatural interpolator. Data is loaded asynchronously via d3.csv, and each point includes a tooltip showing the timestamp.

Ppnlinyz

90% match

Loading thumbnail…

Fork of Working with Time

This example visualizes daily temperature variations in San Francisco using a scatter plot. The chart plots timestamp data on the x-axis against temperature on the y-axis, with each data point rendered as a circle. Built with React and D3 v5, the visualization uses the `scaleTime` and `scaleLinear` functions to map the data domain to pixel coordinates within an SVG. The `csv` function loads the dataset from a remote URL, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) render the axes and data points, with tooltips displaying the formatted date on hover.

Cchar0496

90% match

Loading thumbnail…

Scatter Plot

This example plots temperature readings from a CSV file over time, showing the daily temperature cycle in San Francisco. The visualization uses D3 v5 with React, rendering an SVG scatter plot where each circle represents an hourly observation. The code employs D3’s `scaleTime` and `scaleLinear` to map timestamps and temperatures to coordinates, with `axisBottom` and `axisLeft` for labeled axes. The data is loaded via `d3.csv`, and circles are appended to the SVG with a fixed radius and red fill at reduced opacity.

Ggregosaure

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

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This is a scatter plot that visualizes temperature readings over time from a San Francisco weekly temperature dataset. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to the SVG canvas, with custom components for axes and data marks. The chart is rendered using React, with D3 v5 providing the CSV loading and scaling utilities, while the Poppins font and specific color styling give it a polished, stylized appearance.

PPratik Raja

90% match