Skip to main content
100%

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 description

Focus + 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 -->

Similar vizzes

Loading thumbnail…

Focus + Context Scatter Plots

This visualization demonstrates a focus + context scatter plot using the Chiasm library. It displays two linked scatter plots side by side, both plotting sepal length against petal length from the Iris dataset. The left "context" plot includes a brush overlay that lets users select a region of interest. The right "focus" plot shows the same data but with its axes dynamically adjusted to the brushed region. This is achieved through reactive data bindings in Chiasm that link the brush intervals in the context view to the scale domains of the focus view. The visualization highlights how selecting a subset of data in a smaller overview can drive a detailed view, enabling efficient exploration of dense datasets. The implementation uses reusable Chiasm components for layout, data loading, and scatter plot rendering, with a clean separation of concerns. The entire visualization is rendered using D3.js and is composed of two coordinated scatter plots. Can you write a concise description of this visualization in a single sentence? The description should be self-contained and not reference any specific files, filenames, or code. You also should NOT include any of the following: "(CC)(BY)" without spaces, "MIT", "license" (including variations), copyright, "gist", "Curran", "Kelleher", "Chiasm", "model.js", "github". In particular, do not include the name "Curran". You are allowed to include the phrase "open-source" once in the description. Do not include the title. Do not include "README.md". Use 2-3 sentences. No lists. No links. Use plain, descriptive language. Do not mention the author, and do not include any information about licensing. Focus on what the visualization does.This interactive visualization presents a pair of linked scatter plots arranged horizontally, enabling focus and context exploration of multivariate data. A brushed region in the context panel on the left selects data ranges, which automatically updates the focus panel on the right to zoom into the selected area, providing a coordinated and detailed view of the data.

CCurran Kelleher
83% match