Amir

Missing & Death Midrate World Map with Cities

This visualization uses a Natural Earth projection to compare global city populations with reported migrant deaths and disappearances. Users toggle between two views via radio buttons: one shows city populations as scaled circles, the other displays incidents from a Missing Migrants dataset. The map renders land, country interiors, and graticules using D3’s `geoPath` and `geoGraticule`. Square-root scaling controls circle radii for both datasets. Implemented in React with D3 v6, the map fetches CSV data from public gists and TopoJSON from world-atlas.

Mar 30, 2021

Organization Graph Diagram by Draging

This example shows an organization graph as a force-directed network of colored nodes and links, with a few large labeled main nodes connected to smaller child nodes and tiny leaf nodes. Users can drag any node to reposition it, which restarts the simulation and applies forces to the rest of the network. The code uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter`, and renders with SVG circles, lines, and text. Node colors and link distances are defined in a separate data module, while drag behavior is handled via `d3.drag`.

Mar 29, 2021

Force Graph Starter

This example shows a minimal force-directed graph with three nodes and two links, rendered as SVG circles and lines. The simulation uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position the nodes, while a `tick` event updates the circle and line coordinates. Data consists of hardcoded node IDs and link indices in `index.js`, styled with a large font size and hidden overflow via `index.css`. The code imports from D3 v6 and runs within a React-free HTML page, using a fixed 960×500 SVG viewport.

Mar 28, 2021

CoronaVirus LOG scale by Countries VORONOI Choose

This interactive line chart visualizes the cumulative COVID-19 death totals over time for multiple countries, displayed on a logarithmic scale. Users can select a specific country from a dropdown menu or hover over the chart to highlight a particular line and view its exact values. The visualization uses a Voronoi overlay, created with d3.Delaunay, to make it easier to hover near thin or overlapping lines. React manages the interface state, while D3 v5 handles the scales, axes, and path generation, using data from the JHU CSSE COVID-19 dataset.

Mar 28, 2021

CoronaVirus LOG scale Chart by Countries VORONOI

This visualization displays the progression of cumulative COVID-19 deaths over time for various countries, using a logarithmic scale on the y-axis to accommodate wide disparities in reported fatalities. The chart, built with React and D3 v5, renders each country’s time series as a thin, semi-transparent line, and highlights the country currently under the cursor via a Voronoi overlay for precise mouse tracking. Tooltips and a bolder line for the active country provide immediate detail, while the data comes from the JHU CSSE COVID-19 global deaths time series. The implementation uses `d3.scaleLog`, `d3.line`, and `d3.Delaunay` to construct the interactive elements.

Mar 24, 2021

CoronaVirus LOG scale Chart by Countries

This visualization displays the total number of COVID-19 deaths over time for each country, using a logarithmic scale on the y-axis to accommodate the wide range of values. Each country’s trajectory is drawn as a colored line, with hover interactions revealing the country name and death count. The chart uses data from the Johns Hopkins University CSSE COVID-19 dataset, loaded via `d3.csv`. React components manage the SVG rendering, while D3’s `scaleLog`, `scaleTime`, and `line` APIs construct the axes and paths, with axes formatted using `axisBottom` and `axisLeft`.

CoronaVirus LOG scale Chart

This chart visualizes the global cumulative death toll from COVID-19 over time, using a logarithmic y-axis to accommodate the wide range of values from 1 to the current total. The line chart updates over the pandemic's progression, with the final data point labeled with the total death count. Built with React and D3 v5, it loads data from the JHU CSSE COVID-19 time series CSV, transforms it by summing daily global deaths, and renders an SVG with a time-scaled x-axis and log-scaled y-axis. Axis components use D3's `axisBottom` and `axisLeft` for gridlines and tick marks.

CoronaVirus Linear Chart

Using D3 v5 within a React component, this chart visualizes global cumulative COVID-19 deaths over time from the JHU CSSE dataset. A single SVG line path traces the rising death totals, with gridlines and labeled axes generated by `d3.axisBottom` and `d3.axisLeft`. The code scales dates with `d3.scaleTime` and death counts with `d3.scaleLinear`, fetching data via `d3.csv` and formatting it with custom parsing and reduction logic.

CoronaVirus Line Chart with Axis

The chart shows the global cumulative death total from the COVID-19 pandemic over time, using a line path drawn with D3 v5’s `line` generator and scales from `scaleTime` and `scaleLinear`. Horizontal markers at 10,000, 100,000, 500,000, 1,000,000, and 2,000,000 deaths are rendered as rudimentary y-axis gridlines with labels, and the x-axis is built with `axisBottom` and custom tick sizing. Data comes from the Johns Hopkins University CSSE time series CSV, fetched via `d3.csv`, and the visualization is implemented as a React component rendering an SVG.

CoronaVirus Line Chart

This visualization displays the global cumulative death toll from COVID-19 over time as a single black line chart. It uses a React component with D3 v5 scales (`scaleTime`, `scaleLinear`) and a `line` generator to plot data from the JHU CSSE COVID-19 time series dataset. Dashed horizontal markers label key thresholds (10,000 to 2,000,000 deaths) via a custom `YMarkerLine` component, which draws SVG `<line>` elements and formatted text labels. The chart fills the browser window and updates when new data is loaded.

Summaries CoronaVirus Data

This visualization displays the global total of COVID-19 deaths from the Johns Hopkins University CSSE dataset, showing a single number with a comma-formatted value and the last recorded date. The code loads a CSV time series via `d3.csv`, extracts the final column as the latest date, sums all country values using JavaScript’s `reduce`, and formats the total with `d3.format`. The result is displayed as text in a pre element via the DOM API.

Mar 21, 2021

CoronaVirus multiple view with brush

This interactive visualization combines a geographic bubble map with a time-series histogram to explore global COVID-19 death data. A brush on the histogram filters the map’s circles, which represent cumulative deaths per location. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for landmasses, while the histogram employs d3.scaleTime and d3.histogram for binning. Data is loaded via d3.csv from the CSSEGISandData repository, and the React interface manages the linked brushing state.

Mar 21, 2021

CoronaViru Data

This example displays basic metadata about the Johns Hopkins University COVID-19 deaths time series dataset, showing the file size, row count, and column count as text. It fetches the global deaths CSV from GitHub using `d3.csv`, then reads the last column name to confirm the latest date, and formats the data with `d3.csvFormat` to estimate file size. The visualization is minimal, presenting only these three numeric facts in a large font, with no charts or graphs. The code relies on D3 v6’s `d3.csv` and `d3.csvFormat` methods to load and analyze the remote dataset.

Mar 20, 2021

HIV/AIDS Choropleth Map

A choropleth map visualizes the global prevalence of HIV/AIDS among adults aged 15-49 in 2017, with countries colored on a sequential yellow-to-red scale based on infection rates. Missing data renders in gray. Built with React and D3 v6, the map uses `geoNaturalEarth1` and `geoPath` to project world atlas TopoJSON data, while CSV data from the IHME is joined to country codes via a lookup table.

Mar 18, 2021

Missing & Death Migrate World Map

This interactive world map visualizes the locations and magnitudes of missing and dead migrants, with each incident represented by a circle. The circles are sized proportionally to the total dead and missing count using a square-root scale, and are positioned via the `geoNaturalEarth1` projection. The visualization is built with React and D3 v6, using `geoPath` and `geoGraticule` to render landmasses, graticules, and the sphere. The data is sourced from a CSV file containing global migrant incident records, and the map is rendered as an SVG.

Mar 16, 2021

Migration Miss & Death - log scale

This scatterplot displays the number of dead and missing migrants over time, with each circle representing a reported incident. The y-axis uses a logarithmic scale to handle the wide range of values, from one to thousands, while the x-axis maps dates using `d3.scaleTime`. Data is loaded from a CSV file via `d3.csv` and rendered as SVG circles in React. The chart includes custom axis components and hover tooltips showing the exact date and count, with the underlying data sourced from the Missing Migrants Project.

Mar 16, 2021

Missing & Death Migrate multiple view with brush

This visualization combines an interactive world map and a time-series bar chart to explore deaths and disappearances among migrants. A brush on the histogram filters the map’s proportional circles, which encode total dead and missing per incident. The map uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule` for geographic rendering, while the histogram employs `d3.histogram`, `d3.brushX`, and `d3.scaleTime`. Data comes from a CSV of Missing Migrants Global 2019-10-08, rendered with React and D3 v5 into SVG.

