Focus + Context Scatter Plots
✓ Published0🌍 Public
CCurran Kelleher
Last edited Sep 13, 2015
Created on Sep 13, 2015
This example demonstrates focus+context area charts using D3.js, with a linked brush that filters a detailed view. The main chart (focus) displays the full dataset as a filled area, while a smaller context chart beneath it shows the same data. When a brush is dragged across the context chart, it defines a time interval that automatically updates the focus chart's x-axis domain, enabling zooming and panning. The implementation uses Chiasm components for reactive data flow, with the brush interval acting as a shared state between the two views. The visualization effectively illustrates how brushing and linking can provide both overview and detail in time-series data exploration.
AI-generated descriptionFocus + Context Area Charts using Chiasm.
Draws from
<!-- Start of SimpleHitCounter Code --> <div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=1950975&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->