Skip to main content
Log in
B

bsolomon103

@bsolomon103·22 public vizzes

Loading thumbnail…

Interactive Colour Legend

This interactive scatter plot visualizes the Iris flower dataset, showing sepal width against sepal length with points colored by species. A color legend allows users to hover over species names, highlighting only that species’ data points while dimming others. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles, with data loaded via `d3.csv` from a public GitHub repository.

Feb 4, 2022
Loading thumbnail…

Multiple Views (Brushing)

This interactive visualization combines a bubble map and a date histogram to explore missing migrant incidents. Brushing a time range in the histogram filters the map’s bubbles, which are scaled by total dead and missing using d3.scaleSqrt. The map uses d3.geoNaturalEarth1 and d3.geoPath for land outlines, while the histogram employs d3.bin and d3.brushX. Data comes from the Missing Migrants Project CSV, rendered as SVG in React.

Feb 3, 2022
Loading thumbnail…

Fork of Rendering data with React.

This visualization displays the 148 named CSS colors as a circular pie chart, with each color represented as a slice of equal angular width. The chart loads color data from a CSV file using D3’s `csv` utility, then renders each slice as an SVG `<path>` element via React. The code uses `d3.pie` to compute arc segments and `d3.arc` to generate the path data, with each slice’s fill color taken from the dataset’s RGB hex values. The React app manages the asynchronous data loading with hooks like `useEffect` and `useState`, and renders the result inside an SVG canvas.

Jan 28, 2022
Loading thumbnail…

Fork of Missing migrants on a Map

This visualization combines a bubble map and a date histogram to show missing migrants globally. The map uses d3.geoNaturalEarth1 projection with d3.geoPath to render world land masses, while circles sized by d3.scaleSqrt represent the total dead and missing per location. The histogram below uses d3.bin and d3.timeMonths to aggregate the same metric by reported date, with axes rendered by custom React components. Data comes from the Missing Migrants Project CSV, loaded via d3.csv, and the world atlas TopoJSON is processed with topojson.feature and topojson.mesh.

Jan 25, 2022
Loading thumbnail…

Missing migrants on a Map

This map visualization shows the global distribution of missing migrants, with the size of each circle representing the total number of dead and missing individuals at a given location. The visualization uses a natural Earth projection and overlays semi-transparent circles on a world map, alongside graticules and country borders for geographic context. Built with React and D3 v5, the code employs `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` to render the map, while a square root scale (`d3.scaleSqrt`) maps the migrant counts to circle radii. Data comes from a CSV file of the Missing Migrants Project, with geographic coordinates parsed and projected onto the SVG canvas.

Jan 24, 2022
Loading thumbnail…

Missing Migrant Histogram

This histogram visualizes the total number of dead and missing migrants per month, based on data from the Missing Migrants Project. The chart uses a bar for each month, with bar height representing the monthly aggregate of the “Total Dead and Missing” column. Color and axes are styled with clear labels. Built with React and D3 v5, it uses `d3.csv` for data loading, `d3.bin` with `d3.timeMonths` thresholds for grouping, and SVG rectangles for rendering.

Jan 24, 2022
Loading thumbnail…

Points on a Map

This visualization displays the world’s most populous cities as semi-transparent circles on a natural Earth projection, with circle size scaled by population using a square-root scale. The map renders landmasses, country interiors, graticules, and a sphere outline via d3.geoPath and geoNaturalEarth1. City positions are projected from latitude and longitude coordinates, with data loaded from a CSV of world cities using the d3.csv function. The SVG marks are built as React components, while the atlas topology comes from the world-atlas package.

Jan 21, 2022
Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, mapping sepal width against sepal length and coloring each point by species. The visualization uses React for component structure, including custom axis, legend, and mark components, while D3 v5 handles data loading, scaling, and SVG rendering. The code employs d3.scaleLinear for positional encoding, d3.scaleOrdinal for categorical species colors, and d3.extent to compute domains. The chart features a minimal aesthetic with the Poppins font, styled tick marks, and a supplementary color legend, providing clear separation of the three iris species.

Jan 13, 2022
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting measurements like sepal length and width against each other. Two dropdown menus let users select which quantitative attributes appear on the x- and y-axes, with the axes labels updating accordingly. The visualization is built with React and D3 v5, using scaleLinear for both axes and SVG circles for each data point, with axis components rendered as reusable React functions. The dataset is loaded as CSV from a GitHub gist using d3.csv, and the ReactDropdown component provides the menu interface.

Jan 13, 2022
Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across species. Dropdown menus dynamically change the X and Y axes, redrawing the SVG circles and axis labels in real time. Built with React and D3 v5, the visualization uses `scaleLinear` for axis scaling, `extent` for domain calculation, and custom `AxisBottom`, `AxisLeft`, and `Marks` components for rendering. Data is loaded asynchronously via `csv()` from a remote URL, with tooltips showing formatted values. The chart includes styled tick marks, axis labels, and a clean Poppins font.

Jan 13, 2022
Loading thumbnail…

Menus with React