Mar 15, 2021

test

An interactive visualization combines a bubble map with a date histogram to explore global migrant deaths. The map uses a natural Earth projection for country boundaries and graticules, with circle radii scaled to the square root of the death count. The histogram bins reported deaths by month, and a brush filter on the histogram updates the map’s displayed data, revealing temporal patterns. Data comes from the Missing Migrants Project CSV, while country shapes are derived from the world-atlas TopoJSON. The implementation leverages D3 v5 for projections, scaling, and brushing, all within a React component rendering SVG.

Mar 15, 2021

Missing & Death Migrate multi view

This visualization combines a world map with a time-series histogram to explore migrant deaths and disappearances. The map uses a D3 geoNaturalEarth1 projection with geoPath, rendering circles scaled by the square root of the total dead and missing per location, overlaid on graticule and land features from the world-atlas TopoJSON. Below, a React-based histogram bins the data by reported date using D3’s bin and timeMonths, summing casualties per month and displaying bars with hover tooltips. Data comes from a CSV of global migrant incidents.

Mar 15, 2021

Total Miss & Death Migration

This visualization shows the monthly total of dead and missing migrants, displayed as a bar chart over time. The bars are rendered as SVG rectangles using React components, with axes generated by custom `AxisBottom` and `AxisLeft` components. It uses `d3.bin`, `d3.timeMonths`, and `d3.sum` to aggregate the data from a CSV file, while `d3.scaleTime` and `d3.scaleLinear` handle the scales. The chart includes hover tooltips showing the exact date and person count.

