Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Aamnicpo
Last edited Mar 1, 2022
Created on Feb 23, 2022
Forked from Untitled

This interactive scatter plot displays two measured variables, Spe_1 and Spe_2, as semi-transparent circular points on Cartesian axes. Users can zoom and pan the chart using the mouse. The visualization uses d3.zoom to handle user interactions, rescaling the linear scales with d3.event.transform. Axes update through d3.axisBottom and d3.axisLeft, while a clipPath prevents points from rendering outside the plot area. Data loads from a CSV file hosted on GitHub, and the chart is rendered in SVG within a React-based page using d3.v4.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

Pprincit
77% match
Loading thumbnail…

Untitled

This interactive scatterplot displays Iris flower measurements, plotting sepal length against petal length for individual specimens. The visualization supports panning and zooming through a d3.zoom behavior, which rescales both the x and y axes and repositions the circles accordingly. Using D3 v4 with an SVG rendering approach, the chart loads data from a CSV file containing the classic Iris dataset. A clipPath restricts the points to the plotting area, while an invisible overlay rectangle captures pointer events to initiate zoom transformations.

Aamnicpo
76% match
Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini
76% match
Loading thumbnail…

Untitled

This example shows a 3D scatter plot comparing two sets of data points across three variables: a1/s1/h1 and a2/s2/h2. The visualization uses two distinct marker styles—one with black outlines and one with pink circles and green outlines—to differentiate the datasets. The code loads CSV data from a GitHub gist using the D3.js `d3.csv` function, then constructs the plot with Plotly's `scatter3d` trace type. The layout removes all margins to maximize the plot area, and the chart is rendered into a div using `Plotly.newPlot`.

AAshrith Kudidhi
75% match
Loading thumbnail…

Untitled

A scatter plot displays 100 randomly generated points within a fixed coordinate space. Each point is rendered as a red circle on an SVG canvas, with axes labeled from 0 to 500. The visualization uses D3 v4’s `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` to draw the axes, and appends circles via `selectAll` and `enter`. The data is synthetic, created with `Math.random` in a loop.

Ssaipaidipalli
75% match
Loading thumbnail…

Untitled

This example shows a scatterplot of data points colored by alignment (yes/no) that can be zoomed along the x-axis using a brush. The visualization loads CSV data and renders circles with an SVG, using d3.brushX to let users select a horizontal range, which then updates the x-axis domain and repositions the circles with a transition. The code uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and a clipPath to confine the brush and points to the plotting area. Data comes from a remote GitHub CSV file.

Aamnicpo
75% match
Loading thumbnail…

Untitled

This interactive scatter plot displays the relationship between annualized standard deviation (x-axis) and annualized return (y-axis) for a dataset loaded via `d3.csv`. Each circle represents a data point, colored with `d3.scale.category20`, and features an SVG `<title>` tooltip showing the variable name and both metrics as percentages. Hovering triggers a smooth `d3.transition` that enlarges the circle and thickens its stroke. The visualization uses `d3.svg.axis` for both axes, with formatted tick labels and clear axis titles.

Kkirangithub23
75% match
Loading thumbnail…

Untitled

A dropdown menu switches between three data series in this connected scatterplot, updating both a line path and circular points with smooth transitions. The visualization reads time-series data from an external CSV file and renders it as an SVG using d3.line, scaleLinear axes, and transition methods for animated updates. A second custom chart built with d3's modular API and scalePoint scales demonstrates categorical axis support with staggered circle entrance animations.

Eemberix@gmail.com
75% match