Skip to main content
SimilarExport ZIP
100%

Scatter Plot 1

✓ Published0🌍 Public
Nnicklaus-roy
Last edited Apr 28, 2021
Created on Apr 26, 2021

This scatter plot shows the number of VIPs over time, with each point representing a specific date. The visualization uses React with D3 v6 to render an SVG chart, employing `d3.scaleTime` and `d3.scaleLinear` for the axes. Data is fetched from a JSON file, and the chart includes interactive circles that trigger an alert when clicked.

AI-generated description

Smiley face implementation with React.

MIT Licensed

Similar vizzes

Loading thumbnail…

VIP chart

A bar chart shows the number of VIPs associated with network leaders, campuses, services, or priorities, selectable via a dropdown. The chart aggregates raw JSON data from a gist, counting occurrences per category and sorting bars descending, with the top 20 shown for campus/company. React manages state and re-rendering, while D3 v6 scales (scaleBand, scaleLinear) and axis components render SVG ticks and labels. The visual uses simple rectangle marks with hover tooltips.

Nnicklaus-roy
78% match
Loading thumbnail…

Scatter Plot

This example renders a scatter plot of data points within an SVG using React. It leverages D3.js v5 to manage the visualization logic, while the rendering is handled through SVG elements defined in the JSX. The plot displays individual circles positioned on a 960 by 500 canvas, with a simple, uncluttered design. The code integrates D3 scales and axes to map data values to screen coordinates, though the specific dataset is not defined in the visible files.

Ppillliarun79
77% match
Loading thumbnail…

Scatter Plot 2

A scatter plot displays the relationship between confirmed and active COVID-19 cases, with each circle representing a data point. The visualization uses React components to render SVG elements, with d3.scaleLinear managing the x and y scales. Axes are generated from array methods like xScale.ticks() and map(), while the data loads through d3.csv with multiplication applied to numeric values. The chart includes axis labels and tooltips showing formatted values using d3.format with SI notation.

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

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay
75% match
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…

Multiple scatter plots

Four scatter plots show variations in raw concentration, pressure, air temperature, and wind speed over time, using data from a 2018 CSV file. Each plot renders an SVG via React and d3.v5, using `scaleTime` and `scaleLinear` for axes and `axisBottom`/`axisLeft` for ticks. The circles are colored steelblue with hover effects, and a brush/Highlight module supports selecting points, highlighting them pink while dimming others.

JJunyanL
75% match
Loading thumbnail…

Scatter Plot Now

This scatter plot displays monthly values over time, with each circle representing a data point from a small CSV dataset. The visualization uses D3 v7 APIs including `scalePoint`, `scaleLinear`, and `axisTop`/`axisLeft` to position points and render axes in an SVG. The code sorts data chronologically, parses numeric values, and applies a steelblue fill to circles, with a custom title text element added to the chart.

Ddiegobrivo
74% match