Mar 3, 2021

Migration Miss & Death

This visualization plots the total number of dead and missing migrants over time, with each circle representing a single reported incident. The data comes from a CSV of Missing Migrants Global 2019-10-08 subset. The chart uses React with D3 v6, employing `scaleTime` and `scaleLinear` for axes and rendering circles as SVG elements. Hovering reveals the precise date and count via a native `<title>` tooltip.

World Map with Cities

A world map displays the Earth's landmasses in green with a blue ocean, overlaid with circles representing cities from a CSV file, sized by population using a square-root scale. The visualization uses React and D3's `geoNaturalEarth1` and `geoPath` APIs to render the map, graticule, and city markers as SVG circles. City data is loaded via `d3.csv` from a remote URL.

Interactive Color Legend

This interactive color legend displays the Iris dataset's sepal length and width, using color to encode species. Hovering over a legend item fades all other data points while highlighting the selected species, making it easy to compare groups. Built with React and D3 v6, the visualization renders circles as an SVG and uses `scaleOrdinal` for color mapping and `scaleLinear` for axes. The legend's `onMouseEnter` and `onMouseOut` events drive the interactive filtering, while the chart's circles respond to the hover state.

Scotter Plot with Color

This scatter plot visualizes the Iris flower dataset, showing sepal length against sepal width, with points colored by species using a D3 scaleOrdinal mapping to orange, teal, and purple. Hovering over a circle reveals its sepal length via an SVG title element. The React app loads CSV data via d3.csv, scales axes with d3.scaleLinear, and renders axes and a categorical color legend using modular React components. The SVG output includes axis tick formatting with d3.format and rotated axis labels.

