Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Bind data to html with d3

Public visualization

Viewing a saved revision (read-only)

cc4855cfc4f944f7a19baebda5dd2ef3

Bind data to html with d3

1 star4🌍 Public
LLaurens
Last edited Oct 30, 2020
Created on Nov 10, 2019

This example demonstrates how to bind external JSON data to SVG elements using D3. The code loads eye color and gender data from a GitHub gist, filters and transforms the entries into valid hexadecimal colors, then sorts them by blue channel value. It binds the data to circles, positioning them horizontally based on their index and coloring each fill with the corresponding eye color. The example uses `d3.json` for data loading, `d3.select` for DOM selection, and the data join pattern with `enter()` and `append()` to create circles without using any scales.

AI-generated description

Bind data to HTML using d3

This is a basic example that doesn't use scales