Skip to main content
SimilarExport ZIP
100%

reflectivity - colors

✓ Published2🌍 Public
Aalexis
Last edited Aug 7, 2024
Created on Aug 6, 2024
Forked from advance-setup-2

This visualization depicts a scatter plot of data points positioned by x and y coordinates, colored by a p_slowness value using a sequential color scale with the `d3.interpolateTurbo` interpolator. The plot includes x and y axes with labels, a color legend, and density contours computed via the `d3.contourDensity` API, rendered as stroked paths using `d3.geoPath`. It is built with the D3 library version 7.9.0, using an SVG rendering approach with a responsive resize observer.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

reflectivity - condurs

This scatterplot visualization displays seismic wave slowness data, mapping the x and y coordinates of each sample point with the p-slowness value encoded through a continuous color scale. The plot is rendered as SVG, with a gray inner rectangle framing circular points that vary in color from the turbo interpolator. Density contours are overlaid using d3.contourDensity and d3.geoPath, providing a visual summary of point concentration. A color legend with discretized value ranges is generated, drawing on d3.scaleSequential and d3.extent, while the data originates from a static array of geophysical measurements.

Aalexis
86% match
Loading thumbnail…

reflectivity - condurs

A scatterplot of seismic reflectivity data maps x/y sample positions, with each point colored by its P-wave slowness value. A 30-level density contour overlay, computed via `d3.contourDensity` and rendered as SVG paths with `d3.geoPath`, highlights clusters in the point distribution. The visualization uses `d3.scaleLinear` for axes, `d3.scaleSequential` with `interpolateReds` for color encoding, and `d3.axisBottom`/`axisLeft` for ticks. The background rectangle and circles are drawn with D3 joins.

Aalexis
84% match
Loading thumbnail…

reflectivity - condurs -2

This visualization displays the positions of data points on a scatterplot, overlaid with a density contour map that uses logarithmic color scaling to represent varying levels of point concentration. The underlying data is rendered as SVG, with axes labeled "X Axis Label" and "Y Axis Label". The code relies on d3's `scaleLinear`, `contourDensity`, `geoPath`, `scaleLog`, and `axisLeft`/`axisBottom` to generate the contours and axes, while a `ResizeObserver` ensures the visualization remains responsive to container resizing.

Aalexis
82% match
Loading thumbnail…

Fork of reflectivity - condurs - 3

This visualization displays the trajectory of points with varying phi and theta angles, mapped to x and y coordinates, with a density contour overlay that animates in progressively. The color of the contours reflects the selected slowness value (p, s, or t) chosen via a dropdown menu. The visualization uses D3.js libraries including `contourDensity`, `geoPath`, `scaleLog`, and `transition` to render the SVG paths and smoothly animate their appearance. The data comes from a precomputed `data_xy` array, and the square plotting area is bounded between -1.5 and 1.5 on both axes.

Aalexis
77% match
Loading thumbnail…

dv.34 - snazzy scatter plot: w/ color legend

This scatter plot visualizes the Iris flower dataset, displaying four numeric measurements (sepal and petal length/width) on the X and Y axes with interactive dropdown menus for selecting which attributes to compare. Species are encoded through a color ordinal scale with a legend in the right margin, and each point includes a hover tooltip showing the species and coordinate values. Built with React and D3 v6, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, rendering as SVG circles.

Zzach b.
70% match
Loading thumbnail…

SPAC Interactive Color Legend

This interactive scatterplot displays CSS named colors as a radial burst, with a color legend that highlights matching data points on hover. The visualization uses D3 utilities for data loading and scales (scaleLinear, scaleOrdinal, extent, max), while React components render the SVG marks, axes, and interactive legend. Users can select different attributes from dropdown menus to change the x and y axes, and hovering over a legend item fades non-matching points to 30% opacity. The data comes from a CSV file loaded asynchronously via D3’s csv function.

Ppnlinyz
69% match
Loading thumbnail…

Scatter plot with interactive color legend

This interactive scatter plot visualizes the Iris dataset, showing relationships between flower measurements selected via dropdown menus. A color legend on the right highlights points by species, dimming all other data when a species is hovered. Built with React and D3 v7, the visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and renders SVG circles with tooltips. The dataset is loaded as CSV and parsed into numeric values for plotting.

AAlex Stulov
69% match
Loading thumbnail…

D3 scatter plot with react

This React-based scatter plot demonstrates animated data updates with D3.js. The visualization renders seven circles with distinct colors and sizes, positioned by x/y coordinates, with axes labeled X and Y. Data updates trigger a button click, which initiates D3 transitions using `transition().duration(1000).ease(easeLinear)` for enter animations and faster transitions for updates, while exit animations shrink circles to zero radius. The SVG rendering uses `scaleLinear`, `axisBottom`, `axisLeft`, and `selectAll('circle').join()` for binding data to DOM elements.

JJulien Tremblay
69% match