Skip to main content
Log in
P

patasky

@patasky·16 public vizzes

Loading thumbnail…

Global Coronavirus Deaths

This chart shows global coronavirus deaths over time, with a marker line highlighting the most recent date and another marking the 10,000 death milestone. The line path is generated using d3.line with time-scaled x-values and linear-scaled y-values. Data is loaded as CSV from the CSSEGISandData COVID-19 repository via d3.csv and aggregated per day. The visualization is built with React components, using d3.scaleTime, d3.scaleLinear, and d3.axisBottom, rendered as SVG with custom marker line elements.

Jun 29, 2021
Loading thumbnail…

Miltiple views with brushing

This example shows a linked brushing interaction between a date histogram and a world map of migrant deaths, where dragging a brush across the time axis filters the bubbles displayed on the map. The histogram aggregates monthly totals using d3.bin and d3.sum, while the map projects coordinates with d3.geoNaturalEarth1 and d3.geoPath. The brush is implemented with d3.brushX, and updates are triggered via React state. Data comes from a CSV of missing migrants, and the world atlas is loaded from TopoJSON.

Jun 15, 2021
Loading thumbnail…

Multiple diagrams and maps

A map and a time-series histogram visualize missing migrant data. The map uses a D3 natural Earth projection (`geoNaturalEarth1`) to place circles sized by the square root scale of casualties at their coordinates. The histogram below bins reported dates into monthly intervals using `d3.histogram` and `d3.timeMonths`, drawing rects scaled by total deaths. Both use `d3.scaleSqrt` and `d3.scaleLinear` within a React SVG rendering.

Jun 15, 2021
Loading thumbnail…

Missing migrants

This visualization maps the global distribution of missing migrants, with circle size proportional to the total number of dead and missing individuals per location. It uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render landmasses, graticules, and country boundaries from TopoJSON data. Migrant incident coordinates are projected and drawn as semi-transparent circles scaled with `d3.scaleSqrt`. The data comes from a CSV of the Missing Migrants Project, processed through React hooks and rendered as SVG.

Jun 15, 2021
Loading thumbnail…

Dead migrants

This chart visualizes the total number of dead and missing migrants per month, using data from the Missing Migrants Dataset. It displays a date histogram where each bar represents the aggregated count for that month. The visualization uses `d3.bin` with monthly thresholds to bin the data by date and `d3.sum` to calculate the total for each bin. Rendering is done with SVG and React, with axes generated using custom `AxisBottom` and `AxisLeft` components.

Jun 15, 2021
Loading thumbnail…

Fork of World maping with cities

This interactive map displays world cities with circle sizes proportional to population, overlaid on a geographic projection of Earth. It renders country landmasses, graticules, and interior borders using `d3.geoPath` with `geoNaturalEarth1` projection, while city positions are projected from latitude/longitude coordinates. Population values drive a square-root scale to determine circle radii. The visualization uses React hooks to load TopoJSON world atlas data and CSV city data, with d3.v5 handling geographic calculations and SVG rendering.

Jun 15, 2021
Loading thumbnail…

Scatter plot with menu and colors

This interactive scatter plot visualizes the Iris dataset, showcasing measurements of sepal and petal dimensions. Users can dynamically select which attributes to display on the X and Y axes via dropdown menus. Hovering over the color legend highlights a specific species, fading the remaining data points to emphasize the selected group. Built with React and D3 v5, the visualization renders as an SVG and uses `scaleLinear` for axis scaling and `scaleOrdinal` for categorical coloring.

Jun 14, 2021
Loading thumbnail…

Polished scatter plot with menus

This interactive scatter plot displays the Iris Dataset, with dropdown menus to select which numeric attribute appears on the x and y axes. Built with React and D3 v5, it uses `scaleLinear` for axes, custom `AxisBottom` and `AxisLeft` components for ticks, and SVG circles for data marks with tooltips. Styling incorporates Poppins font and the React Dropdown library for interface controls.

Jun 10, 2021
Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing viewers to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis through the dropdown menus. Built with React hooks and D3.js v5, the visualization uses `scaleLinear` to map data ranges to SVG coordinates and renders circles for individual specimens. The axis components dynamically update with `tickFormat` for readable labels, while hover tooltips reveal exact values. The code demonstrates a reusable pattern for building linked interactive visualizations from CSV data using `d3.csv` and React state management.

Jun 10, 2021
Loading thumbnail…

Menus with React

This example demonstrates a React-based dropdown menu for selecting a pet from a list of six options. The chosen value is logged to the console and passed as a prop to a custom `Dropdown` component, which renders a native HTML `<select>` element. The component manages its state using React’s `useState` hook and updates the selection via an `onSelectedValueChange` callback. The code uses React 16.9 and ReactDOM, with the app mounted into a root div.

Jun 10, 2021
Loading thumbnail…

World maping

This example displays a world map rendered as an SVG using React and D3. It shows country boundaries via a spherical equal-earth projection, with land areas filled in teal and the surrounding sphere in light gray. The visualization loads GeoJSON data from the World Atlas TopoJSON file, converts it using topojson’s `feature` method, and draws the paths with `d3.geoPath`. The map is static, with no interaction or animation.

Jun 1, 2021
Loading thumbnail…

Working with time

A line chart displays temperature readings over a week in San Francisco, using a smooth natural curve to connect hourly data points. The visualization loads CSV data via `d3.csv`, maps timestamps with `scaleTime` and temperatures with `scaleLinear`, and renders axes and marks as SVG elements through React components. The chart shows the full week on the x-axis with abbreviated weekday labels and temperature on the y-axis, enabling a clear view of daily temperature fluctuations across the period.

Jun 1, 2021
Loading thumbnail…

Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width. A responsive tooltip, implemented with SVG `<title>` elements, reveals each flower's petal length on hover. Built with React and D3 v5, it uses `scaleLinear` from `d3-scale` to map data values, plus custom React components for axes and marks. The chart uses a clean, stylized design with a Poppins font and muted green and teal colors.

May 26, 2021
Loading thumbnail…

Visualization in react and d3

This example demonstrates the integration of React and D3 within a minimal HTML page. It renders the text “Hello HTML” in large, centered typography, with a JavaScript console log confirming the script’s execution. The code uses a plain HTML structure with inline CSS styling and a script tag for basic JavaScript, highlighting a straightforward approach to combining React and D3 without complex visualization logic. It serves as a foundation for building interactive data visualizations.

May 25, 2021
Loading thumbnail…

Fork of loading data with D3

This example shows a color wheel built from a CSV dataset of RGB hex values, rendered as an SVG pie chart with React. It loads data using D3’s `csv` function and computes the pie layout with `d3.pie`, while `d3.arc` generates the path geometry for each colored slice. The chart updates from a loading state to the final visualization once data arrives, with each slice filled by its corresponding hex value.

May 21, 2021
Loading thumbnail…

loading data with D3

This example displays a dataset of color values as horizontal stripes, each rendered as a colored bar that fills the width of the page. The visualization uses React hooks to manage asynchronous data loading with `useState` and `useEffect`, while D3’s `csv` function fetches the data from a GitHub Gist. Once the data arrives, the component maps each row to a styled `div` element, using the `RGB hex value` column as the background color. The page shows a simple "Loading..." message until the data is ready.

May 21, 2021