Shanmukh

Organization Graph Diagram

Fork of Organization Graph Diagram

A force-directed network graph illustrates the connections among organizations linked to the Kenneth Rainin Foundation, using colored parent nodes with child clusters and unattributed leaf nodes to show hierarchy. The d3.forceSimulation API applies forceManyBody, forceLink, and forceCenter to arrange the SVG circles and lines, while drag interaction lets users reposition nodes. Data from the foundation’s partnerships drives the layout, with node size and color distinguishing main entities from smaller affiliations.

Organization Network Graph

This example visualizes a small organizational network of three people—Alice, Bob, and Carol—as connected nodes in a force-directed graph. The code builds the layout using d3.forceSimulation, applying d3.forceManyBody for repulsion, d3.forceLink for edges, and d3.forceCenter to anchor the arrangement. Nodes are rendered as SVG circles appended to an #container element, with a link array defining the two connections between them. The simulation logs a "tick" event on each iteration, though node positions are not yet updated in the SVG.

Voronoi Overlay with labels

A log-scaled line chart tracks cumulative COVID-19 deaths per country over time, sourced from the Johns Hopkins dataset. On hover, a Voronoi overlay, generated via `d3.Delaunay` from the line chart's points, captures the mouse to highlight the nearest data point and display a tooltip with the country, total deaths, and date. The active country's line is emphasized in black. The visualization, built with React and D3 v5, renders SVG elements and uses `d3.timeParse` for date handling and D3's `extent`, `max`, and `scaleLog` for scaling.

Corona Virus Deaths Over Time by Country With Voronoi

This interactive chart shows the cumulative number of COVID-19 deaths over time for multiple countries, displayed on a logarithmic scale. Using a Voronoi overlay, hovering over its cells highlights and emphasizes the corresponding country’s trajectory. Built with React and D3 (v5), it employs `scaleLog`, `scaleTime`, and the `d3-delaunay` library to construct the interactive voronoi regions, with data sourced from the CSSEGISandData COVID-19 GitHub repository.

Corona Virus Deaths Over Time by Country

This chart visualizes global COVID-19 deaths over time for each country, with a logarithmic y-axis to accommodate wide disparities in cumulative death counts. The lines are drawn using D3's `line` generator with `scaleTime` and `scaleLog` scales, while React components handle the SVG rendering and axis construction via `axisBottom` and `axisLeft`. Data is fetched from the CSSEGISandData COVID-19 GitHub repository, with random RGB stroke colors assigned to each country's trajectory.

Corona Virus LineChart with Labels

Corona Virus Log Y Axis

This example visualizes global COVID-19 death totals over time, using a logarithmic y-axis to better display the rapid exponential growth curve. The chart is built with React and D3 v5, employing `d3.scaleLog` for the y-scale and `d3.scaleTime` for the x-axis, with data sourced from the CSSEGISandData COVID-19 time series. Interactive gridlines and marker lines highlight the current date and the six-million death threshold.

Corona Virus LineChart with LogScale

This chart displays the global cumulative death toll from COVID-19 over time, using a line plot with a log-scaled Y-axis to better reveal the exponential growth trend. The visualization is built with React and D3 v5, where D3’s `scaleTime` and `scaleLinear` handle the axes, and the `line` generator traces the path. Data is loaded from the CSSE COVID-19 time series CSV, aggregated by day, and rendered as an SVG within a React component, with marker lines highlighting the current date and a death count of six million.

Corona Virus LineChart with Axes