Stylize Scotter Plot with Menu

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements as circles colored teal on an SVG canvas. Two dropdown menus let users independently select which numerical attribute (sepal length, sepal width, petal length, or petal width) maps to the x-axis and y-axis, with axis labels updating accordingly. Built with React and D3 v6, the example uses `d3.scaleLinear` and `d3.extent` for scales, `d3.csv` for data loading, and custom SVG components for axes and circles. The chart includes hover tooltips via SVG `<title>` elements and a playful RocknRoll One font.

Scotter Plot with Menu

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, implemented with React state, control which attribute appears on the x- and y-axes, with axis labels updating accordingly. The chart uses d3.scaleLinear to map data values to SVG coordinates, with reusable AxisBottom and AxisLeft components rendering ticks and grid lines. Each data point is drawn as a circle with an SVG title tooltip showing its hover value. The visualization is built with d3.v6 and React, loading data via d3.csv.

React Starter Menu

This example shows a simple pet-selection interface built with React. It displays a dropdown menu labeled “Choose a pet” with options for dog, cat, hamster, parrot, spider, and goldfish. The selected value is tracked using React’s `useState` hook and logged to the console on every change. A custom `Dropdown` component wraps a native `<select>` element, receiving options, the current selected value, and an `onChange` handler via props. The app is rendered to the DOM using `ReactDOM.render`, with dropdown styling controlled by plain CSS.

React Starter

This example demonstrates a basic React application with a pet-selection dropdown menu. It uses React 16.9.0 and ReactDOM to render a static form interface with no interactive behavior beyond native HTML select controls. The code imports React and ReactDOM, defines a functional App component containing a `<label>` and `<select>` element, and mounts it to the root DOM node. The page has a gray background with hidden overflow, though no data visualization or charting library is employed.

Smile Face

A yellow smile face rendered with React and D3 v5, drawn as SVG shapes. The face consists of a circle for the head, two smaller circles for the eyes, and an arc-generated mouth using the `d3.arc` API. The entire face group is rotated 25 degrees, with the mouth’s start and end angles set via math constants. The code uses React to create JSX elements and the `arc` function from D3 to compute the mouth’s path, all styled with inline attributes like fill and stroke.

World Map

This example shows a world map rendered with a Natural Earth projection, displaying landmasses in teal with graticule lines and country borders overlaid. The map is drawn as SVG paths using `d3.geoNaturalEarth1` and `d3.geoPath`, with geographic data loaded from the world-atlas TopoJSON dataset via `d3.json` and processed through `topojson.feature` and `topojson.mesh`. A React component orchestrates the visualization, applying CSS styling for the sphere, land, and boundary strokes.

San Francisco Temprature

This visualization displays a week of San Francisco temperature readings as a smooth line chart with circular data points, using a time-based x-axis and linear temperature y-axis. The React app loads CSV data via d3.csv, then renders SVG elements with d3.scaleTime and d3.scaleLinear. The line is drawn using d3.line with curveNatural, while hovering over any circle reveals a tooltip with the exact timestamp and temperature in Celsius. Styled with the RocknRoll One font, the chart includes labeled axes and uses d3.extent and d3.max for domain scaling.

Mar 1, 2021

Scoter Plot

This Scoter Plot visualizes the Iris dataset, showing the relationship between sepal length and sepal width through a scatter plot composed of teal circles. The chart uses d3.scaleLinear to map the data values to pixel coordinates, with axes rendered as SVG elements using React components. The d3.csv method loads the dataset from a GitHub gist, and hover tooltips display the exact sepal length value. The visualization demonstrates how React and D3 can work together to create interactive data displays.

Refactor Bar Chart

This example displays the populations of 20 countries using a horizontal bar chart rendered with React and SVG. The code creates scales with `scaleBand` for countries and `scaleLinear` for population values, and defines custom `AxisBottom` and `AxisLeft` components for ticks. Bars are generated with a separate `BarChart` component, and CSV data is loaded and parsed via `d3.csv` from the UN Population 2019 dataset.

