Waseem Medhat

Get it Right - Scatter Plot

This scatter plot visualizes the relationship between petal length and sepal length in the Iris dataset, with each flower represented as a circle. The visualization uses d3.csv to load the data, d3.scaleLinear for coordinate mapping, and a custom scatterPlot function that employs d3.axisBottom and d3.axisLeft for the axes. The SVG is rendered across the full browser window, with points styled with a fixed radius, and the code leverages d3’s data join pattern to manage the circle elements.

Dec 3, 2022

D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. The visualization uses D3 v7’s `select`, `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` APIs to load the data, compute scales, and render SVG circles and axes. The plot fills the browser window, with bold tick labels, and the code demonstrates a straightforward data-ink pipeline from CSV parsing to interactive-free SVG rendering.

Dec 2, 2022

Fork of D3 Starter

A fork of D3 Starter shows a dynamic scatterplot of beige circles undulating across a dark SVG canvas. The circles’ vertical positions follow a sine wave, while their count fluctuates over time. Using D3 v7, the code employs `select`, `range`, and `join` to bind data and update circle attributes on a setInterval, with `easeLinear` imported but unused. The animation runs continuously, updating every 100 milliseconds.

Nov 30, 2022

Sol Lewitt (D3)

Two overlapping grids of thin horizontal and vertical rectangles render on an SVG canvas, creating a crosshatched composition. Masking reveals the pattern only within two circular regions: one section shows horizontal lines, while the other displays vertical lines. Built with vanilla JavaScript and D3 v6, the code uses `select`, `range`, and `join` to generate 100 rectangles per axis, with SVG `mask` elements defining the circular cutouts.

Nov 29, 2022

Get it Right - 3: Sol Lewitt (JS)

An animated SVG composition generates Sol LeWitt-inspired geometric art using vanilla JavaScript. It renders a grid of darkslateblue vertical and horizontal rectangles with beige strokes, where horizontal bands are clipped by a white rectangle mask over a black background. Every 750 milliseconds, the render function recreates the SVG with a randomly chosen line width between 20 and 35 pixels, altering the grid density. The piece updates dynamically, shifting from a dense weave to a sparser lattice while maintaining the stark black, white, and blue palette.

Nov 29, 2022

Get It Right - 1: SVG Fundamentals

This example demonstrates a minimalist SVG composition inspired by Nadieh Bremer’s talk on gradients and filters, featuring a glowing sun-like circle layered over a vertically striped backdrop. The rendering uses a custom linear gradient (`<linearGradient>`) with abrupt color stops to create a bold, banded sky, while a blurred circle (via `<feGaussianBlur>`) produces a halo effect around a solid core. The scene is drawn entirely with raw SVG elements—`<rect>` and `<circle>`—inside a static `index.html`, with no external libraries or data-binding. A hidden `<defs>` section defines both the gradient and blur filter for reuse.

Nov 27, 2022

Pseudo Slope Graph

A pseudo slope graph visualizes change across two points in time using black slanted lines connecting circular nodes, all rendered in SVG. The static chart includes horizontal and vertical axes, with data points positioned along the timeline. Created in Figma and exported as SVG, the visualization uses basic SVG elements—`line`, `circle`, and `path`—without any JavaScript libraries like D3. The minimal styling, including black strokes and fills, and the absence of interactivity highlight its static, design-tool origin.

Mar 15, 2021

SVG Fundamentals

This example demonstrates the fundamental use of SVG path elements to construct a geometric composition. It shows a series of diagonal lines converging toward a common point, paired with a filled polygon that spans the lower portion of the canvas. The visualization uses raw SVG markup within an HTML document, applying CSS to style the paths with black strokes and no fill, while the polygon uses a black fill. The code relies on native SVG APIs, including the `path` element and its `d` attribute, with no external JavaScript libraries involved.

Mar 12, 2021

Waseem's Rank on HackerRank

This visualization tracks Waseem's rank on HackerRank’s JavaScript problem-solving leaderboard from November 2020 to February 2021. A step-after line chart shows rank improving from approximately 969,000 to 129,000 using a logarithmic y-scale. The React app uses d3.scaleTime and d3.scaleLog for axes, with mouse movement snapping to data points via xScale.invert. SVG rendering includes custom axis components, hover tooltips displaying formatted dates and ranks, and Tippy-based point interactions.

Feb 10, 2021

Timeline Points

This example shows a simple timeline visualization with a horizontal line representing the date range from December 27, 2019, to February 12, 2020. The React and D3 code uses `d3.scaleTime` to map the date domain to pixel coordinates within an SVG. A `VizContainer` component, created with the margin convention, renders the framework, and a single `<line>` element is drawn across the inner width to mark the timeline base.

