Sophia Murage

Customizing Axis

This example demonstrates a horizontal bar chart of population data for selected countries, with customized axis formatting. The visualization uses a linear scale for population values and a band scale for country names, rendering bars as SVG rectangles filled with steelblue. It customizes the x-axis tick labels using `d3.format` to abbreviate large numbers with SI prefixes, while the y-axis displays country names. Data is loaded from a CSV file using `d3.csv`, and the chart layout applies explicit margins and padding.

Apr 14, 2020

HTML Starter

This example demonstrates a stacked bar chart built with D3.js v5 and rendered as SVG within a React application. The chart visualizes five data points, each with three numeric keys (p, d, e), using `d3.stack()` to compute layer offsets and `d3.scaleBand()` and `d3.scaleLinear()` for positioning. Rectangles are appended via data joins inside groups, with each layer’s fill color assigned sequentially. The code includes placeholder divs for map and sankey visualizations, though only the bar chart is implemented.

Apr 14, 2020

Choropleth Map

This choropleth map displays global population data from the UN’s 2019 dataset, coloring each country according to its population value. The visualization uses D3’s geoMercator projection and geoPath to render country outlines from World Atlas TopoJSON data, while the D3 scaleOrdinal and schemeSpectral functions generate the color scale. A custom color legend shows the mapping between colors and population values, and hovering over a country highlights it in red.

Circles on a Map

This visualization displays a choropleth map of countries colored by economic classification, with an interactive color legend that filters highlighted regions. The map uses the Mercator projection through `d3.geoMercator` and renders geographic paths via `d3.geoPath`. Users can click legend circles to highlight matching countries, which are drawn using a categorical `scaleOrdinal` with the `schemeSpectral` color range. Data comes from a CSV file joined with TopoJSON world atlas features, and the entire SVG view supports pan and zoom through `d3.zoom`.

Migrant Deaths Linked Views with Brushing

Linked views with brushing show migrant deaths on a world map and a time-series histogram of monthly totals. Brushing a time range on the histogram filters the map’s bubble markers to show deaths within that period. The map uses d3.geoNaturalEarth1 and d3.geoPath for country boundaries and graticules, while circle size encodes death counts via d3.scaleSqrt. The histogram uses d3.bin, d3.brushX, and React’s useMemo for performance. Data comes from the Missing Migrants Project subset CSV.

Choropleth Map Interactivty selection

This example visualizes the World Bank’s country-level economy classifications on a choropleth map. Users can select a specific economy class from the color legend, which highlights matching countries and dims all others, while hovering over a country reveals its name and economic category. Built with d3.js v5, the map uses the `geoMercator` projection and `geoPath` to render country shapes from TopoJSON data. The legend, implemented with `scaleOrdinal` and `schemeSpectral`, enables interactive filtering through mouse clicks.

Cars Scatter Plot with menus

This interactive scatter plot visualizes the auto-mpg dataset, allowing users to select which columns appear on the x- and y-axes via dropdown menus. The visualization uses D3 v5 with SVG rendering and animated transitions, where circles expand from the center to their positions over two seconds. The code imports reusable modules for the dropdown menu and scatter plot, utilizing D3 scales (scaleLinear, scalePoint), axes (axisLeft, axisBottom), and the extent function to determine data domains.

Choropleth Map

A choropleth map displays countries with a uniform green fill, turning red on hover while the ocean remains light blue. The visualization uses an orthographic projection, rendering country boundaries as SVG paths via the `geoPath` and `geoOrthographic` functions. It loads world map data from the `world-atlas` package (50m JSON and TSV files) and processes TopoJSON features with the `topojson` library. The `zoom` interaction allows panning and scaling the map through SVG transforms, with country names shown in tooltips.

Apr 7, 2020

Color and size legends

This example demonstrates two custom legend components: a color legend for ordinal data and a size legend for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend maps numeric values to circle radii. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with reusable functions `colorLegend` and `sizeLegend` that bind data to SVG groups. Circles and text labels are positioned via transforms, with tick values generated by `sizeScale.ticks(numTicks)`. The SVG rendering includes configurable spacing, text offsets, and fill styles.

Apr 7, 2020

World Countries Tree

This interactive visualization arranges world countries in a hierarchical tree, grouping them by continent and subregion using data from a JSON file. It renders with an SVG, employing d3.tree, d3.hierarchy, and d3.linkHorizontal to compute the layout and draw curved links between nodes. Text labels show each country or region name, with font size decreasing by depth, and d3.zoom enables pan and zoom navigation.

Apr 7, 2020

Blank Canvas!

An otherwise blank SVG canvas is staged for a minimal D3.js visualization. The code selects the SVG element from the document and reads its configured width and height using D3’s selection API and attribute accessor. The visualization does not yet render any data; it establishes a foundation for future graphics. The example relies on D3 v5, with the plotting surface defined by inline SVG attributes and styled by a linked CSS file that removes default page margins and hides overflow.

Interaction tricks

This example shows a world map with each country colored green, shading to red on hover. Users can click and drag to rotate the map using an orthographic projection, with the sphere background and country boundaries rendering as SVG paths. The map loads country names from a TSV file and geometry from a GeoJSON TopoJSON source, using D3's `geoOrthographic` projection, `geoPath`, `zoom` interaction, and the `topojson` feature conversion API.

Let's make a map with D3.js!

This example shows an orthographic world map rendered as an SVG, with countries filled in green against a light blue sphere. It uses D3.js version 5 functions `d3.geoOrthographic` and `d3.geoPath` to project and draw geographic features, alongside TopoJSON’s `feature` method to extract country boundaries from the world-atlas dataset. The map initially displays a global view, with the sphere outline and country paths appended to the SVG canvas.