This example shows a pet selector interface with a dropdown menu that lets users choose a pet type (Goldfish, Dog, Cat, Hamster, Parrot, or Spider). The selected value is displayed in the browser console. The implementation uses React with the `useState` hook to manage the selected value, and ReactDOM to render the `App` component into the HTML `div` with id `root`. The code imports React and ReactDOM from unmanaged packages, and the dropdown options are defined as a JavaScript array of objects with `value` and `label` properties.

Jan 7, 2022
Loading thumbnail…

World Map

This example displays a world map using the Natural Earth projection via D3.js (v5) and React. The visualization renders landmasses, a sphere outline, graticule lines, and interior boundaries as SVG paths, with D3’s `geoNaturalEarth1` projection and `geoPath` generating the geometry. The map is styled with a purple land fill and teal graticule/interior strokes, while the underlying data comes from the `world-atlas` package’s countries-50m GeoJSON topology, processed using `topojson`’s `feature` and `mesh` functions.

Jan 7, 2022
Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes weekly temperature variations over time in San Francisco, with colored circular markers highlighting each data point along the black line. Built with React and D3 v5, the visualization uses d3.scaleTime and d3.scaleLinear for the axes, d3.line for the path, and d3.csv to load the dataset from a GitHub gist of United Nations population data. The SVG rendering includes custom axis components with Poppins typography and teal circle radius of 7 pixels, offering tooltips through SVG title elements formatted with d3.timeFormat.

Jan 6, 2022
Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the relationship between sepal width and sepal length for the Iris dataset, with each circle representing a flower sample. The visualization uses React for component structure and d3.scaleLinear for both axes, while d3.csv loads the data from a GitHub-hosted CSV file. SVG renders the marks and axes, with custom React components for axis rendering and tooltips providing hover information via SVG title elements.

Jan 6, 2022
Loading thumbnail…

Stylised Bar Chart

This stylized bar chart displays the populations of the ten most populous countries for 2020, using horizontal bars sorted by country name. The visualization pairs D3 v7 utilities for data loading and scaling with React components for rendering SVG elements. D3’s `csv` fetches the UN population data, while `scaleBand` and `scaleLinear` position the bars on the y- and x-axes. React manages the loading state, displaying “Loading...” until the data arrives, then renders each bar as an SVG `<rect>`.

Jan 3, 2022
Loading thumbnail…

Axes with React & D3

This example shows a horizontal bar chart displaying the top ten countries by 2020 population from a UN dataset. The visualization uses React for component rendering and D3 v7 utilities for data loading and scales. Axes are manually constructed with SVG elements, using `scaleBand` for the categorical country labels and `scaleLinear` for the numeric population values. Data is fetched as CSV, parsed with D3's `csv` function, and rendered as SVG rectangles within a React component.

Jan 2, 2022
Loading thumbnail…

The Margin Convention

This example shows a horizontal bar chart of the ten most populous countries in 2020, with each bar’s length proportional to population. The visualization uses React to render SVG rectangles inside a `<g>` element translated by a margin object, while D3’s `csv` loads and parses the UN population data. `scaleBand` maps country names to vertical positions, and `scaleLinear` scales population values to bar widths within the inner chart dimensions. The chart omits axes and labels, focusing purely on the margin convention.

Jan 2, 2022
Loading thumbnail…

Fork II of Rendering data with React.

This example displays a horizontal bar chart of the top ten countries by 2020 population, based on UN population data loaded as CSV via `d3.csv`. React manages the component state with `useState` and `useEffect` to fetch the data, while D3 v7 utilities `scaleBand` and `scaleLinear` map country names and population values to SVG rectangles. Rendering occurs through React’s virtual DOM into an SVG container, with a loading message shown before the data arrives.

Dec 30, 2021
Loading thumbnail…

Rendering data with React.

A React application renders CSS named colors from a CSV dataset as horizontal color swatches. The code loads the data with D3's `csv` utility and uses React hooks (`useState`, `useEffect`) to manage asynchronous data fetching and component state. Each row displays a div whose background color corresponds to the color's RGB hex value from the dataset. D3 v7 handles data loading while React manages the UI rendering, demonstrating a simple integration of D3 data utilities with React's declarative component model.

Dec 29, 2021
Loading thumbnail…

Loading data with react & d3

This example demonstrates how to load and summarize CSS named colors data using React and D3. It fetches a CSV file via D3’s `csv` utility, stores the result in React state with `useState` and `useEffect`, and displays the dataset’s row count, column count, and file size in kilobytes as plain text. The page uses React 16.9 and D3 v7, rendering text inside a `<pre>` element with SVGs commented out in the HTML.

Dec 29, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v7, displaying the resulting dataset’s row count, column count, and file size. The code fetches raw text from a GitHub gist containing CSS named colors, then parses it with `d3.csvParse`. It asynchronously retrieves the data using the Fetch API and updates a `<pre>` element with the summary via `document.getElementById`.

Dec 27, 2021
Loading thumbnail…

Untitled

A grid of smiling faces, each with randomized facial features, fills the viewport. The faces are generated using React components that compose SVG shapes, including a yellow background circle, two eyes, and a curved mouth. The application uses the `d3.arc` function to define the mouth’s path and `d3.range` to create a 6-by-3 array of faces. Each face receives random values for eye offset, eye radius, mouth width, and mouth radius, resulting in a varied but cohesive pattern.

Dec 27, 2021