This interactive chart displays global COVID-19 deaths over time using a single black line path, with horizontal and vertical marker lines highlighting the six-million-death milestone and the most recent date. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` from d3-shape to generate the SVG path, while `axisBottom` renders the time axis. The data comes from the CSSEGISandData COVID-19 GitHub repository and is aggregated daily. The chart dynamically updates to fill the browser window, with subtle gray gridlines and labeled annotations.

Corona Virus LineChart with Margin

This example displays a global COVID-19 death toll line chart, highlighting the moment cumulative deaths reach six million with horizontal and vertical marker lines. Built with React and D3 v5, it uses `d3.scaleTime` and `d3.scaleLinear` to map dates and death counts, while `d3.line` generates the SVG path. Data is fetched and parsed from a CSV URL via `d3.csv` and `d3.timeParse`.

Corona Virus LineChart

This example shows the global total COVID-19 deaths over time as a single black line chart, with a horizontal marker line at six million deaths. The data comes from the CSSE COVID-19 time series CSV, aggregated daily across all countries. Built with React and D3 v5, it uses `scaleTime`, `scaleLinear`, and `line` to map dates and death totals to SVG coordinates, while the marker line is drawn with a simple SVG `<line>` element at a fixed y-value.

Summarizing Corona Virus Data

Loading and Parsing Corona Virus Data

This example demonstrates the basic process of loading and parsing the Johns Hopkins Coronavirus dataset using D3.js. It fetches a CSV file containing global COVID-19 death statistics and reports the number of rows, columns, and file size in kilobytes. The visualization uses `d3.csv` to asynchronously retrieve and parse the remote data, then displays the summary information as large HTML text via `document.getElementById` and `textContent`. The output provides a quick overview of the data’s structure without any graphical charting.

HIV/ AIDS Choropleth Map

This choropleth map visualizes HIV/AIDS prevalence among adults aged 15–49 for the year 2017, using a sequential yellow-to-red color scale to show infection rates across countries. The visualization employs d3.geoPath with a geoNaturalEarth1 projection to render world country boundaries, graticules, and interior borders as SVG paths. Data comes from the Institute for Health Metrics and Evaluation (IHME) via a CSV file, joined to country shapes using ISO numeric codes. Countries without data appear gray, and React manages the component state while d3.ajax loads the world atlas and datasets.

Missing Migrants Scatter Plot Log Scale

Multiple Views with Brushing

Two linked views display the global distribution of dead and missing migrants: a proportional symbol map of bubble radii scaled by casualties via `d3.scaleSqrt` and a time-series histogram with monthly bins agggregating the same totals. Brushing a time interval on the histogram’s brushable axis filters the map’s rendered circles in real time. Built with React, D3 v5, and SVG, the map uses `d3.geoNaturalEarth1` for projection and `d3.geoGraticule`, while the histogram uses `d3.scaleTime` and `d3.histogram` with data from the Missing Migrants Project.

Multiple Views

This visualization combines a proportional-symbol world map with a time-series bar chart to reveal the spatial and temporal distribution of missing migrants. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` to render land, graticules, and sphere, with circle sizes scaled by `d3.scaleSqrt` according to the total dead and missing per incident. Below, a date histogram bins incidents by reported date using `d3.histogram` and `d3.timeMonths`, summing the same metric per bin. The React components render to SVG, with data sourced from the Missing Migrants Project CSV.

Missing Migrants

This visualization displays a histogram of missing migrants over time, using a bar chart to show the total count of dead and missing people aggregated by month. The chart plots reported dates on the x-axis and the sum of dead and missing migrants on the y-axis, with data sourced from a CSV file. Built with React and D3 v5, the code uses `d3.histogram` with `timeMonths` thresholds to bin the data, `scaleTime` and `scaleLinear` for axes, and renders SVG elements via reusable components.

Missing Migrants on a Map

This visualization displays the locations of missing migrants on a world map, with circle size proportional to the reported number of dead and missing individuals. The map uses a Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath, with landmasses, graticules, and country borders rendered from TopoJSON data. Circles are positioned using the projection and scaled with d3.scaleSqrt. React manages the component state, while data is loaded from a CSV of Missing Migrants Global records using d3.csv.

Stylized Line Chart

This stylized line chart visualizes temperature readings over a week, sourced from San Francisco weather data, with the x-axis showing time in days and the y-axis showing temperature. The chart uses a natural cubic spline curve via d3.line’s curveNatural to create a smooth line, with circular data points that display tooltips on hover. The visualization is built with React, renders as SVG, and employs d3.scaleTime for the time axis and d3.scaleLinear for the temperature scale, styled with a Poppins font and custom color scheme.

Points on a Map

