Skip to main content
SimilarExport ZIP
100%

Qualitative color scale

✓ Published0🌍 Public
KKwasi Acquaye
Last edited Mar 4, 2024
Created on Mar 4, 2024

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.

AI-generated description

X_Value,Y_Value,Category 30,70,A 40,90,B 50,60,C 60,40,A 70,100,B 80,20,C

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange
76% match
Loading thumbnail…

A6 - Scatterplot with Qualitative Color Scale

This scatterplot shows the relationship between average temperature and wind speed across different states, with each dot colored by state to reveal grouping patterns. The visualization uses D3.js v6 to load CSV weather data and render SVG circles, mapping temperature to the x-axis and wind speed to the y-axis. A qualitative color scale (d3.scaleOrdinal with d3.schemeCategory10) assigns distinct colors to each state, while a categorical legend created with the d3-legend library identifies the color encoding. The chart includes labeled axes, a title, and semi-transparent points for readability.

RRiya Mathur
76% match
Loading thumbnail…

Scatterplot with a Qualitative Color Scale Using D3

This scatterplot displays bike stations in the Bay Area for 2013, plotting longitude on the x-axis and latitude on the y-axis. Each station is colored by city using a qualitative scale, d3.scaleOrdinal, with d3.schemeTableau10, while a D3 legend (d3.legendColor) shows location categories. The visualization uses D3 v7 to render SVG axes and circles, with data loaded from a remote CSV file.

OOlha
75% match
Loading thumbnail…

D3 - Qualitative color scale Scatterplot

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.

CChandana Srinivas
75% 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
75% match
Loading thumbnail…

Diverging Color Scale

This diverging bar chart displays positive and negative values for seven categories using a diverging color scale. The visualization encodes value magnitude through bar height, while direction is shown by bars extending above or below a central zero axis, with the PiYG interpolator assigning distinct colors to positive and negative values. Built with D3 v6, the example uses `scaleDiverging`, `scaleBand`, and `scaleLinear` to position and color rectangles, alongside the d3-legend library to render a horizontal color legend. Data comes from a local CSV file containing category-value pairs.

KKwasi Acquaye
75% match
Loading thumbnail…

D3 scales() scaleQuantile() in action

This example demonstrates how D3’s `scaleQuantile()` maps a numeric dataset to a categorical color scale, while `scaleLinear()` positions the data points horizontally. Fifteen circles are rendered in an SVG, each colored lightblue, orange, or lightgreen based on its quantile bucket. The visualization uses `d3.scaleLinear()` and `d3.scaleQuantile()` to transform the data array, and `d3.select("#wrapper").join()` to bind values to circle attributes. The source data is a hardcoded array of numbers, and the rendering is SVG-based.

SSubhendu Karmakar
74% match
Loading thumbnail…

Scatter Plot: Quantitative vs Qualitative values

This scatter plot displays the population of the ten most populous countries, with each country positioned along the vertical axis and its population on the horizontal axis. The visualization uses D3 v5’s `scaleLinear` for the population values and `scalePoint` for the categorical country names, rendering circles via SVG. The code loads data from a CSV file using `d3.csv`, formats the x-axis ticks with `d3.format`, and adds grid lines through custom axis tick sizes.

MMinwoo Pak
74% match