Feb 1, 2021

Time Preference

This example visualizes the cumulative net benefit of two programs over time, comparing undiscounted versus discounted cash flows. Two smoothed line series per program show how discounting reduces future benefits, with dashed lines representing raw cumulative net benefits and solid lines showing discounted values. The visualization uses React components with D3 scales (`scaleLinear`, `scalePoint`) to map years and currency values, while `d3.line` with `curveNatural` generates the paths. Data comes from a CSV file processed with `d3.csv`, where costs and benefits are discounted at 10% annually.

Jan 10, 2021

Bar Chart with Brushing

This interactive bar chart demonstrates how brushing can reconcile the trade-off between a zero baseline and emphasizing small differences. The visualization displays two horizontal bars comparing scores across groups, rendered as SVG rectangles using React components. A linked brushing interface, implemented with d3.brushX, allows users to select a region on the top chart, which then dynamically updates the bottom chart’s x-scale domain via d3.scaleLinear. The data originates from a CSV file loaded with d3.csv, and React’s useState hook manages the brush extent state for responsive zooming.

Jan 2, 2021

Polished Scatterplot with Menus

A scatterplot of the Iris dataset plots two chosen flower measurements against each other, with dropdown menus for selecting the X and Y axes. The SVG visualization uses d3.scaleLinear for axes, d3.extent for data domains, and d3.format for tick labels. Custom React components handle axis rendering and marks, while ReactDropdown provides menu interaction.

Jan 2, 2021

Analyzing Missing Migrants (Multiple Views w/ Brushing)

This interactive visualization explores global migration incidents, showing a world map with circles sized by the total number of dead and missing migrants at each location. Below, a date histogram displays the monthly sum of casualties, and users can brush across this timeline to filter which incidents appear on the map. The map uses a natural Earth projection via `d3.geoPath` for land and graticule rendering, while the histogram and brushing rely on `d3.scaleTime`, `d3.histogram`, and `brushX`. Data comes from the Missing Migrants Project CSV, rendered as SVG circles with square-root scaling.

Jan 1, 2021

Coronavirus Line Chart (by Country)

A line chart tracks global cumulative COVID-19 deaths over time for each country, using a logarithmic y-axis to handle the wide range of values. The chart plots a single dark path representing the total deaths across all countries, with a red dashed marker line highlighting the 10,000-death threshold. The visualization is built with React and D3 v6, using `scaleTime` and `scaleLog` to map dates and death totals, and `line()` to generate the SVG path. Data comes from the CSSEGISandData COVID-19 time-series CSV, loaded via `d3.csv` and transformed with `timeParse`.

Dec 25, 2020

Coronavirus Line Chart

A line chart tracks global cumulative COVID-19 deaths over time, using a logarithmic y-axis to show growth across multiple orders of magnitude. Built with React and D3 v6, it fetches live data from the Johns Hopkins CSSE GitHub repository via `d3.csv`. The chart renders as SVG, with scales created by `scaleTime` and `scaleLog`, axes via `axisBottom` and `axisLeft`, and a tomato-colored `MarkerY` annotation highlighting the 10,000-death threshold.

Dec 25, 2020

Tippy.js Tooltip for React Components

This example demonstrates how to add a tooltip to a React component using Tippy.js. It renders a dark blue message box and displays a tooltip containing formatted text with an emphasized word when the user hovers over it. The code uses the `Tippy` component from `@tippyjs/react`, which wraps a `<div>` element and accepts a `content` prop for the tooltip’s HTML. The React app is powered by `react` and `react-dom` UMD builds, with Tippy.js and Popper.js loaded via CDN for positioning.

Dec 23, 2020

Project Breakdown

This visualization displays a breakdown of time spent on tasks within a project, organized hierarchically by category, task, and item. Three horizontal bands of rectangles, colored by category via `d3.scaleOrdinal`, show cumulative durations positioned with `d3.scaleLinear`, while `d3.scaleBand` lays out the levels. Hovering reveals tooltips from `tippy.js`, and labels show approximate hours per category. The React-based SVG chart loads CSV data using `d3.csv` and aggregates it with `d3.groups`, `d3.sum`, and `d3.cumsum`.

Dec 15, 2020

D3 Practice

