Skip to main content
100%

Scatterplot

✓ Published0🌍 Public
VValentinCrr
Last edited Jan 20, 2018
Created on Jan 20, 2018

This example shows a simple scatterplot with two data points, plotting values on x and y axes labeled “Sepal Width (cm)” and “Sepal Length (cm),” and includes a legend with a colored square. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and appends circles as `.dot` elements. The data is temporary and hardcoded, while the axis code is commented out, so only the dots and legend render without visible tick marks.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/ValentinCrr/'>ValentinCrr</a>'s block: <a href='http://bl.ocks.org/ValentinCrr/cc11a15178f97bd6822f2c0bd876765d'>LineChart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length against petal length for 150 flowers of three species. Using D3.v4, it constructs an SVG scatter plot with labeled, ticked axes, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for coordinate mapping and axis generation. The visualization also demonstrates custom axis label styling and margin-based layout, with data loaded from a CSV file.

CCurran Kelleher
83% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset, plotting sepal length on the x-axis against petal length on the y-axis for 150 flowers. The scatter plot uses semi-transparent circular marks colored by species, with a categorical color legend generated via the d3-legend plugin. Built with D3 v4, the visualization employs d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.scaleOrdinal with schemeCategory10 for color mapping. The SVG render includes labeled axes and a legend, with data loaded from a CSV file.

CCurran Kelleher
82% match
Loading thumbnail…

scatter plot

This scatter plot uses the classic Iris dataset to compare sepal length and petal length across three flower species, with a legend and interactive tooltips. The D3.v7 code loads CSV data via `d3.csv`, applies `d3.scaleLinear` for axes and `d3.scaleOrdinal` for categorical colors. Points are rendered as SVG circles, with a grid drawn using `d3.axisBottom` and `d3.axisLeft`, and mouse events enlarge points and display detailed measurements.

Ssravya010
82% match
Loading thumbnail…

Scatter Plot

This example visualizes the classic Iris dataset, displaying flower measurements in a scatter plot with points colored by species class. Each circle represents a single flower, positioned by its sepal and petal dimensions using D3’s `d3.scaleLinear` for x and y axes. The code loads data with `d3.csv`, appends SVG circles via `svg.selectAll` and `enter()`, and includes placeholder logic for axis rendering and hover tooltips. The visualization is rendered as an SVG within an HTML page, styled with external CSS, demonstrating basic D3 data-binding and scale patterns.

YYang Shun Yu
82% match
Loading thumbnail…

Basic Scatter Plot

This example visualizes the classic Iris dataset with a basic scatter plot, using D3 v4 to render circles in SVG that map sepal length and width. Each circle’s fill encodes the flower species via a color legend, generated with the d3-legend plugin. Axis ticks and labels are customized with scales, and the plot is fully responsive to the viewport.

CCurran Kelleher
82% match
Loading thumbnail…

D3V4 Scatterplot

A D3V4 scatterplot visualizes iris flower dimensions, plotting sepal width on the x-axis and sepal length on the y-axis, with each point colored by species and a legend. The chart uses a TSV data file, parsed with `d3.tsv`, and encodes positions via `d3.scaleLinear`, color via `d3.scaleOrdinal`, and axes via `d3.axisBottom` and `d3.axisLeft`. The SVG rendering employs circles for data points and standard margins, adhering to D3 conventions.

MMNoichl
81% match
Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points with x-values between 14 and 39 and y-values between 22 and 61. The visualization uses D3 v4 to create SVG circles, with linear scales mapping the data domain to screen coordinates. The code defines x and y scales, generates axes with d3.axisBottom and d3.axisLeft, and appends circles with radii and fill colors that vary by index. The data is hardcoded as an array of objects, and the chart renders within an SVG canvas sized 960 by 500 pixels.

VVickyLouise
81% match
Loading thumbnail…

D3_vanilla_html_Scatterplot

This example presents a scatterplot of the Iris flower dataset, plotting petal length against sepal width. Each point is colored by species using a d3.scaleOrdinal with a custom color scheme, and d3.axisLeft and d3.axisBottom render the axes. The code loads CSV data via d3.csv, parses numeric fields, and maps data to pixel coordinates with d3.scaleLinear. SVG circles are joined to the data using selection.join, with a toggle function that can hide or show a line element, though that line is not initially rendered.

Ppoppy
81% match