{"version":"1.0","type":"rich","title":"D3 scales() scaleThreshold() in action","description":"This example demonstrates how d3.scaleThreshold() maps continuous numeric values to discrete color bins. A d3.scaleLinear() positions 60 rectangles along the x-axis, while the threshold scale assigns one of four fill colors—#ccc, lightblue, orange, and #ccc—based on domain cutoffs at 0, 50, and 100. The SVG rendering uses d3-selection’s join() method to bind data generated by d3.range(-10, 110, 2). The result visually highlights the color transitions at the specified threshold boundaries.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/e6744f1bad2048c695601b3a962bfcc5?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}