This example demonstrates how D3’s data join handles changing datasets, showing circles rendered from an array of five random integers. After drawing all circles, the code trims the data to three items, and the exit selection removes the extra circles from the SVG. It uses React 16.13 and D3 v6, with the `d3.randomInt` generator supplying values and D3’s selection methods (`data`, `enter`, `exit`) managing circle updates. The SVG is appended directly to the body, with no interactive behavior beyond the static removal.

Dec 13, 2020

Box Plot

This example displays a horizontal box plot summarizing the distribution of age values from a hepatitis C patient dataset. The chart shows the minimum, first quartile, median, mean, and maximum as colored lines and a rectangle, with whiskers extending to the full data range rather than using the 1.5 IQR rule. Built with React and D3 v6, it computes statistics using d3.min, d3.max, d3.quantile, and d3.mean, scales the x-axis with d3.scaleLinear, and renders SVG elements through reusable AxisBottom and BoxPlot components.

React + D3 + useData Viz Starter

This example demonstrates a minimal React + D3 starter template for building SVG visualizations with a reusable margin convention. It fetches Hepatitis C data from a CSV URL using a custom `useData` hook built with `useEffect` and `useState`, loading via D3’s `csv` method. A `VizContainer` component abstracts the SVG and group elements, translating the inner group by the specified margins and conditionally rendering gray rectangles to visualize the chart area. The code relies on CDN-loaded React 16, ReactDOM, and D3 v6, with dimensions hardcoded at 960 by 500 pixels.

Reproducing the Bar Chart

This bar chart displays the top 10 most populous countries for the year 2020, with horizontal bars mapped to population values and country names on the y-axis. It is built with React and D3 v6, using `scaleBand` and `scaleLinear` for positioning, while SVG elements render the axes, bars, and labels. The data comes from a CSV of United Nations World Population Prospects 2019, loaded via D3’s `csv` function, and the chart includes formatted population labels plus a zero line for reference.

HIV/AIDS Choropleth

This chart visualizes global HIV/AIDS prevalence among adults aged 15-49 for the year 2017, using a sequential color scale from yellow to red to indicate severity, with countries lacking data highlighted in red. Built with React and D3 v5, it renders an SVG map using a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, overlaying graticules and country borders from TopoJSON data. The prevalence values are loaded from a CSV file and mapped to each country by name, with a sequential scale (`d3.scaleSequential` and `interpolateYlOrRed`) determining fill colors.

Log Scale

This example visualizes reported migrant deaths over time, using a logarithmic y-scale to accommodate the wide range of total dead and missing counts. The scatter plot shows each reported date on the x-axis and the corresponding death toll on the y-axis, with points rendered as SVG circles. Built with React and D3 v5, it uses `scaleLog` for the y-axis, `scaleTime` for the x-axis, and the `csv` loader to fetch data from a GitHub gist. Axes are custom React components, and data is binned via `d3.histogram` for tick generation.

Dec 10, 2020

Testing VizHub Stats API

This example demonstrates a minimal React and D3.js v6 application that fetches event statistics from the VizHub Stats API using a POST request to `/api/event/get`, but does not yet render any visualization of the retrieved data. The code establishes the structural foundation with a `VizContainer` SVG component that applies the margin convention and displays gray and light gray rectangles to indicate the outer and inner plotting areas. The React app uses `useState` and `useEffect` hooks to asynchronously load the event IDs and log the response to the console, leaving the visualization itself unimplemented.

Dec 10, 2020

Forest Plot with Heterogeneity Bands

This forest plot visualizes the results of a meta-analysis comparing intensive antihypertensive therapy to standard care, with heterogeneity bands shaded behind each study’s confidence interval to highlight variability. Built with D3 v6 and rendered as an SVG, the chart uses a logarithmic x-axis for odds ratios and a point scale for study IDs. The code employs `d3.scaleLog`, `d3.scalePoint`, and `d3.scaleLinear` to map data, with rectangles and lines drawn from a JSON metadata source.

Dec 10, 2020

Testing jStat

This visualization displays average hemoglobin levels by sex, with each horizontal bar showing the mean and a 95% confidence interval computed using the `jStat.tci` function. The chart uses React and D3 v6, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG through a reusable `VizContainer`. Data is loaded from a CSV file via `d3.csv`, and the bars include optional confidence-interval lines that are drawn from the lower to upper bound of the interval.

Dec 9, 2020

React + D3 Viz Starter

A React starter template demonstrates the margin convention for SVG visualizations, rendering a gray outer rectangle and lighter inner plotting area via the `VizContainer` component. A draggable circle tracks mouse movement using React state and the `onMouseMove` event, with coordinates stored in `mousePos`. The example loads React 16.13.1, ReactDOM, and D3 v6.2.0 from CDN, using JSX and the `useState` hook to manage interactive updates without requiring D3's data-binding utilities.

