Skip to main content
SimilarExport ZIP
100%

Fork of Stylized Scatter Plot

✓ Published0🌍 Public
Sstefanpullen
Last edited Dec 23, 2021
Created on Dec 22, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

Fork of Stylized Scatter Plot Working with Time and line chart

This example visualizes temperature readings over time as a smooth line chart with overlaid scatter points, using a time-based x-axis and linear y-axis. The visualization loads data from a CSV file containing weekly San Francisco temperatures, parsed via d3.csv. Built with React and rendered as SVG, the chart employs d3.scaleTime, d3.scaleLinear, and d3.line with curveNatural for the curved path, while each data point is drawn as a circle with a tooltip showing the day of the week.

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

Fork of Stylized Line Chart

This example visualizes San Francisco temperature readings over a week using a stylized line chart. The chart plots time on the x-axis and temperature on the y-axis, with a smooth curved line rendered by d3.line() with curveNatural. The visualization is built with React components that call d3.scaleTime, d3.scaleLinear, and d3.extent to map the data. Axes are drawn using custom React components that generate SVG ticks and labels, with data loaded via d3.csv.

YYedrup
91% match
Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized line chart visualizes temperature over time for San Francisco, using data from the Data Canvas Sense Your City Dataset. It renders a smooth curve through data points, with formatted x-axis labels showing abbreviated weekdays. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, `extent`, and `line()` with `curveNatural` to create the path, while custom SVG axes are generated from scale ticks in the component code.

Bbillmccabeusa@hotmail.com
91% match
Loading thumbnail…

Fork of Stylized Line Chart

A stylized line chart displays daily temperature readings from the San Francisco week temperature dataset, with time on the x-axis and a fixed 0-100 temperature scale on the y-axis. The visualization uses React components to render SVG elements, with d3.scaleTime and d3.scaleLinear handling the scales. The line path is generated using d3.line with a curveNatural interpolation, styled with a 4-pixel teal stroke. Axes are custom-built with tick marks and rotated labels, all rendered inside a single SVG using the Poppins font.

AAhmeTyAtakan
91% match
Loading thumbnail…

Fork of Stylized Line Chart-00

This interactive visualization displays temperature readings over the course of a week in San Francisco, plotted as a smooth line chart using React and SVG. The chart filters the data to only show circular markers for temperatures at or above 25 degrees, with tooltips revealing the day of week for each point. Built with D3 v5, it uses <code>scaleTime</code> and <code>scaleLinear</code> for axes, <code>curveNatural</code> for the line path, and <code>csv</code> to load the dataset from a GitHub gist.

Ddasari234
91% match
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
91% match