{"version":"1.0","type":"rich","title":"Bind data to html with d3","description":"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.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/5ec6296c16c04227bf92a817d6ba4595?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}