Dec 9, 2020

React + D3 Viz Starter

This example presents a blank React + D3 starter template that establishes the foundational structure for a visualization. It uses CDN-loaded React 16.13.1, ReactDOM, and D3 v6.2.0 to render an SVG via the `VizContainer` component, which applies the margin convention and abstracts the outer and inner rectangle elements. The code defines explicit width, height, and margin variables, and the component conditionally displays the margins based on a `showMargins` prop. The rendered output is an empty SVG with grey and light-grey rectangles, ready for chart content.

Dec 8, 2020

Game of Life (Possibly)

A grid of 10 by 5 cells displays Conway's Game of Life, with each cell toggling between alive (yellow) and dead based on neighbor counts. The simulation updates every two seconds, using a random Bernoulli distribution (d3.randomBernoulli) to generate the initial state. React hooks manage the cell matrix state, while SVG rectangles render the grid within a VizContainer. The code implements the game rules through countNeighbors and go functions, using setInterval for animation.

Dec 8, 2020

Cell Matrix

A grid of 16 by 8 rounded rectangles displays a random pattern of purple and yellow cells, where each cell’s color is determined by a Boolean value from `Math.random()`. The React components `CellMatrix` and `Cell` position each rect using computed `x` and `y` offsets based on the inner dimensions, while the `VizContainer` renders the SVG output with configurable margins and a neutral gray background. This example uses plain React state-free rendering, with no D3 API calls beyond the library’s inclusion in the HTML page.

Dec 7, 2020

Visualizing Percentages

This example shows three different ways to visualize the same percentage: the current day of the year as a fraction of the total days in the year, computed using `timeFormat` from d3. It presents a progress bar, a donut chart, and a semicircular gauge side by side, each displaying the computed value. The React components render SVG primitives, with the donut and gauge using d3’s `arc` generator to create their shapes. The progress bar uses simple SVG rectangles, and all three update dynamically based on the current date.

Dec 6, 2020

Missing Migrants (Again)

This scatterplot visualizes the relationship between reported dates and the total dead and missing for migrants, using React and D3 v5. Each circle represents one incident, positioned by date on the x-axis and casualty count on the y-axis. The code builds scales with d3.scaleTime and d3.scaleLinear, renders axes through custom components, and loads CSV data via d3.csv. The SVG output applies a teal fill to marks and styled grid lines.

Dec 6, 2020

Time Preference

This visualization compares cumulative net benefits of two programs over time, showing both discounted and undiscounted values in a small-multiple panel. The code uses d3.scalePoint, d3.scaleBand, d3.scaleLinear, and d3.cumsum to compute cumulative sums, while React components render SVG axes and line marks. Data is loaded from a CSV via d3.csv, with a fixed 10% discount rate applied to costs and benefits. The split panel design highlights how discounting alters long-term benefit trajectories.

Dec 2, 2020

Interactive Forest Plot

This interactive forest plot visualizes study-level and pooled odds ratios from a meta-analysis, with logarithmic scaling and heterogeneity bands reflecting study weights. React manages the component hierarchy, while D3 scales (scaleLog, scalePoint) drive SVG positioning and sizing. Hover cards reveal hidden overlays, and pooled summaries appear as diamonds. The dataset loads from a JSON URL via d3.json, and the chart uses CSS mix-blend-mode for band transparency.

Nov 24, 2020

Interactive Forest Plot (Single File)

This interactive forest plot displays study-level effect sizes and pooled summaries from a metadata JSON file, using a logarithmic odds-ratio scale. Built with React hooks and D3 v6, the visualization renders SVG marks including heterogeneity bands, square markers sized by study weight, and polygons for pooled estimates. Hover cards on each study row use CSS opacity transitions, while d3.scaleLog, d3.scalePoint, and d3.scaleLinear manage spatial encodings. The chart loads external data via d3.json and updates state asynchronously.

Nov 23, 2020

Pathetic Bar Chart

This example shows a horizontal bar chart of the top 10 countries by population, but only displays the bars without axes, labels, or a scale, creating a deliberately “pathetic” visualization. The chart uses React’s state and effect hooks to fetch and preprocess CSV data from a GitHub gist via `d3.csv`, filtering down to the first ten records. D3’s `scaleBand` and `scaleLinear` map country names and population values to screen coordinates, and each bar is rendered as an SVG `<rect>` with width proportional to its population. The `width` and `height` properties are fixed at 960 and 500 pixels, with no margin handling.

