M

Morganhaoyu

@Morganhaoyu·16 public vizzes

Loading thumbnail…

Sample Distribution (Histogram/Kernel/CDF)

This interactive tool visualizes the statistical distribution of a numeric dataset using multiple complementary representations: a histogram, kernel density estimate, cumulative distribution function (CDF), and a rug plot. Users can adjust histogram bin width and toggle between linear and log2 value scales, while enabling the CDF adds a secondary y-axis. The visualization renders with SVG, supports zooming via click-drag on the x-axis, and is animated with transitions. It uses D3.js for scales, layouts, and SVG manipulation, with data loaded from a JSON file.

Loading thumbnail…

Sample Distribution (Histogram/Kernel/CDF)

This interactive tool visualizes the statistical distribution of a numeric dataset using multiple complementary representations: a histogram, kernel density estimate, cumulative distribution function (CDF), and a rug plot. Users can adjust histogram bin width and toggle between linear and log2 value scales, while enabling the CDF adds a secondary y-axis. The visualization renders with SVG, supports zooming via click-drag on the x-axis, and is animated with transitions. It uses D3.js for scales, layouts, and SVG manipulation, with data loaded from a JSON file.

Loading thumbnail…

Visualizing Distributions

This example compares four chart types for visualizing a single data distribution: swarm plot, pile plot, histogram, and boxplot. Using d3.forceChart, the swarm and pile plots position individual data points with a force-directed layout, while the histogram aggregates counts into bins via d3.layout.histogram, and the boxplot summarizes quartiles using d3.scale.quantile. All charts render as SVG within a shared grid, sharing the same y-axis scale for direct comparison. The underlying data comes from 700 random log-normal values.

Loading thumbnail…

Histogram II

This histogram shows the number of homicides in Chicago for each week in 2015, with bars colored steelblue and counts displayed in white text atop each bar. The visualization uses the d3 v4 library’s `d3.histogram` function, which bins the data by week, alongside `d3.scaleTime` and `d3.scaleLinear` for the axes. The data is loaded from a CSV file containing individual homicide records, and the chart is rendered as an SVG, with the x-axis spanning the full year from January 1 to December 31.

Loading thumbnail…

Histogram II

This histogram displays the number of homicides in Chicago for each week of 2015, using data from the City of Chicago. It shows the count of incidents per weekly bin across the year. The visualization is built with D3 v4, using `d3.histogram`, `d3.scaleTime`, and `d3.axisBottom` to generate an SVG bar chart. Each bar is labeled with its frequency, and the data is loaded from a CSV file containing individual homicide records.

Loading thumbnail…

Histogram II

This histogram displays the number of homicides in Chicago for each week of 2015, using data from the City of Chicago. It shows the count of incidents per weekly bin across the year. The visualization is built with D3 v4, using `d3.histogram`, `d3.scaleTime`, and `d3.axisBottom` to generate an SVG bar chart. Each bar is labeled with its frequency, and the data is loaded from a CSV file containing individual homicide records.

Loading thumbnail…

transition of bar chart

An interactive bar chart ranks the top ten U.S. states by population share across selectable age brackets. Built with D3 v4, it uses SVG and a custom `d3.transition()` API to animate reordering and bar-width changes when the age group is switched. Data from a CSV file is normalized per state, and sort order updates via `d3.scaleBand` and `d3.scaleLinear`. The chart also includes hover effects and a timed automatic switch to a different age bracket.

Loading thumbnail…

Stacked-to-Grouped Bars

This example demonstrates an interactive transition between stacked and grouped bar charts, using sequenced animations to preserve object constancy as the data morphs between the two views. A radio button form toggles the mode, while D3 v4 APIs like `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` handle the layout and stacking. The transitions use `rect.transition()` with staggered delays and duration to smoothly animate each rectangle’s x-position, width, y-position, and height. The visualization renders with SVG, inspired by Heer and Robertson’s animated transition techniques.