This visualization displays cities on a world map, with circle area encoding each city’s population. A natural Earth projection, rendered via `d3.geoPath`, draws land, country interiors, graticules, and a sphere backdrop in SVG. City coordinates are projected using `d3.geoNaturalEarth1`, and circle radii come from a `d3.scaleSqrt` scale. The map uses world-atlas TopoJSON data, while city populations come from a cleaned CSV of world cities sourced from the UN World Population Prospects 2019.

Interactive Color Legend

Scatter plot with color legend

Scatter plot with colors

This example visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. Each point is colored by species using a categorical color scale. The visualization is built with React and D3 v5, using `scaleLinear` to map data to coordinates and `scaleOrdinal` for species colors. Axes are rendered as SVG elements, with numeric formatting applied to tick labels via D3’s `format` function.

Scatter Plot with colors

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between four flower measurements by changing the X and Y axes via dropdowns. The SVG visualization uses d3.v5's `scaleLinear` for axes and `extent` for domain calculations, with React managing state. Points are rendered as circles, and hovering reveals tooltips. Data is loaded asynchronously via d3's `csv` function from a GitHub-hosted CSV file.

Polished Scatter Plot with menus

Scatter Plot with menus

Menus with React

Making a Scatter plot

world map

This example visualizes a world map using a natural Earth projection, rendered as an SVG in React. Landmasses are filled with a teal color and outlined in gray, while graticule lines and the sphere’s silhouette are displayed in light gray. Interiors between countries are drawn as a separate mesh in a different teal stroke. The map loads GeoJSON from the world-atlas package, processes it with `topojson` functions `feature` and `mesh`, and draws paths via `d3.geoPath` using `d3.geoNaturalEarth1`. The data originates from the United Nations World Population Prospects, though population values are not depicted.

World Map

A world map visualization displays the top 10 most populous countries as a bar chart using SVG rendering with React. The chart plots temperature data over time, with D3 scales (scaleTime, scaleLinear) and axes built from custom AxisBottom and AxisLeft components. The Marks component uses d3.line with curveNatural to draw a smooth path, while circles represent individual data points with tooltips. Data comes from the United Nations World Population Prospects 2019 via a JSON URL fetched using d3.json.

Stylized Line chart

This stylized line chart visualizes the relationship between sepal length and sepal width in the Iris dataset. Built with React and D3 v5, it uses `scaleLinear`, `extent`, and `nice` functions to map data to SVG coordinates, with custom `AxisBottom` and `AxisLeft` components rendering tick marks and labels. A `Marks` component overlays circles with tooltips, styled with a Poppins font and a teal color scheme. The data is loaded via `csv` from a GitHub-hosted CSV file, and the chart applies `format` for tick labels, creating a clean, modern aesthetic.

Stylized Bar chart

This stylized bar chart displays the top 10 most populous countries in 2020, using horizontal bars colored in teal against a clean white background. The visualization emphasizes readability with generous margins, a left-aligned country axis, and a formatted x-axis that converts population values into billions using D3’s format function. Built with React and D3 v5, the chart renders as SVG, pulling data from the United Nations World Population Prospects 2019 dataset via a CSV URL, with scaling handled by `scaleBand` and `scaleLinear`.

Loading Data using D3 and React

Fork of Vega-Lite API Template

Loading and Parsing CSV

This example demonstrates how to load and parse CSV data using D3.js v7. It fetches a dataset of CSS named colors from a GitHub gist and displays three key statistics: the total row count, column count, and file size in kilobytes. The visualization uses `d3.csv()` to asynchronously retrieve and parse the data, then `d3.csvFormat()` to calculate the data size. Results are rendered as large text inside an HTML `<pre>` element, showing the parsed data’s dimensions and magnitude.

Fork of Hello HTML

A yellow smiley face is rendered inside an SVG canvas, composed of a circular head, two eyes, and an arc-shaped mouth. The visualization uses React components for each facial feature, with D3.js’s `arc` function generating the mouth’s path. All elements are positioned relative to the canvas center using SVG transforms. The code defines constants for dimensions and spacing, showing a modular approach to assembling a simple geometric illustration.