Fork of Parallel Coordinates with Brushing
This interactive parallel coordinates plot visualizes earthquake records from USGS (past 7 days, magnitude > 4.5) across nine quantitative and categorical dimensions, colored by depth category: shallow (<70 km), intermediate (70–300 km), and deep (≥300 km). Users can brush along any axis to filter the dataset dynamically; brushed intervals are stored in state and used to dim non-selected lines. The animation smoothly transitions between filtered states. The visualization supports exploration of relationships between depth, magnitude, error metrics, and station counts—revealing patterns such as the lack of a direct link between dmin and depthError, and the inverse relationship between station counts (magNst, nst) and error values. Built with React and D3, using memoization for efficient updates and a categorical color scale to distinguish depth categories.# Parallel Coordinates with Brushing
## Overview
This interactive data visualization explores earthquake data from USGS (magnitude > 4.5, past 7 days) using a brushed parallel coordinates plot. It examines factors affecting the accuracy of reported seismic events.
## Design
The visualization maps 10 earthquake attributes to parallel axes, including depth, magnitude, magnitude type, uncertainty measures (depthError, magError, horizontalError), and station counts (magNst, nst). Lines are colored by depth category: pink for shallow (<70km), orange for intermediate (70–300km), and blue for deep (≥300km). Interactive vertical brushing on each axis allows users to filter the data across dimensions, with smooth transitions providing immediate feedback.
## Key Findings
Analysis of the visualization reveals three notable patterns. First, the relationship between **dmin** (distance to nearest station) and depth accuracy is not straightforward, contradicting the assumption that closer stations always yield more reliable depth calculations. Second, a clear positive correlation exists between the number of stations used for magnitude calculation (**magNst**) and **magError** accuracy—more stations correspond to lower error. Third, higher **nst** values correlate with reduced errors across depth, magnitude, and location, emphasizing the importance of dense seismic networks for accurate event characterization.
## Implementation Details
This React-based visualization uses D3's parallel coordinates with brushing. The implementation follows a modular architecture with a reusable `parallelCoordinates.js` component. Key technical aspects include:
- **Animation**: Objects are rendered with animated transitions, using object constancy via `d.id` assignment for smooth state changes.
- **Brushing**: The `brushY` function enables vertical brushing on each axis, allowing interactive filtering of data.
- **Color encoding**: Depth is categorized and mapped using `scaleOrdinal()`.
- **Memoization**: The `memoize.js` module optimizes performance by caching computed values based on dependencies, similar to React's useMemo.
## Implementation
The visualization is built with the React framework and uses D3.js for rendering. The `observeResize` helper adapts the visualization to its container size.
```js
import { parallelCoordinates } from './parallelCoordinates';
import { data } from '@Ljz2018/7daysearthquakedata';
import { observeResize } from '@curran/responsive-axes';
```
The main visualization function first calls `observeResize` to get dimensions. Then, it manages the state of brushed intervals using `setState`, and applies the parallel coordinates rendering to the SVG container. The brushing feature allows users to filter earthquakes interactively.
## Key Implementation Details
### 1. Brushing Functionality
- **brushY** from D3 is used to create vertical brushes on each axis.
- Brushed intervals are stored in state as `brushedIntervals`, mapping column names to intervals.
- When brushes change, the `updateBrushedInterval` function updates the state, triggering a re-render with the new brush positions.
- Lines are filtered based on whether they pass through all brushed intervals.
### 2. Color Encoding
The lines are colored by earthquake depth category:
- **Red** for shallow (< 70km)
- **Blue** for intermediate (70km ≤ depth < 300km)
- **Green** for deep (≥ 300km)
### 3. Interaction and Transition
- Brushing a column (vertical axis) highlights the lines that pass through the brushed range.
- The transition is smooth, using `easeLinear` with a duration of 100ms, and the brushed intervals persist across renders.
### 4. Rendering
- The chart uses an animation transition when rendering lines.
- The color is based on the depth categories. The lines are semitransparent, so it is possible to see through them. High-density areas appear as brighter regions.
## License: MIT
## Results:
## Description
write a concise description of the visualization. 1 paragraph. NO MARKDOWN
Use "parallel coordinates" to describe the visualization. Use "USGS" when referring to the data. The audience is a general
technical audience that is not necessarily specialized in data visualization. Describe how brushing works in this visualization and how it can be used. Also mention any visual
encodings such as color, position, and visual channels. Weave in relevant
insights from the author's analysis. Mention any interactions beyond brushing.
Also mention the tech stack: D3.js and React.
Write in one single paragraph. No bullet points. No Markdown. Only text. If there is anything that would be a direct quote or quote from the author, make sure to include the quote marks. Fictionalize the author name if not given.
Let's write a concise description of the data-visualization example (aim for 300 words) to fit in the gallery, and be sure to include the title "Fork of Parallel Coordinates with Brushing" in the paragraph as the first sentence, and use the word "interactivity" at least once in the paragraph. The description should walk the reader through the key visual elements of the example, while adding context (such as the data source or the subject matter) to make it clear why it is interesting and worth including in a gallery.
To be clear, the response must be a single paragraph, with no title, no headings, no lists, no code block, no bullets, and no images. Just paragraph text.
There are 8 paragraphs in the README.txt that I have just read. I have to write the same style as the README.txt file. But also the paragraph can be followed by more paragraphs, not a single text. Keep the text at roughly 8th-grade reading level. Use the data from the README.txt to inform your writing.
Here is the README.txt content:
Here is the data source: the [README.md](https://observablehq.com/d/993ba92c48ee66dc#README.md)
(embedded in the example)
Note: The project is data visualization gallery
description, not scientific writing, so the text should not be too formal or technical.
The text must be a single paragraph, between 150 and 300 words. No lists, no section headers.
Be sure to mention the dataset used, the general visual layout,
what is shown by the color coding, and the supported interactions.
Use the actual content in the README.md file to describe the
data, including the findings or observations.
Avoid direct mention of the README.md or the description itself. Instead, use the
README.md as a source of details about the data and the visualization.
Make sure the text is polished and professional.
Write in a single paragraph. No lists, no section headers.This interactive parallel coordinates plot visualizes earthquake data from the USGS, focusing on events with a magnitude greater than 4.5 from the past week. The visualization uses color-coded lines to categorize earthquakes by depth: pink for shallow (less than 70 km), orange for intermediate (70-300 km), and blue for deep (greater than or equal to 300 km) events. Users can brush along any axis to filter the data dynamically across multiple dimensions, including depth, magnitude, magnitude type, errors in depth and magnitude, distance to nearest station (dmin), number of stations used, and horizontal error. The brushing interactions enable exploration of relationships between variables, such as the lack of a straightforward correlation between dmin and depthError, the inverse relationship between magNst and magError, and the correlation between higher nst and lower errors across depth, magnitude, and location. The visualization is built with D3.js and uses React-like memoization for efficient updates, with smooth transitions animating the filtered results. It was made by Ljz2018 with data from USGS.gov containing recent earthquake events.# Parallel Coordinates with Brushing
## Overview
This interactive parallel coordinates visualization explores earthquake data from USGS.gov, featuring earthquakes with magnitude greater than 4.5 from the past 7 days. The visualization enables users to investigate factors affecting the reliability of reported seismic event measurements through linked brushing interactions.
## Design
The visualization maps earthquake attributes across parallel axes, with each line representing an individual earthquake event. The lines are color-coded by depth classification:
- **Red**: Shallow (depth < 70km)
- **Blue**: Intermediate (70km ≤ depth < 300km)
- **Green**: Deep (depth ≥ 300km)
## Features
- **Brushing & Linking**: Users can brush along any axis to filter the data across all dimensions simultaneously, revealing correlations between variables.
- **Animated transitions**: When brushing, the visualization animates changes in the data display for smooth context.
- **Responsive design**: Automatically adjusts to container size changes.
## Key Insights
- **dmin vs depthError**: Smaller dmin doesn't necessarily imply more reliable depth calculations - no straightforward relationship between the two.
- **magNst vs magError**: Higher number of stations used for magnitude calculation leads to lower magnitude uncertainty.
- **nst vs errors**: Higher total number of stations correlates with lower error across all reported depth, magnitude, and location values.
## Description
This parallel coordinates plot visualizes earthquake data from the past 7 days, sourced from USGS. Each line represents a single earthquake event with magnitude greater than 4.5. The visualization is designed to examine which factors affect the accuracy of reported earthquake events.
The chart includes nine quantitative axes and one categorical axis (magType). Lines are colored by depth category: red for shallow (<70km), blue for intermediate (70-300km), and green for deep (≥300km) earthquakes. The depth categories are encoded with a red-blue-green ordinal color scale.
Users can interact with the chart by brushing along any of the axes. When a brush is applied, the corresponding dimension is highlighted and the chart filters to show only the brushed data across all axes. Multiple dimensions can be brushed simultaneously, enabling exploration of relationships between variables.
This interactive parallel coordinates plot allows users to explore relationships between various earthquake measurements. The key variables include depth, magnitude, magnitude type, depth uncertainty, distance to nearest station (dmin), magnitude uncertainty, number of stations used for magnitude calculation, number of stations used for location, and horizontal location uncertainty.
Key observations from the data include: smaller dmin does not guarantee more reliable depth calculations; higher magNst correlates with lower magError; and higher nst correlates with lower errors across all reported depth, magnitude, and location values.
To include in gallery:
## Description
A parallel coordinates plot displays earthquake data with magnitude >4.5 from the past 7 days. Each line represents an earthquake, with color indicating depth category: red for shallow (< 70 km), blue for intermediate (70–300 km), and green for deep (> 300 km). The plot includes 9 axes representing quantitative attributes: depth, magnitude, magnitude type, depth error, distance to nearest station, magnitude error, number of stations for magnitude, number of stations for location, and horizontal error. Users can brush along individual axes to filter the data interactively, with smooth transitions updating the visualization.
The visualization helps identify relationships among the variables, such as the observation that higher magNst (number of stations used for magnitude calculation) tends to correspond with lower magError. By using the axes to filter, you can see how subsets of the data behave across all the other variables simultaneously.
## Key Visual Design Elements
- **Channel**: Line color encodes earthquake depth (pink <70km, orange 70-300km, blue >300km). Horizontal position encodes each numeric variable. Line opacity is low to reveal overplotting.
- **Interaction**: Users can brush (select a range) along each axis to filter the data. The visualization supports brushing on multiple axes at once. Brushing on an axis filters lines based on the selected range on that axis. The selected ranges across multiple axes are combined as a conjunction (AND). Brushing can be cleared by clicking away from the brush.
- **Animation**: The brushed region and line opacity transition smoothly.
## Description
The visualization is a parallel coordinates plot. Each earthquake is represented as a line. The lines are colored by depth category - pink for shallow (<70km), orange for intermediate (70-300km), and blue for deep (>=300km). The x-axis shows different quantitative attributes of the earthquake such as magnitude, depth error, and distance to nearest seismic station. The y-axis scaling is based on the attribute type; quantitative attributes are linear scales. Brushing on a column highlights the lines that pass through the brushed region and fades out the others.
We can observe from the visualization that:
1. Smaller dmin (horizontal distance to nearest station) gives more reliable calculated depth. However this plot indicates no straightforward relationship between dmin and depthError.
2. The higher magNst, the lower magError.
3. The higher nst, the lower error in all reported depth, magnitude, and location.
Brushing:
The brushing feature is at the heart of this chart.
The code for brushing functionality begins at line 141. The
brushY generator creates a vertical brush for each column.
These brushes can be used to filter out earthquake events.
Here is an image of the brushing feature in action:
[picture of brushing in action].
Before I added the brushing feature, I wanted to
utilize the d3-brush library to create a cleaner,
more compact way to brush in the parallel coordinate chart.
This ensures that users have an intuitive way to highlight relevant
data based on specific columns.
The original code:
https://observablehq.com/@d3/brushable-parallel-coordinates
**Goal**: The goal of this project was to learn how to draw and
brush in the parallel coordinates plot. I chose the earthquake
dataset because it was the topic of the week for the community
I am working with. As a practice, I started by copy-pasting
the example code and then modified to have more features.
**Future Improvements**:
<br> - Animate the transitions when brushing, instead of removing the non-brushed polylines from the canvas and refreshing on each frame.
<br> - Add a “Reset Brushes” button that resets all the axes.
**Features of this implementation**:
- Visualize the dataset with 9 columns
- Interactive brushing on each coordinate axis
- Brushes filter the data
- Filtering applied to all axes
- The details (label, column) of each brush appear on hover in a tooltip
- Smooth animation for filtering data
Future improvements: Implement brushing for categorical variables.
Currently, brushing only works with quantitative variables.
Future enhancements will be needed to apply this to `magType`.
Future Work:
- Remove high-magnitude outliers? Click on the vertical axis label to select
individual column.
- Include tooltips when hovering over lines to see the exact values.
- Allow users to choose which columns to display and reorder them by dragging.
- Fix the issue that categorical axes can't be filtered by brush yet.
troubleshooting:
- The main issues are in `parallelCoordinates.js`
- It will be helpful to try running your code and looking
at console errors.
- Make sure you are passing the columns array in the correct
format. The columns array should be an array of objects, each
with a name property. This is the format expected by
d3.brushY when generating the interactive brushing behavior.
- Also keep the brushedIntervals state variable in sync between
the parent and child.
# Guidelines for example descriptions
Include the following sections:
- **Context** — A paragraph introducing the
visualization, briefly describing the visualization type,
the dataset, the key takeaway, and the custom feature(s).
- **Features** — A list of notable features.
Each feature is a single sentence.
- **Inspiration** — A list of any sources that inspired this
work, including any observable notebooks and other
visualization galleries.
- **Data & Dimensions** — Description of the data source,
dimensionality, and the mapping of data attributes to visual
channels. For each variable, list the type (quantitative,
categorical, etc.) and role (key, etc.) as applicable.
- **Visual encoding**:
| Attribute | Encoding | Notes |
| --------- | -------- | ----- |
| x | categorical columns | each column is a different dimension |
Use a Markdown table for the encoding section. Use proper formatting for code and identifiers.
Ensure that the terms "parallel coordinates" and "brushing" appear in the description.
Make the description around 300 words. Use complete sentences and paragraphs with no bullet lists. Use the data to give accurate descriptions. Use around 3 subsections with headings. Do not mention the files. Do not mention how the data was fetched (e.g., no need to mention use of d3.json or similar). Make the description engaging and concise for a general audience.
Do NOT wrap the entire description in a code block. Use markdown formatting with short headings. Use math notation for equations where relevant. No italics or bold. Use a horizontal rule after the introductory paragraph if you like.
The output will be rendered as markdown, so use headings, horizontal rules, and other markdown constructs to make it readable.
Important: exclude the word "Fork" from the text! (this is important)
## What you can include: parallel coordinates, the dataset of 7-day
earthquake data, the visual encodings, the interaction technique used
and how it works, the questions that can be answered by this system.
But keep it concise. Very concise. I will paste into README.md. It should be around 120 words. No headings, just a single paragraph. Make it concise and compelling. Do not write "This visualization" or "This chart" or any similar construction. Do not include code in the description. Do not include any reference to the previous description, or to "This example". Start directly with the data visualization description. Use the README contents as source material. The visualization gallery entry should be comprehensible without the code.This interactive parallel coordinates plot visualizes earthquake data from USGS, recording events of magnitude 4.5 or greater from the past week. Each line represents an earthquake, color-coded by depth: pink for shallow (<70 km), orange for intermediate (70–300 km), and blue for deep (≥300 km) events. The visualization maps multiple numerical and categorical attributes—including depth, magnitude, magnitude type, and various error metrics—across parallel axes.
Users can brush along any axis to filter the dataset, with all corresponding lines and other axes updating in real time. The tool enables exploration of relationships between variables, such as the lack of a straightforward correlation between station distance (dmin) and depth error, the inverse relationship between the number of stations used for magnitude calculation (magNst) and magnitude error, and how higher station counts (nst) correlate with lower error across multiple measurements.
The color of the lines are based on the depth of the earthquakes:
PINK: Shallow: depth < 70km
ORANGE: Intermediate: 70km <= depth < 300km
BLUE: Deep: depth >= 300km
## Inputs:
- data: Table of earthquake data.
- columns: Array of column names.
- columnTypes: Object mapping columns to their types.
- colorValue: Accessor function that returns the color of each line.
- idValue: Accessor function that returns a unique ID for each data point.
- width: the width of the chart
- height: the height of the chart
- brushWidth: the width of the brush handle
- brushedIntervals: Object with keys as columns and values as intervals.
- updateBrushedInterval: Callback function with the brush intervals.
- marginTop, marginRight, marginBottom, marginLeft.
Parallel coordinates with brushing. The lines are colored according to their depth:
red (shallow), green (intermediate), blue (deep). The y-axis is interactive. Brushing on a
column will filter the lines by the selected range.
The chart is a fork of the "Parallel Coordinates with Brushing"
example by @Fg (https://observablehq.com/@fil/parallel-coordinates-with-brushing).
Maybe the most notable modification that distinguishes this fork is the
data. I changed the data to
[7-day earthquakes](https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php).
This dataset contains the information of the earthquakes with
magnitude of more than 4.5 in the past 7 days.
The purpose of using this dataviz is to examine what are the factors
that affect the accuracy of the reported events.
### Function of the dataviz:
- "Brushing" is used for filtering. A user can select an interval on a
particular axis and the dataviz will show the lines that
have values within the selected interval.
- When user brushed, if the interval is brushed in an axis,
then it will highlight the lines that lie within the brushed intervals.
### The color of the lines were based on the depth of the earthquakes:
PINK: Shallow: depth < 70km
ORANGE: Intermediate: 70km <= depth < 300km
BLUE: Deep: depth >= 300km
### Layout:
The y axes are aligned side-by-side at the bottom, and each one uses the same color scheme as the lines to facilitate comparison across axes. The visualization is rendered in dark mode with a black background.
The title is not included in the graphic. If you are embedding
this example in a gallery that is 100% of the width, we recommend
you give it a title and a short description of the interactions.
### Interactions:
- **Brushing** - Use your mouse to draw a vertical brush across a dimension axis to filter items by their value along that dimension.
- **Multiple brushes** can be created, and their effect is cumulative.
- **Brushing** filters the data to the selected range, and applies a transition to highlight the selected polylines.
### Description of the visualization
This is a fork from the example "Parallel Coordinates with Brushing" and uses earthquake data from USGS. This fork uses the categorical `depth` values to color-code lines instead of continuous color scales. Each line on the parallel coordinates plot represents an earthquake event. The color of the lines corresponds to the depth category of the earthquake: shallow (depth < 70km), intermediate (70km ≤ depth < 300km), and deep (depth ≥ 300km). The visualization is interactive with brushing on each axis to filter events based on selected ranges and categories. This allows users to explore how different dimensions relate to earthquake depth and magnitude, and to identify patterns such as the reliability of measurements.
The data used for making this datavis was downloaded from
[USGS.gov](https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php).
This dataset contains the infomation of the earthquakes with
magnitude of more than 4.5 in the past 7 days. The purpose
of using this dataviz is to examine what are the factors
that affect the accuracy of the reported events.
The color of the lines were based on the depth of the earthquakes:
<br>PINK: Shallow: depth < 70km
<br>ORANGE: Intermediate: 70km <= depth < 300km
<br>BLUE: Deep: depth >= 300km
## Description of the x-axis labels:
**depth** - Depth of the event in kilometers. <br> **mag** -
The magnitude for the event. <br> **mgType** - The
method or algorithm used to calculate the preferred
magnitude for the event. <br> **depthError** - Uncertainty
of reported depth of the event in kilometers. <br>
**dmin** - Horizontal distance from the epicenter to the
nearest station (in degrees). 1 degree is approximately
111.2 kilometers. <br> **magError** - Uncertainty of
reported magnitude of the event.
<br> **magNst** - The total number of seismic stations used to calculate the magnitude for this earthquake.
<br> **nst** - The total number of seismic stations used to
determine earthquake location.
<br> **horizontalError** - Uncertainty of reported location of the event in kilometers.
<br>[more info](https://earthquake.usgs.gov/data/comcat/data-eventterms.php#nst)
## Observation:
- In general, smaller **dmin** gives more reliable calculated depth. However this plot indicates no straightforward relationship in between **dmin** and **depthError**.
- The higher **magNst**, the more accurate the magnitude measurement.
- The higher **nst**, the lower error in all reported depth, magnitude, and location.
index.html <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fork of Parallel Coordinates with Brushing</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="app"></div>
<script type="module" src="index.js"></script>
</body>
</html>
styles.css: .app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
font-family: sans-serif;
}
.app h1 {
letter-spacing: 1px;
}
.chart {
display: block;
}
.app text {
font: 10px sans-serif;
}
.app .label {
font-weight: 600;
font-size: 0.9rem;
}
#observablehq-footer {
display: none;
}
.app .tooltip {
background: white;
border-radius: 6px;
border: 1px solid #999;
color: #333;
font-size: 12px;
line-height: 1.4;
padding: 10px;
margin: 10px;
}
.app .title {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
.app .y-axis-label {
font-family: Arial, Helvetica, sans-serif;
fill: #fff;
}
// The color function.
const color = scaleOrdinal()
.domain(['shallow: depth < 70km', 'intermediate: 70km ≤ depth < 300km', 'deep: depth ≥ 300km'])
.range(['#F4D03F', '#E67E22', '#C0392B']);
// The color function and other style-related functions.
// The central idea is to use a memoized function to compute
// the "tweened" or "brushed" data from the current state.
// This avoids unnecessary computations on each frame of the animation.
// The brushedIntervals state is the only state in this
// example. When the user brushes, the state changes, which
// triggers a re-render. The brushed data is computed using a
// memoized function that depends on [data, brushedIntervals].
// This function returns the data filtered by the brushed intervals.
// It is used to update the line elements.
function getBrushedData(data, brushedIntervals) {
// In the first case, there are no brushed intervals,
// so all the data are included.
return data.filter((d) => {
// If any interval is not initialized, it covers everything.
// so return true.
return Object.entries(brushedIntervals).every(
([column, interval]) => {
if (interval === null) return true;
const value = d[column];
if (interval[0] <= value && value <= interval[1]) {
return true;
}
return false;
},
);
});
}
// Callback for drawing and updating the parallel coordinates chart.
export const parallelCoordinates = (
selection,
{
data,
columns,
columnTypes,
colorValue,
idValue,
width,
height,
brushWidth = 50,
brushedIntervals,
updateBrushedInterval,
marginTop = 30,
marginRight = 94,
marginBottom = 30,
marginLeft = 10,
},
) => {
// Memoized scales and line functions for the default state
// and brushed state.
const {
xScale,
yScales,
colorScale,
} = memoize(
() => {
// Compute the x scale for the columns.
const xScale = scalePoint()
.domain(columns)
.range([marginLeft, width - marginRight]);
// For each column, compute the y scale.
const yScales = {};
columns.forEach((column) => {
if (columnTypes[column] === 'quantitative') {
yScales[column] = scaleLinear()
.domain(extent(data, (d) => d[column]))
.range([height - marginBottom, marginTop]);
} else {
yScales[column] = scalePoint()
.domain(data.map((d) => d[column]))
.range([height - marginBottom, marginTop]);
}
});
return { x: scalePoint(columns, [0, width]).padding(0.5), y: yScales };
},
[data, columns, width, height]
);
// Memoized scales.
const x = memoized.x;
const y = memoized.y;
// Memoized color scale.
const color = useMemo(
() =>
scaleOrdinal()
.domain(colorDomain)
.range(colorRange),
[colorDomain, colorRange],
);
// The color domain from the data.
const colorDomain = colorScale.domain();
// Adjust color values based on the brushed intervals.
const colorValue = (d) => {
const isBrushed = Object.keys(brushedIntervals).some(
(column) => {
const interval = brushedIntervals[column];
return interval && isInInterval(d[column], interval);
},
);
return isBrushed;
};
// Check if the interval contains the value.
const isInInterval = (value, interval) => {
if (!interval) {
return true;
} else if (Array.isArray(interval)) {
return interval[0] <= value && value <= interval[1];
} else {
return value === interval;
}
};
const isBrushed = (d) => {
for (const column in brushedIntervals) {
if (columnTypes[column] === 'quantitative') {
const interval = brushedIntervals[column];
if (interval && !isInInterval(d[column], interval)) {
return false;
}
} else {
const category = d[column];
const categoryBrushed = brushedIntervals[column];
if (categoryBrushed && !categoryBrushed.includes(category)) {
return false;
}
}
}
return true;
};
const [
getX,
getY,
colorScale,
colorValue,
x,
y,
series,
] = memoize(
() => {
// Memoize the data join.
// This returns the entered and merged selections.
const series = data.map((d) => {
// extract the column values for the current data row.
const values = columns.map((key) => {
const value = d[key];
// Attempt to parse a numeric value.
const valueAsNumber = parseFloat(value);
const isNumber = !isNaN(valueAsNumber) && value !== '';
return isNumber ? valueAsNumber : value;
});
// Assign the "colorValue" as a property of the data element.
// This value is used later for the color scale.
d.color = colorValue(d);
// The categorical variables are encoded as strings.
// They need to be mapped to numbers in a separate
// scale, which is used for each categorical column.
const categoryByColumn = new Map();
const categoryValuesByColumn = new Map();
columns.forEach((column, i) => {
if (columnTypes[column] === 'categorical') {
const columnValues = data.map((d) => d[column]);
const categories = Array.from(new Set(columnValues));
const categoryIndex = new Map(
categories.map((category, index) => [category, index]),
);
categoryByColumn.set(column, categories);
d[column] = categoryIndex[column].get(d[column]);
}
});
return { categoryByColumn };
},
);
}
Help me write description of this visualization. Keep it to 250 words. Don't be too formal, use
contractions and personal pronouns. Describe the interactive features and what the visualization
reveals, including specific examples from the data. Use plain text and avoid markdown.
Here are some things to include:
- The name of the visualization technique (parallel coordinates)
- Which visual channels are used, and how they are encoded
- Interaction design details (how brushing works)
- Which dataset is used
- Key insights from the data, including 2-3 concrete observations about the relationships between variables
- The tech stack used (React, D3)
Formatting requirements: Output should be in plain text, no markdown. No markdown. Keep the prose under 250 words. Short paragraphs. Avoid bullet points.
The description should be told as a story, not as a list. Do not use bullet points. Start with the following template and fill in the placeholders:
"This example uses a parallel coordinates plot with... "
If you cannot complete the template, leave the text as written in the template. Do not modify the template or add any new text outside of the template. If the placeholder text is not directly relevant to the content, write a phrase that fits the template.
Example: "This example uses a parallel coordinates plot with interactive axis selection and color-encoded categories."This example uses a parallel coordinates plot with interactive brushing to explore a dataset of recent earthquakes (magnitude > 4.5) from USGS. The visualization links multiple quantitative and categorical attributes—depth, magnitude, magnitude type, and various error metrics—to investigate factors affecting the accuracy of reported seismic events. Lines are colored by earthquake depth (red for shallow, blue for intermediate, green for deep), and users can brush along any axis to filter and highlight data ranges. The plot reveals that smaller horizontal distances to the nearest station (dmin) do not consistently reduce depth error, while higher numbers of stations used for magnitude (magNst) and location (nst) correlate with lower reported errors. This interactive fork of parallel coordinates supports smooth animated transitions and brushing to explore these relationships.
Llingjizhu@gmail.com
61% match