Fork of reflectivity - condurs - 3

100%

Fork of reflectivity - condurs - 3

✓ Published0🌍 Public

Last edited Aug 10, 2024

Created on Aug 9, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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

79% match

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

78% match

Loading thumbnail…

reflectivity - colors

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.

Aalexis

77% 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

77% match

Loading thumbnail…

Fork of Old Faithful Contour Plot

This interactive contour plot visualizes the Old Faithful dataset, showing the density of eruption and waiting times through colored bands. The visualization displays contours rendered as filled SVG paths using `d3.geoPath`, with colors mapped from a sequential greens scale. Users adjust the density bandwidth by moving their mouse across the plot, which triggers a re-render of the contour data via `d3.contourDensity` and `d3.select` event handling. Axes and labels are drawn using `d3.axisBottom` and `d3.axisLeft`, and the density estimate uses a Gaussian kernel with a bandwidth that ranges from 0 to 40 pixels as the mouse moves horizontally.

PPioustu

73% match

Loading thumbnail…

Fork of Old Faithful Contour Plot

This visualization shows the Old Faithful dataset as a contour plot, with eruption time on the x-axis and waiting time on the y-axis. The density of data points is represented through filled contour regions using a sequential green color scale. The code uses d3-contour’s `contourDensity` to compute the contours, and `d3.geoPath` to render them as SVG paths. Axes are drawn with d3.axisBottom and d3.axisLeft, and moving the mouse dynamically updates the bandwidth of the density estimation, recomputing the contours in real time.

CCristina Macaraig

73% match

Loading thumbnail…

Fork of Density plot

This visualization shows density contours of eye-tracking fixation points from the Old Faithful dataset, overlaid on a map of Antwerp's metro system. The contour plot highlights areas of concentrated gaze, with colors ranging along a diverging PiYG scale to indicate varying density values. The code uses `d3.contourDensity` to compute the contours and `d3.geoPath` to render them as SVG paths. Interactive mouse movement dynamically adjusts the bandwidth of the density estimation, updating the contour shapes in real time. The data, loaded from `data.csv` via `d3.csv`, includes fixation coordinates and durations for multiple participants and stimuli.

MMinh Nguyen

70% match

Loading thumbnail…

Fork of D3 Selection Exploration

This visualization demonstrates a dynamic scatterplot of colored circles that move and resize over time. Animated via a 60-frames-per-second interval, the circles' positions, radii, and hues are recalculated continuously. The implementation uses D3.js selection and join APIs, specifically `d3.select`, `d3.range`, and `.join('circle')`, to manage SVG circle elements. The `vizData` function updates circle attributes through `selection.selectAll('circle').data(data).join('circle')`, while `makeData.js` generates data with sinusoidal motion and color interpolation using `d3.interpolateRgb`. The SVG output is rendered directly to the browser window.

Jjsoudeer

69% match