B

Bizmundo

@Bizmundo·17 public vizzes

Loading thumbnail…

Kent County (UK) Police Stop & Search Map

This interactive map overlays over 5,000 police stop-and-search incident records from the UK Police Data API onto a choropleth-style rendering of Kent County. Users can filter incidents by race and by categorical attributes such as outcome, legislation, or gender, with an ordinal color scale encoding the selected attribute. Hovering over a legend value highlights matching incidents while dimming others. The visualization uses React with D3 v5, including `d3.geoEqualEarth` for the map projection, `d3.scaleOrdinal` for colors, and `d3.csv` for data loading. County boundaries come from a TopoJSON dataset processed with `feature`.

Loading thumbnail…

Kent County (UK) Police Stop & Search Map

This interactive map visualizes police stop-and-search incidents across Kent County, UK, using data from the UK police data portal. Users can filter incidents by race and various categorical attributes, such as offense type or outcome, through dropdown menus. The visualization uses d3.geoPath and a geoEqualEarth projection to render county boundaries, while each incident appears as a colored circle plotted using d3.geoPath projection coordinates. A d3.scaleOrdinal color scale maps filtered attributes to colors, with an interactive legend that fades non-hovered points and highlights matching incidents on the map.

Loading thumbnail…

Interactive plot

This interactive scatter plot explores the relationship between academic salaries and career attributes. Users can select X and Y axes from among salary, years since PhD, and years of service, while a filter dropdown controls the categorical color encoding by rank, discipline, or sex. Hovering over the color legend highlights points of that category and fades others. Built with React and D3 v5, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and SVG circles rendered from the salaries dataset.

Loading thumbnail…

Sized Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent teal circles, sized proportionally using a square-root scale. The visualization layers Natural Earth landmasses, graticules, and a sphere outline, rendered via `d3.geoPath` with a `geoNaturalEarth1` projection. City coordinates and population data come from a CSV fetched using `d3.csv`, while country boundaries use TopoJSON converted with the `feature` API. React manages component state, with the SVG marks generated through the `Marks` component, combining `d3.scaleSqrt` for radius scaling and `d3.max` for domain calculation.

Loading thumbnail…

Interactive plot

