Untitled

100%

✓ Published0🌍 Public

Last edited Oct 30, 2019

Created on Sep 19, 2019

Forked from Loading and Parsing CSV Data

This example demonstrates how to create a continuous color legend using D3’s `d3.scaleSequential` with the interpolator `d3.interpolateViridis`. The legend is rendered as a vertical gradient bar on a Canvas element, where each pixel’s color is drawn with the Canvas 2D API. An SVG overlay adds a `d3.axisRight` for numeric tick labels, with the color scale domain set from 0 to 7. The code uses D3 v5 with the d3-scale-chromatic module for interpolators.

AI-generated description

Happiness by Country

https://gist.githubusercontent.com/mkt-ds/640984c80835e2823c1b0f5c9a3fabe6/raw/51de6483339b81fbe70cd02bdf8fecddddbc4eea/happiness_byCountry.csv

This data contains 110 countries which some attributes to help us measure happiness under some conditions.

Using the data I'm trying to see the effect of certain factors on the happiness of some people in different countries.

Attributes:

D = decision attribute (D) with values 0 (unhappy) and 1 (happy) X1 = the availability of information about the city services X2 = the cost of housing X3 = the overall quality of public schools X4 = your trust in the local police X5 = the maintenance of streets and sidewalks X6 = the availability of social community events

Attributes X1 to X6 have values 1 to 5.

MIT Licensed

Similar vizzes

Loading thumbnail…

Sequential Color Legend in D3

This example demonstrates how to generate a sequential color legend using Susie Lu’s d3-legend library. It renders a small SVG with a legend title and five color cells, mapping a domain of seven distance values to a red interpolator via `d3.scaleSequential` and `d3.interpolateReds`. The legend is created with `d3.legendColor()`, configured with a title and scale, and attached to an SVG group using a standard D3 selection and `.call()`. The chart uses D3 v7 and d3-legend v2.25.6, rendering entirely as inline SVG.

AAlark Joshi

80% match

Loading thumbnail…

D3 Scale - ScaleSequential - Different Interpolators

This example demonstrates eight different D3 color interpolators applied to sequential scales, each rendered as a horizontal band of colored rectangles. The visualization shows how the viridis, inferno, magma, plasma, warm, cool, rainbow, and cubehelixDefault colormaps transition across a 0–100 domain, with each interpolator labeled above its corresponding row. The code uses `d3.scaleSequential()` with each interpolator to map data values to fill colors, while `d3.scaleLinear()` positions the rectangles along the x-axis. The SVG output is generated from range data via `d3.range()` and rendered with D3's data join pattern.

SSubhendu Karmakar

79% match

Loading thumbnail…

An Exmple for D3.scaleSequential

This example demonstrates how D3’s `scaleSequential` maps continuous numeric domains to color interpolators. It shows two rows of rectangles, each colored by a different sequential scale: one using `interpolateRdGy` and another using `interpolateReds`. The code uses `scaleSequential` with explicit domains and applies the resulting colors as SVG fill styles. A `scaleLinear` positions the rectangles horizontally, and black-outlined polygons mark a selected range. The visualization relies on D3 v5 and renders entirely as SVG.

NNikkor

79% match

Loading thumbnail…

Sequential scale

This example visualizes a color scale applied to a series of circles along a horizontal axis, showing how a sequential color interpolator maps numeric values to colors. The circles are positioned using a linear scale, while their fill colors are determined by `d3.scaleSequential` with the `d3.interpolatePlasma` interpolator. The code uses D3 v4 to bind an array of data values to SVG circles, rendering them within an SVG container. The visualization demonstrates the smooth gradient transitions of the plasma color scheme across the range of input values.

Pphlppchrtn

75% match

Loading thumbnail…

Legend

This example shows a simple categorical color legend using two circular swatches labeled "OW2DWL" and "OW2DSWL," rendered as SVG within a 960-by-500 pixel canvas. The legend is built with the D3 v5 library, using `scaleOrdinal` to map the two domain categories to orange and blue fills. A reusable `colorLegend` function appends groups, circles, and text elements, positioning them vertically with a spacing offset and applying a text offset for labels. The visualization demonstrates a straightforward, declarative approach to creating a static legend with a minimal data set.

SShane Carey

75% match

Loading thumbnail…

// source http://jsbin.com/sivozey

This example demonstrates a time-series chart with an accompanying legend, built using D3.js v4 and rendered as SVG. It sets up a time-scaled x-axis, a linear y-axis, and an ordinal color scale using `d3.scaleOrdinal` with the `d3.schemeCategory10` palette. The code attaches a legend group to the SVG, positioning it with a translation and calling a `d3.legend` function, though the underlying data and full legend implementation are not visible. The chart uses margins and a nested group to structure the plot area.

MMTClass

74% match

Loading thumbnail…

Color Scale

A sequential color scale maps a simple array of integers 0 through 39 to the PiYG interpolator, producing a smooth purple-to-green gradient across a single row of rectangular swatches. The visualization, built with D3 v5, uses `d3.scalePoint` to position each rectangle along the x-axis and `d3.scaleSequential` with `d3.interpolatePiYG` to assign its fill. Each rectangle’s width equals the point scale’s `step()`, creating a contiguous band. The rendered SVG highlights how sequential color scales encode ordered data, with the gradient clearly representing the numeric progression from low to high values.

AAlexDaGr8

74% match

Loading thumbnail…

Color Legend

This example demonstrates how to create color and size legends in D3 v5 using reusable functions. It shows ordinal color scaling mapping fruit names to pastel colors, and a square-root size scale with transitioning circles. The SVG rendering includes animated transitions on the size legend, while text labels accompany each legend entry. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3's selection join pattern with `.enter()` and `.merge()`.

LLudovicGouverneur

74% match