Muhammad Jarir Kanji

Chloropeth Map

A choropleth map colors countries by economy using a D3 v5 ordinal color scale with a spectral scheme. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render geographic boundaries from TopoJSON world-atlas data, with a legend built via a custom `colorLegend` function. Hovering highlights a country in pink, and a zoom interaction is implemented with `d3.zoom`. The map is rendered as SVG with a dark blue ocean background.

Mar 10, 2021

Melting Data for Multiple Lines

This visualization displays the history and future of world population as multiple lines, one per country or region, sorted by their final population value. The chart uses a time-based x-axis and a linear y-axis with formatted tick labels, while a color-coded legend identifies each line. Built with D3 v6, the example uses `d3.nest()` to group melted data from two UN population CSV datasets, `d3.line()` with `curveBasis` to generate smoothed paths, and a custom `colorLegend` component to render the ordinal color scale legend.

Mar 8, 2021

Chloropeth Map with Interactive Filtering

A choropleth map colors world countries by economy using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, dimming unselected countries and enlarging the selected one’s stroke. The visualization supports zooming and panning via d3.zoom, uses d3.geoNaturalEarth1 and d3.geoPath for projection, and loads TopoJSON and TSV data from the world-atlas package. A hovering effect turns countries pink.

Feb 14, 2021

Horizontal Scatter Plot with d3

This example visualizes the populations of the ten most populous countries using a horizontal scatter plot, with each country positioned along a categorical y-axis and a linear x-axis scaled by population. The chart renders circles in SVG, displaying country names on the left and population counts formatted in billions on the bottom axis. It uses d3.csv to load the data, d3.scaleLinear and d3.scalePoint for scaling, and d3.axisLeft and d3.axisBottom to generate the axes. The code also removes axis domain lines and adds a chart title and axis label.

Feb 1, 2021

Making a Bar Chart

A bar chart ranks ten countries by population from a CSV dataset, using horizontal bars to compare values like China's 1.4 billion against Nigeria's 196 million. The chart relies on D3's `scaleLinear` and `scaleBand` to map population and country names, with `axisLeft` and `axisBottom` generating the axes. Bars are drawn as SVG rectangles, filled steelblue, and the population values are converted from thousands via `d3.csv` and JavaScript's `+` operator. The visualization uses an SVG canvas of 960 by 500 pixels.

Feb 1, 2021

Selecting the Year on a Line Chart

This line chart displays world population trends from 1950 to 2100, with each country shown as a colored line. Users can select a specific year by moving the mouse across the chart, which updates a vertical black line to the corresponding time point. The visualization uses D3.js with d3.csv for data loading, d3.nest for grouping data by country, and d3.scaleTime/Linear for axes. A d3.axisBottom and d3.axisLeft render the gridlines, while the line generator uses curveBasis for smoothing. Population data comes from UN estimates and projections.

Dec 20, 2020

Multiple Line Chart

A multiple line chart displays temperature readings for several cities over a week, using the city as a color grouping. Each line is drawn with D3’s `line` generator, a basis curve, and a 5-pixel stroke, with a color legend built by a custom `colorLegend` function. Data comes from a CSV loaded via `d3.csv`, parsed into dates and numbers, and scales are set with `scaleTime`, `scaleLinear`, and `scaleOrdinal` from D3 v6.

Dec 20, 2020

Circles on A Map

This visualization displays global population estimates for 2018 by drawing semi-transparent circles on a natural Earth projection map, with each circle positioned at a country's centroid and sized proportionally to its population. The map also includes a size legend and color legend for reference. Built with D3 v5, it uses `d3.geoNaturalEarth1` and `d3.geoPath` for map rendering, `d3.scaleSqrt` for circle sizing, and `d3.zoom` for interactivity. Population data comes from a UN dataset, with geographic boundaries from TopoJSON, and all elements are rendered as SVG.

Dec 19, 2020

Scatter Plot with Menus & Transitions

This interactive scatter plot visualizes relationships between columns of the auto-mpg dataset, letting users choose which variables to compare on the x- and y-axes via dropdown menus. Built with D3 v6, it renders SVG circles that transition smoothly to new positions when the selected dimensions change, using scaleLinear, axisBottom, and axisLeft for the chart scaffolding. Circles fade in with staggered delays, and the axis labels update to reflect the current column selections.

Dec 19, 2020

Colour and Size Legends

This example demonstrates how to create legends for both color and size scales in D3. A color legend displays four fruit categories as colored circles using a `scaleOrdinal`, while a size legend uses a `scaleSqrt` with five tick values to show proportional circle radii. Both legends are built with reusable functions that append SVG groups, circles, and text elements. The code uses D3 v5 selections and scales, with transparent circles and black strokes styled via CSS.

Dec 19, 2020

World Countries Tree

This visualization presents a hierarchical tree of world countries, organized by continent and subregion, using data from a JSON file. The tree is rendered with branching paths and text labels for each node, with font size scaling by depth. Built with d3.js v5, it uses the `tree`, `hierarchy`, `linkHorizontal`, and `zoom` components to layout and draw the structure, with the zoom feature allowing interactive panning and scaling of the view. The SVG output is styled with a custom serif font and hover-free text shadows.