An interactive scatter plot of the salaries dataset explores relationships among academic salary, years since PhD, and years of service using React and D3. Users select X and Y axes and filter data by rank, discipline, or sex through dropdowns. Hovering over the color legend highlights points matching that category, while other points fade. The visualization uses d3.scaleLinear scales, d3.scaleOrdinal color encoding, and crossfilter for data manipulation, rendering circles via SVG.

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. Each bar originates from the bottom of the chart and extends upward to represent population values, with rotated country labels on the x-axis and tick marks on the y-axis. The visualization uses React components and D3 v5, specifically `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and SVG `rect` elements for the marks. Chart axes are custom-rendered with formatted tick labels using `format('.2s')` to abbreviate large numbers.

Loading thumbnail…

MTCARS Scatter Plot with Menus

An interactive scatter plot of the classic mtcars dataset lets viewers compare any two of four car attributes—mpg, cyl, disp, and hp—by selecting each axis from a dropdown menu. Built with React and D3 v5, it renders SVG circles whose positions are calculated with `scaleLinear` and `extent`, and axes are drawn using the custom `AxisBottom` and `AxisLeft` components. The plot displays values with a `siFormat` tick label and includes hover tooltips via SVG `<title>` elements.

Loading thumbnail…

MTCARS Scatter Plot with Menus

This interactive scatter plot visualizes the mtcars dataset, letting users select which attribute (mpg, cyl, disp, hp) to plot on each axis. The chart displays circles for each car, with tooltips showing the x-axis value. Using React with D3 v5, the code implements a `Dropdown` component to update state and re-render the SVG. The `scaleLinear` function scales the data, while `AxisBottom`, `AxisLeft`, and `Marks` modules handle the visualization's rendering.

Loading thumbnail…

Creative coding using React & D3s

An animated, colorful particle field derived from a “Mathematical Patterns” tutorial, rendered continuously via Canvas `requestAnimationFrame`. The code generates a grid of circles whose radius and color shift over time, creating a rippling, screensaver-like effect. It uses React-style animation loops and the Canvas API’s `arc`, `fillStyle`, and `clearRect` methods, with no external D3 libraries—pure JavaScript and Math functions drive the pattern.

Loading thumbnail…

Smiley Face Part II

A smiley face is rendered as an SVG graphic, combining a yellow circle head with black eyes, glasses, and a mouth. The example demonstrates how to build a React component with D3’s `arc` and `line` generators to create complex shapes. D3 v5 provides the geometry for the mouth arc, circular glasses, and a curved line for a brow, while React manages the SVG element tree. All coordinates and dimensions are computed from the center point, using scaled-offset values for the facial features.

Loading thumbnail…

Correlation between stop and search type and ethnicity

This visualization shows the proportion of stop and search types—person, vehicle, or both—for each ethnic group in Kent, UK police data from 2007-2009. A grouped bar chart displays these percentages, revealing that the distribution of search types is similar across racial categories. The code uses the vega-lite-api and vega-lite libraries, with data loading through `d3.csv` from a remote gist, then computes ratios in JavaScript before rendering with Vega-Lite's mark-bar encoding.

Loading thumbnail…

US births from 2000 to 2014

This chart displays annual US birth counts from 2000 to 2014 as a circle-mark scatter plot, with the year on the x-axis and the total number of births on the y-axis. It uses the Vega-Lite API via the vega-lite-api wrapper to encode the data, with D3.js loading the CSV source from a GitHub gist. The visualization is rendered as an SVG and includes customized axis styling and tooltips through the Vega tooltip handler.

Loading thumbnail…

Plot of freecodecamp facebook posts reach vs. reaction

This example plots freeCodeCamp Facebook post reach against reactions as a circular scatterplot, revealing a positive correlation between the two engagement metrics. The chart is built with Vega-Lite, registered through the vega-lite-api, and uses d3.csv to load the activity data from a GitHub-hosted CSV file. Each data point represents an individual post, with the x-axis showing reaction counts and the y-axis showing reach, both scaled with zero disabled to focus on the data clusters. The visualization applies custom axis styling from a config object to improve readability, with larger fonts and a dark color scheme.

Loading thumbnail…

Kent (UK) police search count by ethnicity and search type

This visualization shows the distribution of Kent police stop-and-search incidents by officer-defined ethnicity and search type, using a bar chart where color intensity represents aggregated search counts. The data comes from a CSV file loaded asynchronously via `d3.csv`. Built with Vega-Lite API and D3 v5, the chart encodes ethnicity on the x-axis and search type on the y-axis, with `vl.color().count()` mapping frequency to color. The rendering uses Vega’s SVG renderer, with a custom dark text palette and enlarged axis labels configured through a shared config object for readability. Tooltips are enabled via the vega-tooltip handler.

Loading thumbnail…

Loading and Parsing US birth 2000-2014 CSV Data

This example displays summary statistics about a US birth dataset from 2000 to 2014, showing the file size, row count, and column count in a large text element. The visualization uses `d3.csv` to asynchronously fetch and parse the CSV from a GitHub Gist URL, then `d3.csvFormat` to calculate the data’s byte size. It reports that the dataset contains a specific number of rows and columns, highlighting the parsed structure without plotting the data itself.

Loading thumbnail…

Loading and Parsing Kent UK police stop and search CSV Data

This example loads a CSV file containing Kent UK police stop and search records and displays a summary of the dataset’s size and structure. It reports the total file size in kilobytes, the number of data rows, and the number of columns. The code uses D3 v5’s `d3.csv` method to fetch and parse the data, and `d3.csvFormat` to calculate the formatted size, with results written to the page via `textContent`. An alternative approach using `fetch`, `async`/`await`, and `d3.csvParse` is included in comments.

Loading thumbnail…

Loading and Parsing Free code camp Facebook activity CSV Data

This example displays the size and structure of a Free Code Camp Facebook activity CSV dataset, showing the file size in kilobytes, row count, and column count. It loads the remote CSV file using `d3.csv` and formats the output with `d3.csvFormat` to measure the data size. The code also includes alternative commented-out approaches using `fetch`, `async`/`await`, and `d3.csvParse`. The resulting statistics are rendered inside a `<pre>` element with large font styling.