Skip to main content
SimilarExport ZIP
100%

Modification to dc.leaflet.js to a) plot colorscale in choropleth in the right order and b) to accept colorbrewer.js scales

✓ Published0🌍 Public
KKatiRG
Last edited Sep 22, 2015
Created on Sep 22, 2015

This example modifies `dc.leaflet.js` to enhance its choropleth rendering. It adjusts the color calculation function to correctly order colors from a `colorbrewer.YlGn` palette, and it accepts min/max values from the chart’s `colorDomain()` to map data values to colors. The code defines a `_colorCalculator` that divides the value range by the palette length to select a color, and it integrates a custom `colorAccessor`. The visualization uses the `dc.colorChart` and `dc.leafletChart` APIs to render geographic features.

AI-generated description

Similar vizzes

Loading thumbnail…

dc-leaflet legend feature (creates a static legend based on range of the data)

This example demonstrates how to add a static legend to a dc.leafletChoroplethChart, displaying color ranges based on the data’s domain. A Leaflet control is created and updated during the chart’s preRedraw event, calculating color grades from the chart’s colorDomain and color palette. The legend appears only after all six linked dc charts have been cycled, using the YlGn colorbrewer palette and a d3.extent calculation. The code shows the dc.js and Leaflet integration, including custom legend lifecycle methods.

KKatiRG
75% match
Loading thumbnail…

Every ColorBrewer Scale

This gallery displays every ColorBrewer scale as a grid of color swatches grouped by palette name. Each palette, from YlGn to YlOrRd, shows its largest available color scheme as a row of small rectangles. The visualization is rendered using D3 v3, iterating over the embedded `colorbrewer` data structure with `d3.entries` and `d3.values`. Clicking any palette outputs its full set of hexadecimal color values to the browser console via `JSON.stringify`. The swatch colors come directly from Cynthia Brewer’s ColorBrewer data.

Mmbostock
65% match
Loading thumbnail…

TODO

This interactive tool visualizes color scales by plotting Bézier curves through multiple color spaces, including RGB, HSL, HCL, Lab, and Cubehelix. Users can edit input colors, adjust the number of output stops, and click to switch between basis and linear curve interpolation across each space’s channels. The page renders using SVG and includes animated draggable points on channel charts, with the current state shared via the URL. Forked from d3-based code by 1wheel, it addresses issues in Gregor Aisch’s Color Palette Helper for diverging scales.

11wheel
64% match
Loading thumbnail…

ColorBrewer Spline

This example converts the eleven-color ColorBrewer “PiYG” scheme into a continuous color scale by interpolating in RGB color space using uniform one-dimensional b-splines. It shows a set of circles representing the original discrete colors, with three channels plotted as red, green, and blue curves, alongside a canvas gradient that visualizes the resulting smooth interpolation. Using d3-scale-chromatic for the source colors, the code relies on d3.interpolateRgbBasis and d3.interpolateBasis to generate the continuous scale, while rendering the curves with SVG paths and the gradient via Canvas createImageData.

Mmbostock
64% match
Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

DDuc Pham
63% match
Loading thumbnail…

ColorBrewer Spline II

This example visualizes the differences between color interpolation methods by comparing splines in L\*a\*b\* color space to a direct linear interpolation. A horizontal canvas strip renders a gradient produced using `d3.interpolateBasis` on L\*a\*b\* channels, while an SVG chart plots the individual L, a, and b channel curves as both smooth basis splines and dashed linear segments. The code uses d3.lab, d3.interpolateBasis, and d3.line, with circular swatches showing the original PiYG palette colors at corresponding positions along the x-axis.

Mmbostock
63% match
Loading thumbnail…

Color and Sized Legends with D3.js

This example demonstrates how to build a color legend with D3.js, using a categorical scale to map named domains like “apple” and “lemon” to red and yellow circles. The code leverages `scaleOrdinal`, `selection.merge`, and custom legend functions to position groups with spacing, adding text labels offset from each circle. It renders as SVG with a static dataset defined inline, showing the legend’s interactivity through enter, update, and exit selections. The visualization also includes sample population data from a CSV file, though it is not actively displayed in the main legend.

Yyouer
62% match
Loading thumbnail…

D3 color experiments

This example showcases color scales by displaying a series of color swatches as text labels, each filled with a distinct color derived from a linear scale spanning green, purple, and teal. It also renders the minimum temperature from a San Francisco weekly temperature CSV dataset. Built with React and D3 v7, the visualization uses `d3.scaleLinear` for color mapping, `d3.csv` for data loading, and SVG text elements to render the colors against a black background.

JJames Rhodes
62% match