Nov 21, 2020

Heterogeneity Bands (Second Iteration)

This visualization displays heterogeneity bands from a metadata JSON file, with each study represented as a horizontal line and its confidence interval as a filled rectangular band. The bands use CSS `mix-blend-mode: multiply` to create darker overlaps where intervals intersect, revealing shared regions across studies. Implemented with D3 v6, the code uses `scaleLinear` for the x-axis, `scalePoint` for study positioning, and appends SVG `<rect>` and `<line>` elements to show the data from a gist-hosted dataset.

Nov 20, 2020

Distribution Scatter 4

A grid of semi-transparent rounded rectangles rotates about the center, with each rectangle’s angle determined by a sample from a beta distribution with parameters 1 and 4. The rectangles are drawn using d3.v6’s selection and transition APIs, with a background rectangle that also transitions its fill color. Every five seconds, the visualization randomly selects a new color palette from a predefined list, causing both the background and the foreground rectangles to smoothly fade to their new colors. The data consists of 600 random samples generated via `d3.randomBeta`, mapped through a linear scale to rotation angles between 0 and 80 degrees.

Nov 17, 2020

Heterogeneity Bands (Fork)

This visualization displays heterogeneity bands for study data, with each study represented as a horizontal line and an overlaid semi-transparent green rectangle spanning its confidence interval. The overlapping rectangles use blend modes to reveal density patterns across the dataset. Built with D3 v6, the code loads JSON data from a remote gist, applies a linear scale for the x-axis and a band scale for the y-axis, and renders SVG rectangles and lines. The rectangles use a green fill with opacity and mix-blend-mode color-dodge, while lines mark individual study intervals.

Nov 16, 2020

Heterogeneity Bands

This visualization displays heterogeneity bands for clinical study data, where overlapping translucent rectangles show the distribution of odds ratios across multiple studies. Each study is represented by a horizontal line positioned along a point scale, with the band width reflecting the confidence interval between lower and upper odds ratio bounds. The code uses d3.json to fetch external metadata, then applies d3.scaleLinear for the x-axis and d3.scalePoint for study positioning. Rectangles are stacked with opacity set to 1 divided by the total data length, creating darker regions where more studies overlap, while lighter lines highlight individual study ranges.

Nov 16, 2020

Distribution Scatter 3

Transparent rectangles in 45-degree rotation render the distribution of 500 samples from a Pareto distribution, each rectangle's width fixed at 25 pixels. Every five seconds, a palette randomly selects a background and foreground color pair, triggering `d3.transition` with 1000-millisecond durations on both the background `rect` and the foreground rectangles. The SVG animation cycles through six predefined color schemes, from teals to violets, while the rectangles maintain a 0.02 opacity. The visualization uses `d3.randomPareto` to generate data and `d3.selectAll` with `.enter()` to bind it to SVG elements.

Nov 15, 2020

Distribution Scatter 2

A grid of 700 narrow vertical rectangles spans the full height of the visualization, each sampled from a Pareto distribution using `d3.randomPareto` and scaled by 25. Every five seconds, the entire composition shifts color as the background rectangle and all foreground rectangles smoothly transition between one of six predefined color palettes, alternating between dark and light themes. The animation uses `transition().duration(1000)` on both the background and foreground elements, cycling randomly through palettes with contrasting pairs like teals, blues, or violets. Rendered as SVG with semi-transparent rectangles (0.02 opacity), the overlapping shapes create a dense, layered texture across the 960×500 canvas.

Nov 15, 2020

Distribution Scatter 1

This example visualizes a dynamic scatter plot of 500 values sampled from a normal distribution using `d3.randomNormal`. Vertical rectangles represent each data point, positioned along the x-axis and layered with low opacity. Every five seconds, the background and foreground rectangle colors transition to a new palette, cycling through six predefined color schemes. The visualization is built with D3 v6, rendered as SVG, and uses `transition.attr` to animate color changes over one-second durations.

Nov 15, 2020

Missing Migrants Part II

This visualization plots the number of dead and missing migrants over time, using a scatter plot to show each reported incident. The x-axis represents the reported date, while the y-axis shows the total dead and missing count. The chart uses React to render SVG elements, with D3.js v5 providing scales and axes. The code employs `scaleTime` and `scaleLinear` for axis scaling, `extent` to find data domains, and `histogram` to bin the data, though only the raw scatter points are displayed via the `Marks` component. Data is loaded from a CSV file.

Nov 14, 2020

Missing Migrants Part I

