jimmy.fisher@member.mensa.org

@drjfish·8 public vizzes

Fork of Missing Migrants on a World Map w/ Histogram & Brushing feature

This visualization combines a world map of missing migrant incidents with a linked histogram, using D3 v7 within a React framework. The map displays circles sized by death counts via `d3.scaleSqrt`, while a time-based histogram aggregates data by month. Users can brush the histogram with `d3.brushX`, filtering the map’s circles in real-time. The map uses `d3.geoNaturalEarth1` projection and TopoJSON world atlas data, rendering as SVG.

Nov 29, 2024

Loading thumbnail…

Fork of Iris Scatterplot 04 - Animations

This is a D3.js scatter plot of the Iris dataset that animates between different views. Every two seconds, it changes which of the four flower measurements (sepal length, sepal width, petal length, petal width) is mapped to the x-axis, while the y-axis remains fixed on sepal length. The points, colored by species, transition smoothly via the `transition().duration(2000)` method on the `join` operation. The visualization uses a reusable `scatterPlot` module with `scaleLinear` for axes and `scaleOrdinal` for symbol types, and loads data from a CSV file using `d3.csv`.

Nov 28, 2024

Loading thumbnail…

Fork of animation of reusable D3 scatterplot

This example animates a scatterplot of the Iris dataset, cycling through pairs of measured features every second. The chart assigns each species a color and symbol, with points transitioning between positions as new x- and y-axes are computed. Built with React and D3 v7, it uses a reusable `scatterPlot` function with `scaleLinear`, `scaleOrdinal`, `symbol`, and `transition` to update SVG elements smoothly. The animation relies on `setInterval` to trigger re-renders, demonstrating dynamic axis rescaling and point movement.

Nov 28, 2024

Loading thumbnail…

Fork of Racing Bar Chart Animation Test

A racing bar chart animation continuously updates six categorical values—alpha through foxtrot—as each bar increments by ten meters at random intervals. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars and labels, while transitions animate height and width changes over 750 milliseconds. A custom `useInterval` hook triggers data mutations, and a ResizeObserver monitors container dimensions. Bars are rendered as SVG rectangles, with text labels displaying current values.

Nov 28, 2024

Loading thumbnail…

Fork of Animated Scatter Plot with Menus

This example visualizes the Iris Dataset as an animated scatter plot. Users can change the x- and y-axis variables through dropdown menus, which trigger smooth transitions of the data points and axes. The code uses D3 v6 with reusable chart and menu components, leveraging `selection.join` for enter/update/exit handling and `transition` for animations. The scatter plot displays points with growing radii on entry, and axes update with the selected dimensions.

Nov 28, 2024

Loading thumbnail…

Fork of Project Dashboard - Mental Illnesses, Unemployment and Suicides over the years

This dashboard combines four linked views to explore relationships between mental illness, unemployment, and suicide rates across countries over time. It shows how the percentage of the population affected by mental illness has changed, alongside unemployment and suicide death rates, with a bar chart highlighting the top five countries most affected by unemployment for a selected year. The visualization uses D3 v5 and React, rendering SVG charts with scales including `scaleBand`, `scaleLinear`, and `scaleTime`, and incorporates dropdown menus for user interaction. It leverages d3-shape’s `line` and `curveNatural` for smooth line paths, with data sourced from a CSV file.

Nov 28, 2024

Loading thumbnail…

Fork of Customer Attrition Dashboard V2

This dashboard presents an exploratory analysis of credit card customer attrition using D3.js, displaying four linked visualizations: a grouped bar chart, scatter plot, stacked bar chart, and violin plots. Each plot encodes attrition status through color and includes interactive dropdown menus that allow users to switch which data columns are displayed. The visualizations are rendered as animated SVG elements, with data loaded from a remote CSV via `d3.csv`, and use D3 utilities like `d3.rollups`, `d3.histogram`, and `d3.stackOffsetExpand` to compute and display the underlying statistics.

Nov 28, 2024

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualizes the hierarchical structure of the Flare dataset, with each arc segment representing a data category and its size proportional to value. Clicking an arc zooms in to make that node the new root, animating the repositioning of all visible arcs and labels. Built with D3 v5, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and draw the layout, while `transition.attrTween` smoothly interpolates arc geometry during zoom. The visualization renders in SVG and applies a rainbow color scale based on top-level categories.

Nov 27, 2024