Dec 17, 2020

Blank Canvas!

This example demonstrates a blank, responsive canvas that fills the entire browser window. The visualization is an empty SVG surface with a large rounded rectangle covering its full dimensions, creating a minimalist starting point. The code uses D3 v5's `select` function to target the SVG element, sets its width and height based on the viewport, and appends a `rect` with a corner radius of 40 pixels. The fixed positioning and hidden overflow in the CSS ensure the canvas remains stable and fully visible.

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It draws a dark blue sphere as the earth’s background and then projects country boundaries onto it using the Natural Earth1 projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Country polygons come from the world-atlas TopoJSON dataset at 110m resolution. Each country is filled light green with semi-transparent black strokes, producing a simple choropleth-style base map in SVG.

Let's make a face with D3.js!

A smiling face made of SVG shapes is drawn in the center of the canvas. The animation, powered by D3.js v5, continuously moves the rectangular eyebrows up and down using chained `transition().duration(2000)` calls. The face components are built with D3's `select` and `append`, while the mouth uses the `arc` function to generate a semicircular path.

Bowl of Fruit — Click to Select

A bowl of fruit shows five apples arranged in a row, with clickable selection that outlines the chosen fruit in black. The D3 v5 code uses `scaleOrdinal` for both color and radius mapping, and `selectAll`, `merge`, and `transition().duration()` to smoothly animate circles entering, updating, and exiting. Over time, fruits are removed or change type from apple to lemon, demonstrating dynamic data updates in an SVG animation.

Bowl of Fruit — General Update Pattern + Transitions

A bowl of fruit animates through the D3 general update pattern, demonstrating enter, update, and exit selections with smooth transitions. Apples and lemons appear as colored circles, scaling radius and shifting horizontally as items are added, removed, or change type over time. The example uses d3-selection's `selectAll`, `data`, `merge`, and `exit` methods, along with `transition().duration()` to animate SVG circle attributes. A color scale and radius scale map fruit types to visual properties, while randomly generated IDs track elements across updates.

Bowl of Fruit — Singular Elements

A bowl of fruit demonstrates how D3 join patterns manage dynamic updates. Five red apples appear in a bowl, then an apple is removed, a third apple turns into a lemon, and a second apple disappears. The code uses d3.scaleOrdinal for color and radius, d3.selectAll and data joins for enter, update, and exit selections, and d3.range to generate initial data.

Bowl of Fruit — Nested Elements + Transitions

Five apples in a bowl animate over two seconds using d3.v5 transitions. The fruitBowl function selects `g` elements, updates circle radii and fill colors via `scaleOrdinal` color and radius scales, and animates transforms to reposition items when apples are removed or replaced with a lemon. Exiting elements translate downward and shrink to zero radius before removal.

Bowl of Fruit — Nested Elements

Five fruit appear as red and yellow circles with labels, showing how D3’s data-join and nested elements handle updates. Using `d3.scaleOrdinal` for color and radius, the example appends `g` groups containing `circle` and `text` nodes, then modifies the array over time to trigger enter, update, and exit transitions. The SVG rendering relies on `selection.merge` and keyed data to animate changes.

World Population Area Chart (d3)

This area chart visualizes global population growth over time, with years on the x-axis and population on the y-axis, using a smooth filled curve to show trends. The code employs d3’s `area`, `scaleTime`, `scaleLinear`, and `axisLeft`/`axisBottom` APIs to render the SVG, while formatting y-axis labels in billions. Data is loaded from a CSV file and parsed into date and numeric values. The chart includes custom axis styling, grid lines, and a centered title.

Temperature Scatter Plot for San Francisco

This example visualizes San Francisco temperature readings over time using an SVG scatter plot built with D3.js v6. Each circle represents a temperature observation, positioned along a time-scaled x-axis and a linear temperature y-axis, with gridlines extending from the axis ticks. The chart includes labeled axes, a title, and uses scales (scaleTime, scaleLinear) and axes (axisLeft, axisBottom) from the D3 API. Data is loaded as CSV from a remote dataset, with timestamps and temperatures parsed before rendering the circle marks.

Cars Scatter Plot with d3

This example visualizes the relationship between vehicle weight and horsepower using data from the auto-mpg dataset. The scatter plot displays individual cars as semi-transparent red circles, with weight on the x-axis and horsepower on the y-axis. The visualization is built using D3 v6, employing `scaleLinear` for both axes, `extent` to set domains, and `axisLeft` and `axisBottom` with gridlines. It loads CSV data via `csv()` and renders to SVG, including custom axis labels and a chart title.

Customising Axes with d3

This example shows a horizontal bar chart of the ten most populous countries, using data from a CSV file. Population values are converted from thousands to raw numbers, and d3.scaleLinear and d3.scaleBand map the data to SVG rectangles. Custom axis styling is applied with d3.axisLeft and d3.axisBottom, including a custom tick formatter that uses d3.format to abbreviate large numbers with "B" for billions. Grid lines are added via tickSize, while axis domains and tick lines are selectively removed.