Loading thumbnail…

Text tween

A vertical bar chart displays letter frequencies from a CSV dataset, with each row featuring a green rectangle and a bold letter label. During a two-second transition, bars grow from zero width to their full value while accompanying text labels slide right and animate their numbers using `d3.interpolate` within a `.tween` callback. The code uses D3 v3 with SVG rendering, including ordinal and linear scales, axes, and `transition.ease` for smooth motion. The y-axis labels are styled bold, and the x-axis is hidden.

Loading thumbnail…

Density Contours II

This example visualizes the density of diamonds by carat and price, using colored contour paths to show point density. It plots the data from `diamonds.tsv` on logarithmic x and y axes, with a gradient from YlGnBu. The code uses `d3.contourDensity` for kernel density estimation, `d3.geoPath` to render the contours as SVG paths, and `d3.axisBottom` and `d3.axisLeft` for axes. The chart also includes labeled axis text for "Carats" and "Price (USD)".

Loading thumbnail…

Contour Plot II

This example visualizes the Goldstein-Price test function using a grid of 240 by 125 sampled values, displayed as a series of 20 logarithmic contour thresholds. The contours are rendered as filled SVG paths with a blue-green-yellow color scale. The code uses `d3.contours` to compute the isolines and `d3.geoPath` with `d3.geoIdentity` to project them, while `d3.scaleLog` and `d3.interpolateYlGnBu` define the color mapping. The data is generated procedurally from the mathematical function.

Loading thumbnail…

Chord I

A chord diagram visualizes directed relationships among four entities, with ribbons showing the magnitude of flow between groups and colored arcs representing each group’s total. The layout mirrors Circos and Martin Krzywinski’s design. Built with D3 v4, the code uses `d3.chord` to compute the chord layout, `d3.arc` for the group arcs, and `d3.ribbon` for the connecting bands. Colors come from `d3.scaleOrdinal`, and tick labels are formatted via `d3.formatPrefix`, with matrix data hardcoded in the source.

Loading thumbnail…

Chord Diagram - Phone Brand Switching Behavior

This example uses a chord diagram to visualize phone brand switching behavior among Dutch consumers, based on the Deloitte Mobile Consumer Survey. It shows the flow of respondents between their previous and current phone brands, with arc lengths encoding each brand’s market share and directed chords revealing asymmetries in switching patterns, such as Nokia losing 12% of its users to Samsung while only gaining 2% in return. The chart is built with D3.js v3, using the `d3.layout.chord` API to compute and render the chord paths and arcs, with mouseover interactions highlighting a selected brand. The rendering is animated, and the side text explains how thicker chords indicate higher percentages of switching.

Loading thumbnail…

Brush I

A brushable scatterplot displays 300 randomly generated points. A horizontal brush initially selects a range, highlighting points within it in red with a brown stroke. The example uses d3.brushX to define the brush and handles the brush event to update the selection state. Clicking re-centers the brush using a fixed width, demonstrating interactive selection on an SVG rendered with d3.scaleLinear and d3.axisBottom.

Loading thumbnail…

Film Flowers, Single Starter Code

This example shows a small starter version of the “Film Flowers” visualization, drawing the first movie from a JSON file as a flower-like glyph. The SVG is pre-sized to 600 by 600 pixels, with three movies per row on a taller canvas. The code uses D3 v4 scales and selections, plus lodash helpers, to bind movie data and generate a quantized number of petal paths. Each petal is positioned and rotated via SVG transform attributes, with the petal path selected by the movie’s rating.

Loading thumbnail…

fresh block

This example uses D3 v4 to draw a single flower petal as an SVG path. The petal shape is defined by a five-point path array with cubic Bézier curves and straight line segments. The code appends the path to an SVG canvas and applies a black stroke, though no fill is set. The rendering approach relies on SVG path data, and the example appears to be a minimal starting point for building a flower or geometric pattern.