{"version":"1.0","type":"rich","title":"MasteringD3js_Ch4.1","description":"This example demonstrates three stages of building an interactive slider control using D3.js v5. It first shows a draggable circle using the `d3.drag` behavior, then constructs a reusable slider component with a linear scale and drag handler, and finally binds the slider to update data. The SVG rendering approach uses `d3.select` and `d3.scaleLinear` to map domain values to pixel positions, with circles and lines as visual elements. The code reflects a migration from v3 to v5, adapting drag event handling from the older API.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/9cf9c2fb2c554f769bfaef748f6c9532?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}