Skip to main content
Log in
S

suserocc

@suserocc·23 public vizzes

Loading thumbnail…

[SR] HIV/Aids Infections on World Map

A choropleth world map visualizes the share of the population infected with HIV/AIDS in 2017, using a yellow-to-red sequential color scale. Countries lacking data are filled in gray. Built with React and D3 v5, the map uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for country boundaries, and `d3.geoGraticule` for graticules, with data from a CSV file on HIV prevalence.

Mar 7, 2021
Loading thumbnail…

[SR] Missing Migrants Log Scale

This scatter plot shows reported dates versus total dead and missing counts for individual migration events, with a logarithmic y-axis to accommodate extreme values. The visualization uses React to render SVG circles, with d3.scaleTime and d3.scaleLog for scaling, and custom AxisBottom and AxisLeft components. Data comes from the Missing Migrants Dataset, loaded via d3.csv, and each point includes a tooltip displaying the formatted date.

Mar 7, 2021
Loading thumbnail…

[SR] Missing Migrants -- Brushing on Multiple Views

This example shows missing migrant deaths and disappearances on a world map, with a time-series histogram below displaying monthly totals. Brushing across the histogram filters the map’s circles to only show incidents within the selected date range. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` with World Atlas TopoJSON, while the histogram uses `d3.bin` and `d3.brushX`. React manages state, and data comes from a CSV of missing migrant records.

Mar 7, 2021
Loading thumbnail…

[SR] Missing Migrants -- Multiple Views

The visualization combines a bubble map and a time-series histogram to explore deaths and disappearances among migrants. The map uses a natural Earth projection and `d3.geoPath` to render country boundaries, graticules, and semi-transparent circles sized with `d3.scaleSqrt`. The histogram, built with `d3.histogram` and `d3.scaleTime`, aggregates monthly totals from the missing migrants dataset. Both views share SVG rendering within a React framework, using `d3.csv` to load the data.

Mar 5, 2021
Loading thumbnail…

[SR] Missing Migrants on World Map

A world map displays the geographic distribution of missing migrants from 2004 to 2021, using semi-transparent circles sized by the total dead and missing count. The map is rendered with React and D3 v5, using `geoNaturalEarth1` for projection, `geoPath` for country boundaries and graticules, and `scaleSqrt` to map fatality counts to circle radii. Data comes from a CSV file of migrant incidents, plotted over land features from the World Atlas TopoJSON.

Mar 5, 2021
Loading thumbnail…

[SR] Missing Migrants Line Chart

This chart visualizes the total number of dead and missing migrants over time, using a bar chart with an overlaid line to show the trend. The data is binned into monthly intervals using D3’s `bin` and `timeMonths` functions, with bar heights representing the monthly sum and a natural curve line connecting the values. Built with React and D3 v6, it uses `scaleTime` and `scaleLinear` for axes, rendered as an SVG with custom axis components. The tooltip on each bar displays the exact monthly total.

Mar 5, 2021
Loading thumbnail…

Points on World Map

This visualization displays a Natural Earth projection world map with semi-transparent circles sized by city population. The map renders landmasses, country borders, and graticules using d3.geoPath and d3.geoNaturalEarth1, with data from World Atlas TopoJSON. City locations and populations come from a CSV file, with circle radii scaled by d3.scaleSqrt. The React component structure uses hooks to load both datasets asynchronously, and all marks are drawn as SVG elements.

Mar 4, 2021
Loading thumbnail…

[SR] next try: Scatter Plot with Menu

This interactive scatter plot visualizes the Iris dataset, allowing users to select which flower measurements to plot on the x and y axes via two dropdown menus. The visualization uses React for the user interface and D3.js for rendering the SVG elements, including axes, data points, and a color legend. By hovering over the legend, the plot highlights data points of a selected species while dimming others. The chart's data is loaded asynchronously from a CSV file using D3's `csv` function.

Mar 4, 2021
Loading thumbnail…

[SR] Scatter Plot with Menu

This scatter plot visualizes the Iris dataset, allowing users to change the x-axis attribute via a dropdown menu. The y-axis is fixed to sepal width. The visualization is built with React and D3 v6, using `scaleLinear` for axes and rendering circles as SVG marks. Data is loaded from a CSV file using D3's `csv` function. The interface includes a select element to switch among the dataset's attributes, demonstrating adaptive visual encoding.

Mar 2, 2021
Loading thumbnail…

[SR] Menus with React

This example shows a React-based dropdown menu for selecting a pet, with a label and a styled select element. The selected value is tracked via the `useState` hook and updates the dropdown's displayed choice. The code defines a reusable `Dropdown` component that maps over an array of pet options, and it renders the interface using ReactDOM. The page loads React and ReactDOM from unpkg CDN libraries.

Mar 1, 2021
Loading thumbnail…

[SR] React Starter

This example demonstrates a minimal React application that renders a simple message, "Hello React!" to the browser. It uses React 16.9.0 and ReactDOM to mount a functional component onto a DOM element with the ID "root". The page is configured with a hidden overflow and zero margin, while the JavaScript bundle is loaded from a separate file. The visualization serves as a starter template, showing how React can be integrated into a blank webpage environment.

Mar 1, 2021
Loading thumbnail…

[SR] World Map

This example displays a world map with countries, graticules, and country borders rendered as SVG paths. The visualization uses a natural Earth projection defined by `d3.geoNaturalEarth1`, with `d3.geoPath` generating the geographic shapes. Landmasses appear in teal, graticules in gray, and country boundaries in a lighter teal. The data comes from the world-atlas TopoJSON file, processed through `topojson.feature` and `topojson.mesh` to extract land polygons and interior borders.

Mar 1, 2021
Loading thumbnail…

[SR] Line Chart with React & D3

This visualization displays temperature readings over time as a smooth line chart. Data is loaded from a CSV file containing weekly San Francisco temperature measurements and rendered as an SVG using React. The implementation leverages D3 v6 utilities including `scaleLinear`, `scaleTime`, `extent`, `line`, and `curveNatural` to compute scales and draw the line path, while custom React components manage axes and interactive data point circles with tooltips.

Feb 28, 2021
Loading thumbnail…

[SR] Scatter Plot with React & D3

This scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset, with each point colored teal and showing tooltips on hover. The visualization is built using React components that leverage D3’s `scaleLinear` and `extent` for scaling axes, while custom `AxisBottom` and `AxisLeft` components render SVG tick marks and labels. Data is loaded asynchronously via D3’s `csv` parser from a GitHub gist. The chart displays formatted tick values (like compact notation) and includes rotated axis labels, with margins defining the plot area.

Feb 28, 2021
Loading thumbnail…

[SR] Bar Chart with React & D3

A horizontal bar chart displays the ten most populous countries in 2020, using population data loaded from a CSV file. The chart is built with React components and D3 scales, where `d3.scaleBand` positions the categorical country labels on the y-axis and `d3.scaleLinear` maps population values to bar widths. Axis ticks and labels are rendered as SVG elements using D3’s `scaleBand` and `scaleLinear` APIs, while bars include native SVG `<title>` tooltips showing formatted population values. The visualization is rendered entirely in SVG, with a clean layout defined by explicit margins and a Poppins font.

Feb 28, 2021
Loading thumbnail…

[SR] PII: Rendering Data with React

This example shows a pie chart built with React and D3, visualizing a CSV dataset of CSS named colors loaded from a GitHub gist. The chart renders as an SVG where each color name is represented by a slice of the pie, filled with its corresponding RGB hexadecimal value. React manages the component state and lifecycle, fetching the data with `d3.csv` inside a `useEffect` hook, while the `d3.pie` generator and `d3.arc` compute the slice geometry, which is then mapped to SVG `<path>` elements.

Feb 27, 2021
Loading thumbnail…

[SR] Rendering Data with React

This example displays a dataset of CSS named colors as a vertical stack of horizontal color bars, one row per color. The React app fetches a CSV file from a GitHub gist using `d3.csv`, stores it in component state with `useState` and `useEffect`, then maps over the data to render divs with inline styles setting each row’s background color from the `'RGB hex value'` column. A separate `Message.js` module computes summary statistics (file size, row and column counts) via `d3.csvFormat`. The visualization uses React 16.9 and D3 v6, outputting SVG-like blocks in a full-viewport layout.

Feb 27, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a scatter plot of automobile data, mapping miles per gallon against horsepower. Points are colored by country of origin and scaled in size by vehicle weight, with tooltips showing car model names. The example demonstrates the vega-lite-api library, which provides a JavaScript interface for building Vega-Lite specifications, combined with Vega and vega-lite for rendering. Data is loaded asynchronously via d3.csv from a remote CSV file containing auto-mpg statistics. The visualization uses SVG rendering, custom axis styling from a config object, and adjusts to fill the browser window.

Feb 27, 2021
Loading thumbnail…

Loading Data with React

This example demonstrates how React can load and display CSV data using D3. It shows a text summary of the dataset’s size, row count, and column count, rendered inside a `<pre>` element. The code uses React hooks (`useState`, `useEffect`, `useCallback`) to fetch data via `d3.csv` from a GitHub gist containing CSS named colors. D3 v6 provides `d3.csvFormat` for calculating file size, while the message is conditionally rendered after the data loads. The visualization is purely textual, with no SVG or graphical output.

Feb 27, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the D3.js library. It displays the file size in kilobytes, row count, and column count of a remote CSV file containing CSS named colors after fetching it with `d3.csv`. The asynchronous operation retrieves data from a GitHub Gist URL, then uses `d3.csvFormat` to measure the data size and presents the summary in a large HTML `<pre>` element.

Feb 27, 2021
Loading thumbnail…

ssrcc: Hello HTML

A grid of eighteen smiling faces rendered in SVG, each with randomized facial features including eye position, eye radius, mouth width, and stroke thickness on a yellow circular background. Built with React components that compose `<circle>` and `<path>` elements, the visualization uses the D3 `arc` API to generate each mouth's half-circle path. The layout comes from `d3.range`, and all geometry is computed from constants passed as props to the `Face` component, demonstrating a modular, data-driven approach to generating visual elements.

Feb 27, 2021
Loading thumbnail…

Mouse Follower

A yellow circle inside an SVG canvas tracks the mouse cursor, updating its position in real time. Built with React and rendered as SVG, the app uses a `useState` hook to store the cursor’s coordinates and a `useCallback` handler that listens to the SVG’s `onMouseMove` event, updating the circle’s `cx` and `cy` attributes accordingly. The example demonstrates a simple interactive pointer-following visual.

Feb 27, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the foundational process of loading and parsing CSV data for visualization, using a minimal HTML page with a script tag. It shows an empty visualization canvas where the core task is fetching external data, which would be parsed and prepared for graphical representation. The code relies on standard JavaScript and the HTML DOM, with a placeholder for data integration, and is designed to serve as a starting point for building more complex data-driven graphics. No external libraries are loaded; the focus is on the initial data-handling steps.

Feb 27, 2021