Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Oct 31, 2021

Created on Oct 31, 2021

This fork of a stylized scatter plot displays temperature over time for San Francisco, using the Iris Dataset’s weekly temperature readings. The chart, built with React and D3 v5, renders SVG circles for each data point, with axes generated from `scaleTime` and `scaleLinear`. Axis labels and tooltips are implemented via custom components, and the Poppins font is loaded from Google Fonts. The visualization updates React state after fetching the CSV, and the loading state is shown with a `<pre>` element.

AI-generated description

A scatter plot of The Iris Dataset.

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…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes San Francisco temperature data over time as an SVG line chart rendered with React and D3 v5. The visualization uses a time-scaled x-axis for timestamps and a linear y-axis for temperature values, with styled axes and tick marks. The line path is drawn using D3's `line()` generator from the `Marks` component, while `scaleTime` and `scaleLinear` handle the data mappings. Data is loaded via D3's `csv` utility and the Poppins font gives the chart its distinctive aesthetic.

Rrajamrit-singh

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

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the Stylized Scatter Plot visualizes weekly temperature measurements over time, using a smooth line to connect each data point. The chart is rendered as an SVG within a React component, employing D3's `scaleTime` and `scaleLinear` for axes and `line` with `curveNatural` to create the path. The underlying data is loaded via D3's `csv` function from a remote SF temperature dataset. Styling uses the Poppins font and CSS rules for tick marks, circles, and a labeled time series.

KKonJoDot

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization displays temperature readings over time from the San Francisco week temperature dataset, plotting individual data points connected by a stepped line. Time appears on the x-axis using d3.scaleTime with weekday tick formatting, while temperature uses d3.scaleLinear on the y-axis. Built with React and d3.v5, the chart renders SVG elements including custom axis components, circles for data marks, and a curveStep path created via the d3 line generator. Tooltips on each circle reveal the timestamp when hovered.

Sstefanpullen

88% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork visualizes weekly temperature data for San Francisco as a smooth, stylized line chart rendered with SVG through React. Using d3’s scaleTime and scaleLinear, the chart maps timestamps to the x-axis and temperatures to the y-axis, with a natural curve applied via d3.line and curveNatural for a flowing path. The data is loaded from a CSV using d3.csv, and custom React components (AxisBottom, AxisLeft, Marks) handle axis rendering and the line, while the Poppins font and muted teal stroke give the chart a clean, modern look.

SSteven Pearce

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

88% match

Loading thumbnail…

Fork of Stylized Line Chart

This fork of a stylized line chart visualizes temperature over time for a week in San Francisco, sourced from the Data Canvas Sense Your City dataset. The SVG chart, rendered with React and D3 v5, displays a smooth, natural curve using `line()` and `curveNatural` from d3, with custom axes via `AxisBottom` and `AxisLeft`. The Poppins font and teal color scheme style the visualization, while the data is loaded asynchronously via `csv()` from a GitHub gist.

JJenna Hamza

88% match