Skip to main content
SimilarExport ZIP
100%

D3 - Qualitative color scale Scatterplot

✓ Published0🌍 Public
CChandana Srinivas
Last edited Mar 5, 2024
Created on Mar 4, 2024
Forked from HTML Starter

This example visualizes global agricultural productivity with a qualitative color scale, plotting wheat production against a pest control metric. Each circle represents a data point, with colors encoding the year (2015–2021) using an ordinal scale from d3.scaleOrdinal. The scatterplot uses d3.csv to load data and d3.axisBottom/axisLeft for axes, while a legend from d3.legendColor clarifies the year mapping. The SVG rendering applies linear scales for positioning and radius, though circle size remains fixed at 8 pixels despite the size scale being defined.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Qualitative color scale

A scatterplot displays six data points across three qualitative categories, using an ordinal color scale to distinguish category membership. The visualization employs d3.scaleOrdinal with d3.schemeCategory10 to assign colors to points, and includes a color legend generated via the d3-legend library. The code loads CSV data with d3.csv, converts string values to numbers, and renders circles and axes using SVG elements within a D3 v6 framework.

KKwasi Acquaye
75% match
Loading thumbnail…

Scatter Plot Arun

This scatter plot visualizes crop production against area for a dataset containing crop information, with each data point colored by crop type. The visualization uses D3 v6's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions to render SVG circles on a Cartesian coordinate system. The code loads CSV data from a Gist URL, parses it, and maps production values to the x-axis and area values to the y-axis, with fixed point radius. The chart includes rotated axis labels and custom styling for tick text.

AArun Pratap
72% match
Loading thumbnail…

3D Scatter plot using D3.js

This example presents an interactive 3D scatter plot built with Plotly.js and D3.js, visualizing agricultural crop data. It renders two marker traces from a CSV file: one mapping crop type, production, and district, the other correlating crop year, season, and area. The code uses `d3.csv` to load the dataset and `Plotly.newPlot` to draw the scatter3d traces within a DIV element. The visualization employs 3D markers with custom opacity and line styling to distinguish the two datasets, with the layout margins set to zero.

Ggayathrikavya
72% match
Loading thumbnail…

[A7] (Heat Map for Time Series Data with a Color Legend)

This visualization displays a heat map of the Consumer Price Index for various grains (Corn, Rice, Rye, Wheat) from 2000 to 2015, using a sequential color scale from light to dark yellow-orange to represent CPI values. The example renders time series data as a grid of colored rectangles, with each column representing a year and each row a grain type, alongside a color legend and axes. It uses D3 v7 and the d3-legend library, implementing scales such as `d3.scaleLinear` for the year axis and `d3.scaleSequential` with `d3.interpolateYlOrBr` for coloring. Tooltips appear on mouseover to reveal the exact year, grain, and CPI value, while the data is loaded from a CSV file.

Cctan13@dons.usfca.edu
72% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes corn production by state for 2020, using a linear scale for production values on the x-axis and a point scale for states on the y-axis. Each circle represents a state’s total bushels, with the data loaded from a CSV file. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`, and renders as SVG. Axis tick labels are formatted with `format('.2s')`, while gridlines and styling are applied via CSS.

AArriannePandaraoan
72% match
Loading thumbnail…

A6_Color Scales in D3

This scatter plot matrix visualizes the relationships between four numeric flower measurements—sepal length, sepal width, petal length, and petal width—with points colored by species. The grid layout shows pairwise comparisons, with each cell plotting one measurement against another. The code uses D3.js v7, including `scaleLinear`, `scaleOrdinal`, `schemeSet1`, and axes created with `axisLeft` and `axisBottom`. Data is loaded from a CSV file and parsed manually. On mouseover, a yellow highlight class is applied to the circles in each cell, emphasizing the points.

DDuc Pham
71% match
Loading thumbnail…

Scatter Plot with Menu

This scatter plot visualizes worldwide export values to the United States and China from 2000–2016, with each circle’s color encoding the export indicator category. A legend identifies the categories, and axis labels clarify the compared countries. Built with d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal, the SVG renders points with a categorical color scheme. Data is loaded from a hosted CSV file, and circles use fixed opacity for overlapping points.

Vveagy
71% match
Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris flower dataset, where users can switch the X and Y axes between four quantitative measurements via dropdown menus. Hovering over a species in the color legend highlights only that group’s circles, dimming the rest. React manages the interactive state, while D3 v5’s `scaleLinear`, `scaleOrdinal`, and `csv` handle data loading, scales, and formatting. The visualization renders as SVG, with axis components built from D3 scales and React elements.

Ppnlinyz
70% match