{"version":"1.0","type":"rich","title":"React Starter","description":"This example demonstrates how D3’s data-join pattern can be used within a React application to render circles that change color based on value. It shows a minimal setup where two arrays of numbers are passed to an `updateVis` function, which appends circles to an SVG using `d3.select`, `selectAll`, and `enter`. Each circle’s radius and vertical position are fixed, while horizontal placement is calculated from its index. Circles with values greater than 30 are filled blue, otherwise red, using D3’s `attr` method. The code relies on React 16.10, D3’s `select` and `range`, and a bundled JavaScript file.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/6f82af1302604b67ab2f47e1852d2f71?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}