Skip to main content
SimilarExport ZIP
100%

ColorBrewer

✓ Published0🌍 Public
NNita
Last edited Apr 21, 2025
Created on Apr 21, 2025

This interactive dashboard presents three coordinated visualizations: a time-series plot of execution metrics, a ColorBrewer palette selector, and a bar chart of World Happiness rankings. The time-series chart uses d3.line and d3.scaleTime to render trends, with color-coded dots distinguishing TRUE/FALSE results. Clicking any palette swatch updates the happiness chart’s color scale via d3.scaleQuantize, which dynamically recolors the top-20 country bars. Tooltips appear on hover for both charts, built with D3 v7’s event handling and CSS transitions.

AI-generated description

Data Visualization Dashboard

This is a data visualization dashboard built with D3.js that displays various types of charts and visualizations.

Features

  • Time Series chart showing temporal data with result indicators
  • ColorBrewer palette visualization and selection tool
  • World Happiness Rankings bar chart with interactive tooltips

How to Use

  1. Clone the repository
  2. Open index.html in a web browser
  3. Explore the different visualizations

Data Sources

  • sample_ts.csv: Time series data with execution timestamps and results
  • whr_full.csv: World Happiness Report data with rankings and scores
  • colorbrewer.min.js: ColorBrewer color schemes for data visualization

Technologies Used

  • D3.js for data visualization
  • Modern CSS with Grid and Flexbox
  • Responsive design principles
MIT Licensed

Similar vizzes

Loading thumbnail…

Colorbrewer in D3

The example displays a visual index of color palettes, starting with D3’s built-in categorical scales (category10, category20, category20b, category20c) as rows of colored squares. It then iterates through all palettes from ColorBrewer via the external `colorbrewer` script, rendering each scheme’s largest available class count. The SVG visualization uses `d3.select` to append the graph, `d3.entries` to enumerate palettes, and `d3.keys` combined with `d3.descending` to determine the maximum color count per scheme.

AAlark Joshi
78% 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
77% match
Loading thumbnail…

Quick reference to ColorBrewer

This interactive reference visualizes all ColorBrewer palettes, displaying each as a row of color swatches that users can click to view the underlying color arrays. The page uses the `colorbrewer.min.js` library, which contains the palette data, and D3.js (version 3) to bind this data to the DOM, creating swatches via `d3.selectAll` and `d3.data`. Clicking a palette updates a text area with the JSON representation of its color values, providing a quick, hands-on way to explore sequential color schemes.

AAlark Joshi
76% match
Loading thumbnail…

Bonus ICE - Bar Chart

This example shows a 3D bar chart of the World Happiness Report data for selected countries, with each bar representing a country and its segments colored by social support, freedom, generosity, and perceptions of corruption. It uses the d3-x3d library to render the chart in X3DOM, a WebGL-based 3D viewer, while d3.v5 handles CSV parsing and data binding. The bars support hover highlighting, and the visualization is embedded in a React page with a pink background and tooltip styling.

Rrajasrilekkala
71% 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
71% match
Loading thumbnail…

Color in Data Visualization

This gallery example visualizes five fundamental color-scale patterns—sequential, diverging, categorical, highlight, and alert—through a grid of annotated mini bar charts. Each pattern shows how color encodes quantitative or categorical data, using palettes like blues for sequential, diverging browns and greens, and gray tints with accent colors for highlighting. The D3 v7 code uses `scaleLinear` and `scaleBand` to compute bar heights, while custom wrapping logic measures text via `getComputedTextLength`. The layout is fixed with responsive container sizing, and the visualization is based on concepts from "The Big Book of Dashboards."

CCurran Kelleher
71% match
Loading thumbnail…

Happiness Level Scatter Plot

This interactive visualization displays global happiness levels from 2004 to 2017, using data from the World Happiness Report 2017. It combines a line chart showing happiness trends over time with a map, allowing users to click on a country to see its specific happiness trajectory or select a year to view global distribution. Built with D3 v5, the visualization uses `scaleLinear`, `scaleTime`, `axisLeft`, and `axisBottom` to construct the charts, while SVG rendering handles the map and line paths. The interface includes a dropdown menu for year selection and color-coded points representing happiness scores.

CChooo4u
71% match
Loading thumbnail…

Wine/Happy Graph Take 2

This example presents two side-by-side scatter plots that compare wine production and consumption quantities against a selected variable—such as happiness, GDP, or social support—across countries. A dropdown menu allows viewers to switch the y-axis variable, updating both charts simultaneously for comparison. Built with React and D3.js v6, the visualization uses `d3.select`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render axes and circles with animated transitions. Hovering over a point triggers a tooltip displaying the exact quantity and selected variable value.

Kkaijavanzante@gmail.com
70% match