Skip to main content
100%

4 Quadrant Scatter Plot D3 v4

✓ Published0🌍 Public
Aalandunning
Last edited Oct 19, 2016
Created on Oct 14, 2016

This example shows a four-quadrant scatter plot of seven activities, each positioned by its value and consequence scores. The circles are colored according to which quadrant they fall into: teal for top-left, blue for top-right, orange for bottom-left, and purple for bottom-right. The plot uses d3.scaleLinear to map the data domain to the SVG canvas, with axis labels positioned using d3.axisBottom and d3.axisLeft. Data is loaded from a JSON file via d3.json, and the rendering uses SVG circles with a gray background rectangle.

AI-generated description

This is a simple line graph demonstrating the addition of scatterplot points to a line graph. This was written using d3.js v4 and is a follow on to the simple graph example here.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/6f082f0e3b820b6bf68b78f2f7786084'>Scatterplot with v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Quadrant

Four labeled quadrants—Assess, Adopt, Avoid, and Analyze—organize a scatterplot of fabricated data points, each colored by category and positioned by random percentage and count values. The D3 v7 visualization uses linear scales for both axes and avoids overlaps with the legend in the lower-right corner. SVG rectangles, text, and circles render the quadrants, labels, and legend items, while a CSS keyframe animation applies a marching-ants dash offset to any path elements.

CCarloWK1202
82% match
Loading thumbnail…

Quartet Scatter Plot

This visualization displays a subset of Anscombe’s Quartet, specifically dataset II, highlighting how a scatter plot can appear identical to others despite differing underlying data. Built with D3 v4, it uses SVG rendering and a sequential color scale to map x-values, with circle and text labels appearing on hover, and an elastic animation effect triggers on mouse interactions. The data is loaded from a local TSV file.

AAbin
75% match
Loading thumbnail…

Activity 6 Task3 Q6

This example shows a scatter plot of categorical data from a CSV file, with each point colored by category and positioned by valueX and valueY. It uses D3 v7 to load the data via `d3.csv` and `d3.autoType`, then renders SVG circles with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. The axes are generated with `d3.axisBottom` and `d3.axisLeft`, and labels for both axes are added as SVG text.

Kkesava
75% match
Loading thumbnail…

Anscombe's Quartet with simple-statistics and d3js v4 -

Anscombe's Quartet is visualized as four separate scatterplots, each displaying a series of 11 data points loaded from a CSV file. The charts share identical axes, scales, and styling—pink circles on a cream background—and each is labeled Series 1 through 4. Using the simple-statistics library, the same summary statistics (mean, sample variance, and correlation coefficient) are calculated for every series and printed beneath each plot, showing nearly identical values. The d3.js v4 code also fits and draws a light-blue regression line per plot, emphasizing how the four datasets, though statistically similar, have very different graphical structures. The example is implemented entirely in SVG, with no animation, and demonstrates the importance of visualizing data before relying on descriptive statistics.

Aalansmithy
74% match
Loading thumbnail…

Basic starter code for many simple D3 charts, v4

A scatterplot displays Anscombe’s Quartet, with points labeled by their x- and y-coordinates and grouped by quartile. The chart uses D3 v4’s `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisRight`, with axes positioned on the right and bottom of an SVG canvas. Data loads from a tab-separated file via `d3.tsv`, and the x- and y-domain extents are updated based on the loaded values. Each point is drawn as a `circle` with a sibling `text` label, both grouped in a transformed `<g>` element.

LLucyI
74% match
Loading thumbnail…

Activity 6_Question6

This example shows an SVG scatter plot of eight data points, each colored by category according to the `d3.scaleOrdinal` with `d3.schemeCategory10`. The chart maps `valueX` to the horizontal axis and `valueY` to the vertical axis using `d3.scaleLinear` ranges and `d3.extent` for domain calculation. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and data is loaded asynchronously from `data.csv` via `d3.csv`. The visualization demonstrates basic D3 v7 data binding, margin conventions, and stylized axis labels.

Ppenujulilikhil01020@gmail.com
74% match
Loading thumbnail…

44. D3 Axes Clean

This example shows a scatter plot of coordinate pairs plotted with D3.js version 4.5.0. It renders circles and red text labels in an SVG canvas, using `d3.scaleLinear` for x and y axes and `d3.scaleSqrt` for circle radius sizing based on the y-value. The X-axis is customized with `d3.axisBottom` and `tickValues` to display only four specific tick marks (0, 100, 250, 600), demonstrating how to reduce axis clutter.

Aamakanju@nyit.edu
73% match
Loading thumbnail…

simple scatterplot

This simple scatterplot displays seven data points on a Cartesian grid, with x-values ranging from 0 to 50 and y-values from 0 to 70. The visualization uses D3 v4’s `d3.scaleLinear` to map data coordinates to pixel positions, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Circles are appended to an SVG canvas, with their radius and fill color varying per index. The data is hardcoded as an array of objects, and the axes are positioned using SVG `transform` attributes.

VVishwacorp
73% match