This scatterplot visualizes the total number of dead and missing migrants over time, with each circle representing a reported incident date and casualty count. The visualization uses React to render SVG elements, with D3 scales (scaleTime, scaleLinear) mapping data to axes. The code loads CSV data via d3.csv, applies custom tick formatting with timeFormat, and renders axes through reusable AxisBottom and AxisLeft components. Circle marks are drawn using D3's data-binding approach within a React component structure, styled with a teal fill color.

Nov 14, 2020

Analyzing Missing Migrants (Multiple Views)

This interactive visualization combines a world map and a time-series histogram to analyze migrant deaths and disappearances. The map uses a natural Earth projection to plot circles scaled by the total dead and missing, while the histogram aggregates these counts by reported month. Built with React and D3 v5, it employs `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.histogram` and `d3.timeMonths` for temporal binning, and `d3.scaleSqrt` for proportional circle sizing. Data comes from a CSV of missing migrants, with country boundaries from World Atlas TopoJSON.

Nov 12, 2020

Analyzing Missing Migrants (Histogram)

This histogram visualizes the total number of dead and missing migrants over time, binning incidents by month. The chart uses D3’s `scaleLinear` for the axes and `bin` (a histogram generator) with `timeMonths` thresholds to aggregate the data. React components render the SVG marks, with `AxisBottom` formatting dates via `timeFormat` and `Marks` drawing rectangles for each bin. The data is loaded from a CSV using D3’s `csv` method.

Nov 12, 2020

Refactored & Stylized Bar Chart

This example visualizes the populations of ten countries using a horizontal bar chart, with country names on the y-axis and population values on the x-axis. It fetches UN population data via the `d3.csv` function, filters it to the top ten entries, and renders it as SVG using React components. The chart employs `scaleLinear` and `scaleBand` for positioning, with axes built from custom components and formatted tick labels using the `format` API. Hovering over a bar displays its value via an SVG `<title>` tooltip.

Nov 8, 2020

Analyzing Missing Migrants (Map)

This map visualizes the global distribution of missing migrants, with circles sized by the total number of dead and missing per reported location. The geographic context uses a React and D3 v5 composition, rendering a Natural Earth projection via `geoNaturalEarth1` and `geoPath`, with graticules and land boundaries from TopoJSON. Circle radii scale by the square root of the count using `scaleSqrt`. Data comes from a CSV of migrant incidents, loaded with `d3.csv`, while the world atlas is fetched as TopoJSON and converted with TopoJSON’s `feature` and `mesh` functions.

Nov 6, 2020

Points on a Map (with Size)

This visualization shows world cities as semi-transparent circles on a natural Earth projection map, with circle size encoding each city's population using a square root scale. The map displays land masses, graticules, and country interiors rendered via `d3.geoPath`. City positions are projected from coordinates, while population data loads from a CSV using `d3.csv`. The React component structure uses hooks like `useState` and `useEffect` to fetch and manage both TopoJSON world atlas data and city data.

Oct 31, 2020

(Fork) Sized Points on a Map

This example displays a world map with circles sized according to city population, showing cities with over 50,000 residents. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and renders geographic features with `d3.geoPath`, including graticules and country boundaries from World Atlas TopoJSON. City data comes from Simplemaps’ World Cities Database, and circle radii are scaled using `d3.scaleSqrt`. The React component structure, SVG rendering, and D3 v5 APIs are used to create the map.

Oct 31, 2020

Exploratory Scatterplot of mtcars

This interactive scatterplot visualizes the R mtcars dataset, letting users explore relationships between numeric variables like weight and miles per gallon while coloring points by categorical variables such as cylinder count or transmission type. Built with React and D3 v6, it uses `scaleLinear` and `scaleOrdinal` for axes and color, with dropdown menus from `react-dropdown` to switch attributes. The SVG rendering includes custom axis components and a color legend, and hovering over legend items animates opacity to highlight or dim points by category.

Oct 29, 2020

Polished Scatterplot with Menus and Color

This interactive scatterplot visualizes the Iris flower dataset, allowing users to explore relationships between four measured attributes by selecting which features appear on the x- and y-axes via dropdown menus. The SVG renderings use D3 scales (scaleLinear, scaleOrdinal) for positioning and coloring data points by species, while React components manage the axes, legends, and interactive state. Hovering over the color legend highlights points of a specific species by dimming all others, with the color legend implemented as an interactive React component that triggers hover events.

Oct 28, 2020

Stylized Scatter plot

