Skip to main content
SimilarExport ZIP
100%

hub scatter plot with axis labels and tooltip

✓ Published0🌍 Public
TTammminana
Last edited May 31, 2023
Created on May 14, 2023

This line graph shows metric values over time, with labeled axes and a tooltip that displays details on hover. Using D3.js, it plots data points for a service's RTS breaches across several weeks in 2022. The chart renders as an SVG with a steelblue line, and includes a tooltip element appended to the graph container. The x-axis displays dates formatted with `d3.timeFormat`, while the y-axis shows metric values. Data comes from a static dataset containing timestamp and value fields.

AI-generated description

Reusable scatter plot with axis labels and tooltip inspired by Towards Reusable Charts.

Shows the Countries in the EU by population (2022) table of data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Yyastika
75% match
Loading thumbnail…

Stylized line chart working with Time

This visualization displays temperature readings over the course of a week, plotted as a scatterplot of circular marks. Using React to render SVG elements, the chart employs d3.scaleTime for the horizontal axis, d3.scaleLinear for the vertical axis, and d3.extent to compute the domains from the data. The code uses d3.csv to load the dataset from a GitHub-hosted CSV, and d3.timeFormat to format weekday labels on the bottom axis. Each point includes a tooltip showing its timestamp, with styling applied via the Poppins font and custom axis colors.

WWasanta Pruttisarikorn
74% match
Loading thumbnail…

react time scatter chart styled

This example presents a time-based scatter chart of San Francisco temperature data, plotting temperature values against timestamps. The visualization uses D3 version 7 for scales, CSV data loading, and time formatting, while React 17 handles component rendering, producing SVG output. The chart employs separate axis components for the left and bottom tick marks, along with circular marks that display tooltips on hover. The data comes from a week_temperature_sf.csv file hosted on GitHub. Styling includes custom tick coloring, green bars (though unused in this chart), Lato font, and axis labels for both time and temperature.

MMalcolm Mead
73% match
Loading thumbnail…

linechart d3 and React

This example shows a line chart of daily temperature readings over a week, plotting temperature on the y-axis against time on the x-axis. The visualization is built with React components that render SVG elements, using d3.scaleTime and d3.scaleLinear for axes and data mapping. The code loads CSV data via d3.csv, applies time parsing and numeric conversion, and creates circles as marks with tooltips showing the day. Axes are custom components using d3.ticks and timeFormat for labels.

SShane Carey
73% match
Loading thumbnail…

Scatter Plot with Time

This scatter plot visualizes temperature readings over time, with each circle representing a measurement plotted along a time-based x-axis and a linear temperature y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data from a CSV file into SVG circles. The chart includes labeled axes with formatted weekday tick marks on the x-axis, and hovering over a circle reveals the exact time through SVG `<title>` tooltips.

MMarco Malvicini
73% match
Loading thumbnail…

Temperature scatterplot chart

A temperature scatterplot shows hourly temperature readings over one week, with time on the x-axis and degrees on the y-axis. Each data point is an SVG circle colored teal, with a native `<title>` tooltip displaying the exact temperature value. The chart uses React components for the axes and marks, while D3 v6 APIs (`scaleTime`, `scaleLinear`, `extent`, `csv`) handle data loading, scaling, and tick generation. The dataset comes from the Sense Your City weather CSV, and labels are formatted with `timeFormat`.

Ssurikmeetr
73% match
Loading thumbnail…

Making Axes

This interactive chart, built with React and D3.js, traces how a numeric value changes over time, with data points colored by threshold—green below 50, amber between 50 and 75, and red above 75. Dashed reference lines at 50 and 75 mark these risk zones, and hovering over a circle reveals the exact percentage. The visualization uses a time-scaled x-axis and a linear y-axis, rendering an SVG connected scatter plot from CSV data.

JJamesHop31
72% match
Loading thumbnail…

Stylized Linechart

A stylized linechart displays temperature readings over a week, with circular data points and a smooth curved path rendered as SVG. The visualization loads CSV data from a GitHub Gist, mapping timestamps to a time scale and temperatures to a linear scale using d3.scaleTime and d3.scaleLinear. React components handle axes and marks, while d3.line with curveNatural generates the path, and native SVG <title> elements provide tooltips on hover.

KKai Stewart
72% match