{"version":"1.0","type":"rich","title":"Load data with d3","description":"This example demonstrates loading a CSV dataset of CSS named colors and rendering each color as a horizontal bar. The visualization shows how React state manages asynchronous data loading with d3.csv, displaying a loading message until the data arrives. Each row becomes a styled div element with its background color set from the ‘RGB hex value’ column. The code combines React 18’s useState hook with d3.v7’s csv parsing, while a separate message utility calculates dataset size, row count, and column count from the parsed data.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/649067250b094bb9983c6640bc1f4065?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}