ethanrampersaud@gmail.com

@eramp0112·8 public vizzes

Chord Diagram Using Graph Gallery Edited

This chord diagram visualizes flows between three groups (Jake, Sarah, and John) using a matrix of numeric values. The code uses D3 v4’s `d3.chord()` and `d3.ribbon()` to compute and draw the arcs and ribbons, with `d3.arc()` rendering the outer group segments in distinct colors. Mouseover tooltips display source and target names via a custom HTML overlay. The visualization is rendered as static SVG with no animation, though the tooltip transition is defined but not actively bound to mouse leave.

Aug 15, 2025

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates the Iris dataset, cycling through four numeric columns (petal_width, sepal_width, petal_length, sepal_length) every two seconds using `setInterval`. Each cycle re-binds the x-axis to a new column while keeping sepal_length on the y-axis, updating circles and axis ticks via `selection.join()`. The visualization uses d3.csv to load the data, `scaleLinear` for scaling, and `axisBottom`/`axisLeft` for axes, with SVG rendering styled using the Share Tech font.

Aug 15, 2025

Loading thumbnail…

Chord Diagram Using D3 (From Graph Gallery)

A chord diagram visualizes the flow of values among four named entities—Allen, Betty, Charlie, and Dennis—using a 4x4 matrix as input. The d3.v4 library renders the diagram in SVG, with colored arcs and ribbons where each ribbon’s color matches its source group. Interactive mouseover events trigger tooltips displaying the source and target names, while a fading transition animates tooltip opacity on mouseout. The chart relies on `d3.chord()` for layout, `d3.arc` and `d3.ribbon` for geometry, and inline event handlers for tooltip display.

Aug 14, 2025

Loading thumbnail…

Fork of Map Chart With D3 (From Graph Gallery)

This visualization displays the countries of the world as a green, SVG-based map. It uses a D3 Mercator projection via `d3.geoMercator` and renders borders with `d3.geoPath`. Overlaid on the map are purple connection lines, drawn as GeoJSON LineStrings, that link pairs of geographic coordinates. The map data comes from a remote GeoJSON file, while the connection data is loaded from a CSV, with the geographic paths and link lines rendered on an SVG canvas.

Aug 13, 2025

Loading thumbnail…

Dynamic Density Chart With D3 (From Graph Gallery)

This dynamic density chart displays the distribution of a variable using a kernel density estimate. An interactive slider allows the user to adjust the number of evaluation points along the x-axis, triggering a smooth animated transition of the density curve. The visualization is built with D3 v4, using SVG rendering for the chart and custom kernel functions (`kernelEpanechnikov`) to compute the estimate. Data is loaded from a remote CSV file.

Aug 12, 2025

Loading thumbnail…

Fork of Time Series Graph Using D3

This visualization shows a time series line chart of a numeric value over time, with a color gradient applied to the line that transitions from gold at the minimum value to blue at the maximum. The chart uses D3 v4 to load CSV data from a GitHub-hosted dataset, parse dates with `d3.timeParse`, and scale the x-axis with `d3.scaleTime` and the y-axis with `d3.scaleLinear`. The line is rendered as an SVG path using `d3.line`, with its stroke set to a `linearGradient` definition containing two color stops.

Aug 12, 2025

Loading thumbnail…

Histogram Using D3

This example shows a histogram of numeric price data loaded from a CSV file, rendered as an SVG bar chart using D3 v4. It uses `d3.histogram()` to bin the values into 70 thresholds, `d3.scaleLinear()` for both the x- and y-axes, and `d3.axisBottom()` and `d3.axisLeft()` to draw the axes. Each bin is drawn as a rectangle whose width and height are derived from the bin’s x0/x1 domain and the count of records in that bin. The data comes from a remote GitHub-hosted CSV, and bars are styled with a fixed fill color.

Aug 11, 2025

Loading thumbnail…

Fork of Pseudo Scatter Plot with D3

This example displays a scatter plot of seven circles positioned along a quadratic curve where each y-coordinate is the square of its x-coordinate (1, 4, 9, 16, 25, 36, 49). The visualization builds a full-viewport SVG via D3’s `select` and joined `join` operations, sizing it to the container’s dimensions, then renders the circles with `d3.r` set to 25 using the `renderCircles` function. The code separates setup and rendering into modular functions, importing data from a local `data.js` file that calculates coordinates with `Math.pow`.

Aug 11, 2025