Skip to main content
Log in
M

MATTE-blz

@MATTE-blz·23 public vizzes

Loading thumbnail…

missing migrants on map

This visualization maps missing migrant incidents worldwide using an equal Earth projection. Each circle represents a location with its radius scaled to the reported number of dead and missing individuals, rendered via SVG. The map includes country boundaries, graticule lines, and a colored sphere background. The code uses d3.geoEqualEarth, d3.geoPath, d3.geoGraticule, and d3.scaleSqrt, with React managing the component state. Data comes from the Missing Migrants Project CSV, while world country shapes are loaded from TopoJSON.

Apr 22, 2021
Loading thumbnail…

Fork of Missing Migrants Date Histogram

This visualization shows monthly totals of dead and missing migrants from the Missing Migrants Dataset. It renders a bar chart as SVG, with time on the x-axis and cumulative deaths per month on the y-axis. Built with React and D3 v5, the code uses `d3.bin` with `timeMonths` thresholds to aggregate data, `d3.sum` to calculate monthly totals, and `scaleTime` and `scaleLinear` for axes. Hovering over a bar reveals its exact total via a native SVG `<title>` tooltip.

Apr 22, 2021
Loading thumbnail…

Bar Chart

This bar chart displays the populations of ten countries as horizontal bars, ordered alphabetically by country name on the y-axis, with bar length proportional to population values from the UN Population 2019 dataset. The visualization uses React with D3 v5 utilities, including `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendering SVG rectangles. Data is loaded asynchronously via `d3.csv` and filtered to the top ten rows, with bars drawn without labels or gridlines.

Apr 21, 2021
Loading thumbnail…

working with time

This visualization displays the total number of dead and missing migrants over time, using a histogram with monthly bins. The data comes from a CSV file of missing migrants incidents and is processed with `d3.csv` and `d3.histogram`. React renders SVG elements, with axes drawn from custom components using `d3.scaleTime` and `d3.scaleLinear`. Circles mark each bin’s total, colored blue with opacity, and the time axis formats dates using `d3.timeFormat`.

Apr 16, 2021
Loading thumbnail…

sized points on a map

This example visualizes the world’s most populous cities as circles sized by population, overlaid on a map of country borders and graticule lines. The cities’ circle radii are scaled with a square root scale from D3, mapping population values to a maximum radius of 18 pixels. The map uses the `geoEqualEarth` projection, `geoPath`, and `geoGraticule` from D3, with country and interior boundaries processed via TopoJSON’s `feature` and `mesh`. Geographic data comes from a World Atlas JSON file and city data from a CSV file, rendered as SVG with React.

Apr 14, 2021
Loading thumbnail…

points on a map

This map shows the locations of major world cities as circular points overlaid on a globe, with country borders, graticule lines, and a shaded sphere providing geographic context. City coordinates from a CSV file are projected using the `geoEqualEarth` projection, and their positions are rendered as SVG circles with a specified radius. The visualization is built using React, D3 v5, and the TopoJSON library for processing country boundaries and interior lines, with styling applied via CSS.

Apr 12, 2021
Loading thumbnail…

Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length and sepal width with a color legend for species. Hovering over a legend item fades non-matching points and highlights the selected species. Built with React and D3 v5, it uses `scaleLinear` and `scaleOrdinal` for axes and colors, with SVG circles rendered via custom `Marks` and `ColorLegend` components.

Apr 12, 2021
Loading thumbnail…

scatter plot with color legend

This interactive scatter plot displays the Iris flower dataset, allowing users to compare any two measured attributes (sepal length/width, petal length/width) on the x and y axes via dropdown menus. Points are colored by species using a `scaleOrdinal` color scale, with a legend mapping colors to species names. The visualization uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) and SVG rendering, with axes and marks generated from D3’s tick and data mapping functions.

Apr 12, 2021
Loading thumbnail…

colorised scatter plot with menu

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. Two dropdown menus let viewers select which attribute appears on the x-axis and y-axis, with the plot updating in response to their choices. Points are color-coded by species using a d3.scaleOrdinal function. The visualization uses React for state management and rendering, with D3 v5 (scaleLinear, extent, csv) handling data loading and scales, and SVG circles displaying each data point.

Apr 9, 2021
Loading thumbnail…

polished scatter plot with menu

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which flower measurements appear on the x- and y-axes. The visualization uses React and D3 v5, rendering SVG circles colored teal against a white background. The axis components generate tick marks and labels using scaleLinear and d3.ticks, while the ReactDropdown component manages the selection of attributes like sepal length and petal width. Hovering over any circle reveals its value via an SVG title tooltip, and the layout includes custom axis labels with a fixed margin structure.

Apr 9, 2021
Loading thumbnail…

scatter plot with menu

A scatter plot of the Iris dataset, encoded as SVG circles, allows the user to select which quantitative variable to plot on the x- and y-axes via two dropdown menus. The chart updates the scales, axes, and labels based on the chosen attributes using React state and D3 scaleLinear and extent functions. Data is loaded asynchronously with d3.csv.

Apr 8, 2021
Loading thumbnail…

menu react

This example shows a pet-selection menu built with React, displaying a drop-down list of six animal options and logging the chosen value to the console. A custom `Dropdown` component, defined with React hooks and JSX, receives an `options` array, an `id`, a `selectedValue`, and a callback to update state. The app uses `useState` to manage the selected value and `ReactDOM.render` to mount the interface. The unstyled page relies on React 16.13.1 and ReactDOM from unpkg, with no additional visualization library.

Apr 7, 2021
Loading thumbnail…

world map

This example displays a world map showing country boundaries and land masses, with a focus on geographic layout rather than quantitative data. The map renders an equal Earth projection using `d3.geoEqualEarth`, with graticule lines and a styled sphere background. Country polygons are drawn via `d3.geoPath`, while interior borders are generated from TopoJSON mesh data loaded from the world-atlas dataset. The visualization uses React for component structure and SVG for rendering, with CSS controlling the color scheme for countries, borders, and the surrounding ocean.

Apr 7, 2021
Loading thumbnail…

Hello Face

The visualization displays a grid of procedurally generated smiley faces, each with randomized facial features and stroke widths. It demonstrates how React and D3 can be combined to create reusable SVG components, with d3’s `arc` API generating the mouth shapes while React’s component structure handles the face, eyes, and background circle. The faces are rendered as SVG elements, with each face’s properties like eye offset and mouth radius varied randomly to produce unique expressions.

Apr 5, 2021
Loading thumbnail…

line chart

This line chart visualizes temperature trends over time using a smoothed cardinal spline curve. The React-based code renders SVG marks, including a path for the line and circles for individual data points, with hover tooltips. It leverages d3's `scaleTime`, `scaleLinear`, and `line` API, along with `curveCardinal` for the interpolated curve. Data is loaded from a CSV file.

Apr 5, 2021
Loading thumbnail…

iris dataset scatter plot

This scatter plot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Each circle is colored teal and includes a tooltip showing the sepal length value. The visualization uses React with D3 v5's `scaleLinear` for axes and scaling, rendering SVG elements through React components. Data is loaded from a remote CSV file using D3's `csv` function.

Apr 2, 2021
Loading thumbnail…

Styling Bar Chart

This example shows a horizontal bar chart ranking the ten most populous countries in 2020, with a muted color palette and styled gridlines. The chart uses D3.js scales (`scaleBand`, `scaleLinear`) and `format` to abbreviate population numbers with "B" for billions. Built with React, it renders SVG elements via custom components (`AxisBottom`, `AxisLeft`, `Marks`), and loads data from a CSV file. The styling is defined through CSS classes that color the bars, axis ticks, and labels, while a tooltip appears on hover.

Apr 2, 2021
Loading thumbnail…

Refactored Bar Chart

This bar chart displays the 2020 populations of the first ten countries from a UN dataset, with country names on the vertical axis and population on the horizontal axis. The visualization is built with React components that render SVG elements, using D3's `scaleBand` and `scaleLinear` for axes and data mapping. Axes and marks are each defined in separate files, demonstrating a modular, refactored architecture. The bottom axis uses `xScale.ticks()`, while the left axis maps the domain values; rectangles are drawn using the `Marks` component.

Mar 31, 2021
Loading thumbnail…

axes Bar Chart

This bar chart displays the top 10 countries by population in 2020, using data from a UN Population CSV file. It renders with React and SVG, where D3’s `scaleBand` positions the country labels on the y-axis and `scaleLinear` maps population values to bar widths on the x-axis. The code manually generates gridlines and tick labels using `xScale.ticks()` and maps over `yScale.domain()` for text elements, rather than using D3’s axis components. Each rectangle’s width is set with `xScale(d.Population)`, and its height uses `yScale.bandwidth()`.

Mar 31, 2021
Loading thumbnail…

margin of Bar Chart

This example displays a horizontal bar chart of the top 10 countries by 2020 population using D3.js scales and SVG rendering. The chart applies fixed margins around the plotting area, with the bar lengths proportional to population values and y-axis positions determined by country names. The code loads CSV data from a remote URL, employs React for state management, and constructs the visualization using d3.scaleBand and d3.scaleLinear APIs within an SVG container.

Mar 30, 2021
Loading thumbnail…

Loading data with React and d3

This example shows a pie chart of CSS named colors loaded from a remote CSV file, with each slice filled by its corresponding hex color value. The visualization uses React hooks (useState and useEffect) to fetch the data asynchronously via d3.csv, then renders the chart as SVG paths. The d3.pie layout generates the arc angles, while d3.arc creates the wedge shapes, all positioned within a React component that displays a loading message before the data arrives.

Mar 29, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the relationship between vehicle weight, year of manufacture, and fuel efficiency (MPG) across different countries of origin, using data from the UCI Auto MPG dataset. The visualization is built with the Vega-Lite API, which compiles specifications to render SVG graphics. The code applies a custom configuration for axis styling and uses Vega Tooltip for interactive hover details. Data loading is handled by the d3.csv function, fetching from a remote Gist URL.

Mar 28, 2021
Loading thumbnail…

Circle Follower Mouse

A circle follows the mouse cursor across an SVG canvas. The visualization tracks pointer movement and updates the circle's position in real time. Built with React and SVG, it uses React's `useState` and `useCallback` hooks to manage the cursor coordinates. A `handleMouseMove` callback on the SVG element captures `event.clientX` and `event.clientY` values, which are then passed to the circle's `cx` and `cy` attributes. The circle starts centered in the 960×500 viewport and responds immediately to any mouse movement, creating a direct interactive feedback loop.

Mar 26, 2021