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.
AI-generated descriptionFocus + Context Scatter Plots 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=1950330&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div> <!-- End of SimpleHitCounter Code -->







Comments
Sign in to join the discussion.