A stylized scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements via interactive dropdown menus for the x and y axes. The visualization uses React with `useState` to manage attribute selection, while D3 v5’s `scaleLinear` and `extent` handle continuous scaling and domain calculation from the CSV data. SVG circles represent each flower, with Poppins-font axis labels and custom tick styling applied through CSS. The axes are rendered as reusable components using `AxisBottom` and `AxisLeft`, and tick values are formatted with D3’s `format` function.

Oct 27, 2020

Menus

This example demonstrates a simple pet-selection form. A large label and dropdown menu let the user choose from a fixed list of five animals—dog, cat, hamster, parrot, and spider—with the hamster preselected. The application uses React (v16.9.0) with the `useState` hook to manage the selected value, and a custom `Dropdown` component renders the `<select>` element. The interface updates as the user chooses a new option, with the current selection highlighted in the dropdown.

Oct 27, 2020

Map of the World

A world map displays landmasses and country interiors over a blue sphere with graticule lines. It uses d3.geoPath to project geographic features and topojson's mesh and feature functions to derive country boundaries from a World Atlas TopoJSON source. The visualization renders as an SVG within a React app, styling land and interior paths via CSS.

Oct 26, 2020

Dumbbell Chart

This interactive scatterplot depicts alcohol consumption levels for 15 patients before and after a study, using dumbbell-style connected circles to highlight individual change. Each patient’s ID is plotted along the x-axis using `d3.scalePoint`, while alcohol measurements are mapped to the y-axis with `d3.scaleLinear`. The visualization is built with React components and rendered as SVG, employing D3’s `csv` loader for data parsing and custom `Marks` and `Lines` components to draw the paired circles and connecting lines.

Oct 23, 2020

Grouped Scatter Plot

This visualization displays sepal width against sepal length for Iris flowers, with each species occupying its own horizontal band created by d3.scaleBand. The React-based implementation uses d3.scaleLinear for both axes and renders SVG circles via the Marks component, with axes generated by AxisBottom and AxisLeft. Data is loaded as CSV from a remote source using d3.csv, and each species chart receives filtered data through a GroupChart component that positions the smaller plots vertically.

Grouped Scatter Plot (Column Layout)

This grouped scatter plot displays the relationship between sepal width and sepal length for Iris flowers, split into three panels by species. Each panel shares the same y-axis scale but uses a separate x-scale constrained to its column width. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning, and loads data from a CSV via `d3.csv`. Axes are drawn manually as SVG lines and text elements, with a title above each column.

Grouped Bar Chart

Ten countries with the largest populations are grouped by continent, with horizontal bars showing population size for each country. The chart uses a linear scale for population values and band scales for grouping by continent and country. Built with React and D3 v6, it renders SVG elements including custom axis components, a zero line, and tooltips via `<title>` elements. Data is loaded as CSV from a GitHub gist.

Stylized Scatter plot

This stylized scatter plot displays the relationship between petal length and sepal width for individual iris flowers. The visualization uses React to render SVG circles, with D3 v5 functions like `scaleLinear`, `extent`, and `format` to compute axes and scales. Axis components generate tick lines and labels using custom tick formatting that abbreviates values. The chart incorporates the Poppins font and a custom color scheme, with data loaded asynchronously from a CSV file using `csv` and `useData`.

Reproducing the Bar Chart

This example reproduces a bar chart ranking the ten most populous countries in 2020, sourced from the United Nations World Population Prospects 2019. It shows horizontal bars of varying lengths with a zero line, axis ticks, and a population title, using React components for rendering to SVG. The code employs D3 v6 scales (`scaleBand`, `scaleLinear`) for positioning, D3’s `format` for tick labels, and `csv` for data loading. Custom React components (`AxisBottom`, `AxisLeft`, `Marks`, `ZeroLine`) manage the visualization layout and styling.

Oct 20, 2020

The Margin Convention

This example shows a horizontal bar chart of the top 10 most populous countries in the world for 2020, with the D3 margin convention demonstrated by a chart area inset from the SVG edges. It renders an SVG using React, pulling data from a CSV of UN population figures. The code uses `d3.csv`, `scaleLinear`, and `scaleBand` to map population values and country names to x and y scales, while axes are drawn manually with `xScale.ticks()` and gridlines.

Oct 18, 2020

Loading Data with D3 and React

This example shows a bar chart of the top 10 countries by projected 2020 population, using a dataset loaded asynchronously from a CSV file hosted on GitHub. The visualization renders as SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. React’s `useState` and `useEffect` hooks manage the data-fetching lifecycle, calling `d3.csv` to parse the data and updating state once it arrives. A loading placeholder displays until the data is ready, then the bars appear.