Bowl of Fruit - Hover to select

Five circles, apples and a lemon, render in an SVG bowl and animate their positions and radii with d3 transitions. Hovering a fruit selects it, drawing a black stroke via d3’s selection.on and a scaleOrdinal color scale. The data updates through setTimeout calls that remove apples or replace one with a lemon, with exit transitions shrinking removed circles. The code uses d3.v5’s select, range, and merge for enter-update-exit patterns.

Bowl of Fruit - Click to select

Five circles representing fruit appear in a row, with apples as large red circles and lemons as smaller yellow ones. Clicking a fruit selects it with a black outline. D3 v5 scales, including `scaleOrdinal`, map fruit types to size and color, while the `fruitBowl` function and `transition` animate circle radius changes. The example uses array updates to add or remove fruit, triggering enter and exit transitions.

Bowl of Fruit- General Update Pattern

This example demonstrates the general update pattern in D3, where a data set of fruit types is dynamically modified through a series of timed events. It shows a row of apples and lemons rendered as circles, with the visualization updating in place as fruits are removed or change type. The implementation uses D3 v5's `select`, `range`, and `scaleOrdinal` APIs to manage the SVG elements, with the `fruitBowl` function handling the enter, update, and exit transitions for the groups, circles, and text labels.

Bowl of Fruit- General Update Pattern

Five circles represent apples in an SVG bowl, animated with the D3 general update pattern. Using D3 v5 selections with key functions and `transition.attr`, the visualization removes, modifies, and filters fruit over timed intervals, demonstrating enter, update, and exit states. Apples turn into lemons by changing fill color and radius via ordinal scales.

Area chart Temperature in San Fransisco Scatter Plot

This example visualizes temperature in San Francisco as a filled area chart, with time on the x-axis and temperature on the y-axis. The SVG rendering uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, filled path beneath the temperature line. Data is loaded from a CSV via `csv`, and axes are created with `axisBottom` and `axisLeft`, featuring grid lines and labeled titles. The chart also includes a bold title, axis labels, and styled tick marks, with all elements arranged within a margin-defined group.

Area chart World Population

This area chart visualizes world population growth over time, with a smooth, curved area filling the space beneath the line and axes labeled “Time” and “Population.” The code loads CSV data using `d3.csv`, parses years as dates and populations as numbers, then scales the data with `d3.scaleTime` and `d3.scaleLinear`. It renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the area path using `d3.area` with `curveBasis`. The SVG output includes gridlines, tick labels, and a title, with formatting via `d3.format` for compact population values.

Line chart Temperature in San Fransisco Scatter Plot

This visualization depicts temperature in San Francisco over time as a smooth line chart, using a time-scaled x-axis and linear y-axis with gridlines and labeled axes. The code loads CSV data, parses the timestamp and temperature fields, and renders an SVG path using d3.line with curveBasis. It employs d3.csv, scaleTime, scaleLinear, axisBottom, axisLeft, and extent from d3.v5, with styling defined in external CSS.

Apr 4, 2020

Temperature in San Fransisco Scatter Plot

This scatter plot visualizes the relationship between car horsepower and weight, with each circle representing a vehicle. The chart uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` to map data from a CSV file of auto-mpg records onto an SVG canvas. Points are semi-transparent steelblue circles, and the visualization includes labeled axes with formatted tick marks, a title, and grid lines extending from the axis ticks.

Apr 3, 2020

Cars Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight using 392 cars from the auto-mpg dataset. D3’s `csv` loads and parses the data, while `scaleLinear` and `extent` map attributes to SVG coordinates. Circles with fixed radius represent each car, rendered with axes generated by `axisLeft` and `axisBottom`, including gridlines and custom labels. The visualization uses d3.v5 and an SVG rendering approach, with styles applied via CSS for opacity and typography.

Apr 3, 2020

Scatter Plot

This scatter plot visualizes the populations of nine countries from a CSV file, with country names on the y-axis and population on the x-axis. Built with D3 v5, it loads the data via `d3.csv` and uses `scaleLinear` and `scalePoint` to map values to SVG coordinates. The chart includes axes from `axisLeft` and `axisBottom`, grid lines, and a title, while circles are rendered with a fixed radius of 18 pixels. The styling is applied through external CSS, and the visualization updates dynamically after parsing the data.

Apr 2, 2020

Customizing Axes

This visualization displays the populations of nine countries as horizontal bars, from China at the top to Russia at the bottom. The chart uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom with a custom tick format that abbreviates numbers. The code loads CSV data using d3.csv, renders SVG rectangles, and customizes axis labels, tick lines, and removes default axis domains for a cleaner look.

Apr 2, 2020

Customizing Axis

Mar 31, 2020

Cus chart

This example displays a horizontal bar chart of country populations, using bars to represent each nation’s relative size. The chart is rendered as SVG with D3 v5, importing `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` from the library. It loads population data from a CSV file via `d3.csv` and maps each country to a bar, with axes labeled accordingly. The population values are parsed as numbers, and the scales and margins are defined to position the bars within the SVG canvas.

Mar 31, 2020

Make a Face

This example renders a simple face from primitive SVG shapes. A yellow circle is centered on a purple background, with its radius equal to half the SVG’s height. The code uses D3 v5’s `select` to grab the `svg` element and reads its `width` and `height` attributes to position the circle dynamically. The visualization demonstrates basic SVG attribute manipulation with D3, creating a clean, minimal composition without data or interaction.

Mar 18, 2020