A

Aga Domanska

@amdomanska·17 public vizzes

Loading thumbnail…

React and D3 Show&Tell

This example shows the prevalence of neurodevelopmental disorders worldwide, displaying a dataset of case counts by disorder and year. It uses React to manage component state and the D3 library’s `csv` method to fetch and parse data from a remote GitHub gist. The code includes a mapping to shorten long disorder names for readability, but at this stage it only logs the first data row and displays a loading message until the data arrives, after which it confirms data is loaded.

Loading thumbnail…

Show&Tell

This example displays six semi-transparent circles in varying sizes and colors on a pale green background. Using React and D3, the `select` and `join` methods bind an array of position, radius, and fill data to SVG circle elements. The visualization demonstrates a straightforward scatterplot-like rendering where each circle’s attributes are set directly from the data, with opacity fixed at 708/1000. No interactive or animated behaviors are included.

Loading thumbnail…

Fork of Multiple Views with Brushing

A world map displays the geographic distribution of migrant deaths, with circles sized by the total dead and missing count. A time-series histogram below shows monthly totals, and brushing on this histogram filters the map to show only incidents within the selected date range. The visualization uses React with D3 v5, employing `geoNaturalEarth1` and `geoPath` for mapping, `scaleSqrt` for circle sizing, `brushX` for interactive filtering, and `bin` with `timeMonths` thresholds to aggregate the data.

Loading thumbnail…

Fork of Multiple Views with Brushing

This example presents a dashboard combining a world map of missing migrants with a brushing-enabled time series. The map uses a bubble plot where circle size encodes the total number of dead and missing individuals, projected with `geoNaturalEarth1` and rendered via `d3.geoPath`. The time series histogram, built with `d3.histogram` and `d3.brushX`, allows users to filter the map by date range. The visualization is built with React and D3 v5, using SVG elements, and sources migrant data from a CSV alongside country boundaries from World Atlas TopoJSON.

Loading thumbnail…

Fork of Multiple Views with Brushing

This visualization combines a bubble map and a date histogram to explore missing migrant incidents worldwide. A brushed time range in the histogram filters the circles displayed on the map, which use d3.geoNaturalEarth1 and d3.geoPath for geographic projection. Data comes from the Missing Migrants Project CSV. The React app uses d3.scaleSqrt for bubble sizing, d3.bin for histogram binning, and d3.brushX for interactive selection.

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset using React and D3 v5, rendering points as SVG circles positioned with `scaleLinear` scales. Two dropdown menus allow users to select which quantitative attributes appear on the x- and y-axes. The code constructs axes with custom `AxisBottom` and `AxisLeft` components, and includes a tooltip via SVG `<title>` elements on each circle. Styling uses the Poppins font and the React Dropdown library for menu interaction.

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, displaying petal length against sepal width for three iris species. The React and D3 v5 application renders SVG circles whose colors encode species, with a color legend that highlights the corresponding data points when hovered over. The visualization uses `scaleLinear` for the axes, `scaleOrdinal` for the color mapping, and an interactive `ColorLegend` component that fades non-hovered marks via opacity changes.

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, ranked by population. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering SVG elements via JSX components. Population values from the UN World Population Prospects 2019 are formatted using D3’s `format` function, with tooltips generated by native SVG `<title>` elements.

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries as horizontal bars, ranked by population. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to position bars and axes, rendering SVG elements via JSX components. Population values from the UN World Population Prospects 2019 are formatted using D3’s `format` function, with tooltips generated by native SVG `<title>` elements.

Loading thumbnail…

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color represented by a wedge arranged around a central point. The code loads color data from a GitHub-hosted CSV file using D3's `csv` utility, then employs React to render an SVG containing the arcs. The `d3.pie` function partitions the data into equal segments, while `d3.arc` calculates the path geometry for each colored wedge. React's `useState` and `useEffect` hooks manage the asynchronous data loading and rendering pipeline.

Loading thumbnail…

Fork of Loading Data with React & D3

This visualization displays summary statistics about a dataset of CSS named colors. It presents the data’s file size in kilobytes, the number of rows, and the number of columns. The example demonstrates how to load external CSV data with the `d3.csv` utility and manage asynchronously fetched data using React’s `useState` and `useEffect` hooks. The app renders either a loading message or the computed summary as text, and it uses React’s `ReactDOM.render` to mount the component into the DOM.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates the loading and parsing of a CSV file containing CSS named colors, displaying summary statistics about the dataset in a large text format. It shows the file size in kilobytes, the number of rows, and the number of columns present in the data. The code uses D3 v5's `d3.csv` method to fetch and parse the remote CSV file from a GitHub gist, then leverages `d3.csvFormat` to calculate the data size. The results are displayed in a pre-formatted HTML element, providing a clear overview of the dataset's dimensions.

Loading thumbnail…

Fork of Smiley Face Part II

A single yellow circle follows the cursor across a full-window SVG canvas, its position driven by mouse movement events. The React component tracks pointer coordinates in state and re-renders the circle at the current location. The code uses React’s `useState` and `useCallback`, renders via `ReactDOM`, and updates an SVG circle element. The example demonstrates interactive mouse tracking in a React 16.9 environment.

Loading thumbnail…

Fork of Smiley Face Part V

A static smiley face rendered with React components and SVG shows how modular code can split a visualization into reusable pieces. The face’s background circle, eyes, and mouth are each defined in separate files, with constants like center position, eye offset, and radii passed as props from the main `App` component. D3’s `arc` generator creates the mouth path, while React fragments group the two eye circles. The code uses d3.v5 and React 16.9, with an SVG container that centers all elements via a transformed `<g>` group.

Loading thumbnail…

Fork of Smiley Face Part III

This example builds a smiley face entirely with React and D3.js, rendering SVG components. It defines React components for the face’s background circle, eyes, and mouth, with the mouth drawn using the D3 `arc` function to create a precise arc path. The SVG canvas is 960 by 500 pixels, centered with a yellow circle, black stroke, and positioned eyes and mouth via transforms and offsets. The code uses ReactDOM to render the composed `App` component into the HTML root element.

Loading thumbnail…

[DataViz] Hello HTML

This example renders a stylized smiley face as an SVG using React and D3. It combines D3’s `arc` generator to create the mouth and a half-circle for the left eye, while drawing the head, right eye, and stroke with React markup. The face is centered on a 960×500 canvas, with the mouth positioned via angular coordinates and the left eye offset and rotated. The code imports only the `arc` function from D3, leaving the rest of the visualization as explicit React elements.

Loading thumbnail…

[DataViz] Make Face II

An SVG half-smiley face rendered with three yellow circles: one large circle for the head outline and two smaller circles for the eyes, all drawn with black strokes on a 960x500 canvas. The face uses circle elements with explicit cx, cy, r, fill, and stroke attributes, placing the head center at 480,250 with a radius of 245, and the eyes at 350,180 and 600,180 with a radius of 50 each. The code contains no interactive behavior or animations, only static SVG geometry.