Exploratory Summary (Vega-Lite API)

This example provides an exploratory summary of the Indian Liver Patient Records dataset from GitHub, displaying dataset size, row and column counts, and column names alongside an interactive circular scatterplot. The visualization plots the Albumin column against itself using Vega-Lite’s API within a React app, with d3.v6 handling CSV parsing. The chart is rendered as an SVG via the vega and vega-lite libraries, with a vega-tooltip handler enabling hover interactions and custom axis styling from a shared configuration.

Rendering Data with D3 and React

A donut chart displays all CSS color names with their corresponding hex values as colored arcs. D3 loads the data from a CSV file, while React state tracks the dataset and manages the loading state. The `arc` and `pie` generators from D3 compute the geometry, with each arc filled using the color’s RGB hex value. The visualization renders as SVG inside a React component, showing the integration of D3 for data loading and chart math with React for UI state management.

Vega-Lite API Template

This example presents a bubble chart of global religious populations by country, using the Vega-Lite API to construct the visualization declaratively. The code loads CSV data from a GitHub gist and maps country and religion to axes, with circle size encoding population. It demonstrates the Vega-Lite API’s integration with D3’s CSV parser and Vega Tooltip for interactivity, rendered as SVG with custom axis styling.

(Assignment) Loading and Parsing CSV

This example demonstrates how to load and parse a CSV dataset. It shows the source URL, file size, table dimensions, and column names from the Indian Liver Patient Records dataset. The React app uses d3.csv to fetch and parse the data from GitHub, then displays the parsed information. The code implements custom utilities like csvFileSize, csvRows, csvColumns, and csvColumnItems to extract and format the metadata from the loaded D3 data structure.

Loading Data with D3 and React

This example demonstrates how to load CSV data with D3 and manage it through React state. The application fetches a CSS color dataset from a GitHub gist and displays the file size, row count, and column count in a large text format. Using React hooks like `useState` and `useEffect`, the code calls `d3.csv` to asynchronously load the data, then renders a loading message until the data arrives. The project combines React 16.9 with D3 v6 to show the integration between the two libraries.

Oct 16, 2020

Loading and Parsing CSV

This example demonstrates a minimal CSV parsing workflow, displaying the file size, row count, and column count of a remote CSS color dataset. The code fetches the CSV text using the native `fetch` API, then passes it to `d3.csv` to parse the data into a tabular structure. The resulting metrics are formatted with `d3.csvFormat` and written to a `<pre>` element. The page uses D3 v6 from the unpkg CDN, with all styling handled by a single CSS rule setting the font size.

Oct 16, 2020

Mouse follower

A single gray circle follows the mouse cursor across an SVG canvas. The example demonstrates how React state and event listeners coordinate with D3 rendering. The `App` component tracks pointer coordinates via an `onMouseMove` handler, storing them in `mousePosition` with `useState` and `useCallback`. On each update, React re-renders the circle using the new `cx` and `cy` properties. The visualization uses React 16.9 and D3 v6, importing only the `arc` function which remains unused in the final code.

Oct 16, 2020

Smiley Face Part IV-VI

This example renders a grid of 18 randomly generated smiley faces, each composed of React components that assemble a circular background, two eyes, and an arc-based mouth. The faces vary in eye size, mouth radius, and background color, which is selected from a list of light green, aqua, yellow, and pink. The visualization uses React to structure the SVG elements, while D3 v5’s `arc` function generates the mouth path and the `range` utility produces the array of faces.

Oct 15, 2020

(Assignment) Smiley Face Part III

A smiling face is drawn as SVG output through React, combining shapes for the head, eyes, mouth, eyebrows, nose, and a star-topped hat. The rendering uses React elements with D3 helper functions, including `arc` for the mouth and nose paths and `symbol` with `symbolStar` for the star. D3 v5 and React 16.9 are loaded from CDNs, with gradients applied via SVG definitions and fixed dimensions of 960 by 500 pixels. The code defines the composition entirely through constants and computes each element's position using these values.

Oct 15, 2020

Let's Make a Face Part II

This example shows a simple smiley face composed of three SVG circles: a large yellow head with a black stroke and two smaller black eyes. It demonstrates how to use React with inline SVG to build a static graphic. The code defines constants for width, height, center positions, and offsets, then renders the circles using ReactDOM. It uses SVG circle elements, specifying coordinates and radii as attributes, with React 16.13.1 and ReactDOM 16.13.1 from the unpkg CDN. The resulting SVG is 960 by 500 pixels, with strokes and fills defined directly in the markup.

Oct 14, 2020