United Nation Population

This bar chart displays the top 10 most populous countries in 2020 based on United Nations population data, using horizontal bars scaled by population size. The React-based visualization employs D3 v6 utilities like `scaleBand` and `scaleLinear` to map country names and population values to SVG coordinates, with tick marks and gridlines generated from the x-axis scale. Data is loaded asynchronously from a CSV file via D3's `csv` function and rendered through React's state management and SVG output.

Fork of Rendering Data with React & D3

This visualization displays the full CSS named color palette as a single circular donut chart, with each color represented by a slice filled with its corresponding RGB hex value. The example uses React’s `useState` and `useEffect` hooks to asynchronously load the CSV data via `d3.csv`, then renders SVG paths generated by `d3.pie` and `d3.arc` with an outer radius equal to the chart width. React handles the component structure and updates, while D3 provides the data parsing and geometric calculations.

Rendering Data with React & D3

This example visualizes a dataset of CSS named colors as a vertical stacked bar chart, where each row renders as a thin colored rectangle. Using React for component state and rendering, the code fetches the CSV data with D3's `csv` function, then maps each data entry to a styled div element. The chart displays 148 color swatches sequentially, with each bar’s background color set directly from the `RGB hex value` field. React’s `useState` and `useEffect` hooks manage asynchronous data loading, while D3 handles CSV parsing and formatting.

Fork of Vega-Lite API Template

This visualization uses a Vega-Lite API template to display an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. The chart plots miles per gallon against horsepower, with points colored by country of origin and sized by vehicle weight. Built with the `vega-lite-api` library alongside D3.js, the visualization reads data from a CSV file and renders as an SVG. Axis labels and tick marks are styled with a custom configuration to improve readability.

Feb 27, 2021

Loading Data with React & D3

This example demonstrates how React and D3 integrate for data loading, displaying file metadata for a CSS named-color CSV dataset fetched from a GitHub gist. It uses React hooks (`useState`, `useEffect`) to manage asynchronous state, and D3’s `csv` method to parse the remote data. The interface renders a text summary—file size in kilobytes, row count, and column count—calculated via `d3.csvFormat` and `data.columns`. During the fetch, a “Loading …” message appears, reflecting the component’s conditional rendering. The visualization highlights a simple yet effective pattern for combining React’s declarative UI with D3’s data utilities.

Feb 26, 2021

Fork of HTML Starter

This example displays basic metadata about a CSV file, showing the file size, row count, and column count as plain text on a web page. It fetches the data from a remote GitHub Gist containing CSS named colors using `d3.csv`, then computes the formatted size with `d3.csvFormat` and reads row and column counts from the resulting array. The code uses D3 v6, with `d3.csv().then()` for asynchronous loading, and writes the summary into a preformatted element via `document.getElementById().textContent`.

Feb 26, 2021

Fork of Fork of Hello HTML

This example shows a yellow circle that follows the mouse cursor within an SVG canvas. The circle’s position updates reactively as the user moves the mouse over the 1000×500 viewport. Built with React 16.9 and D3 v5, it uses React’s `useState` and `useCallback` hooks to track mouse coordinates and re-render the circle’s `cx` and `cy` attributes. The SVG element’s `onMouseMove` event triggers state updates, demonstrating a simple interaction pattern without any external data source.

Feb 26, 2021

Fork of Fork of Hello HTML

A grid of eight yellow smiley faces is rendered as SVG, each with a dark outline, two circular eyes, and an arc-shaped mouth. The faces vary randomly in rotation angle, stroke thickness, and eye size. Built with React and D3, the example uses the D3 `arc` API to generate the mouth path and D3 `range` to create the array of faces. The `Face` component assembles the head, eyes, and mouth, and a rotation transform is applied to each SVG group.

Feb 25, 2021