S

Shabani Muswamba

@Muswamba·23 public vizzes

Loading thumbnail…

Multiple Line plot with Dropdown

This visualization displays multiple line plots of London's monthly air quality data, allowing users to select different pollutants (like PM2.5 or PM10) from a dropdown menu. Each line represents a year from 2010 to 2018, with a color legend mapping years to distinct shades. The D3 v5 code uses `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `nest` to group data by year before generating paths with the `line` generator. The dropdown menu is built via a custom `dropdownMenu` component that triggers re-rendering with the newly selected column. Data originates from the Kings College London Air Quality Dataset via the London Datastore.

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic classification using an ordinal color scale. Clicking a legend entry filters the map, dimming non-matching countries while highlighting the selected category. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom for pan and zoom, with d3.scaleOrdinal and schemeSpectral for coloring. Data comes from the World Atlas TopoJSON and TSV files loaded via d3.json and d3.tsv, rendered as SVG with clickable legend ticks.

Loading thumbnail…

COVID-19

A D3 v5 map displays confirmed COVID-19 cases as of April 11, 2020, using a 2D ArcGIS map view with a dropdown menu to select the basemap. The visualization renders geographic data from the Kaggle novel coronavirus dataset, showing case counts through location-based markers. The dropdown menu, built with D3’s data join pattern, triggers basemap changes via the ArcGIS API, while the map itself is loaded and managed through the ArcGIS `MapView` component. Styling is handled with CSS, and the page initializes the map by calling `load2dMap()`.

Loading thumbnail…

COVID-19: Confirmed Cases

This example shows confirmed COVID-19 cases on April 11, 2020, as a choropleth map of countries. The visualization uses Esri’s ArcGIS API for JavaScript to render a 2D MapView with a FeatureLayer, displaying the case counts with a streets-vector basemap. The map is centered globally at zoom level 1, and the feature layer is semi-transparent. The data originates from a Kaggle dataset, and the code includes an unused dropdown menu built with d3.v5, though the menu is not wired to any interaction.

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn on a yellow circle using D3.js v5, with animated eyebrows that move up and down. The code constructs the face using SVG primitives like circles for the eyes and a path for the mouth, defined by an arc with specified radii and angles. The eyebrows are rectangles that animate their vertical position over time using the `transition` API, demonstrating smooth movement with varying durations. The example runs in a React framework but uses plain D3 for rendering and animation.

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle face with black eyes, animated eyebrows, and a curved mouth is built using D3.js v5 and rendered as SVG. The code uses `d3.select`, `d3.arc` for the mouth path, and chained `transition().duration()` calls to move the rectangular eyebrows vertically. Static attributes set the face and eye positions, while the eyebrows animate in opposing time sequences. The example runs in a React framework and draws on a 960×500 SVG canvas.

Loading thumbnail…

Bowl Fruits General Updates Pattern

A bowl of circles represents fruits in a D3.js animation demonstrating the general update pattern. Apples and lemons appear as colored circles with distinct sizes, rendered as SVG elements with smooth 1-second transitions. Users hover over fruits to highlight them with a teal stroke and click to select. The code uses d3.scaleOrdinal for color and radius mapping, d3.selectAll with data joins for enter, update, and exit phases, and d3.transition for animated state changes.

Loading thumbnail…

Bowl Fruits General Updates Pattern

This example demonstrates the General Update Pattern in D3 v5, showing how a bowl of fruits—apples and lemons—changes over time through enter, update, and exit selections. Circles animate in with a radius transition, update their fill color and size based on fruit type, and animate out when removed. The `d3.scaleOrdinal` maps fruit types to colors and radii, while mouseover and mouseout events highlight the selected fruit with a teal stroke via `setSelectedFruit`. Animated transitions use `transition().duration()` with SVG circles.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population by year, using a filled, smoothed path to show growth over time. The code loads CSV data with the `d3.csv` function and maps years to a `d3.scaleTime` and population to a `d3.scaleLinear`. It renders axes with `d3.axisBottom` and `d3.axisLeft`, formatting large numbers with `d3.format`. The area shape is generated using `d3.area` with `d3.curveBasis`, and the SVG output includes labeled axis titles and a chart title.

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population by year (1800–2015) using a smooth, filled path to emphasize growth over time. The x-axis uses a time scale, while the y-axis employs a linear scale with formatted tick labels (e.g., “B” for billions). The chart is rendered as an SVG, with axes, grid lines, and a title generated using D3 v5’s `scaleTime`, `scaleLinear`, `area`, `axisBottom`, `axisLeft`, and `curveBasis`. Data is loaded from a CSV file via `d3.csv`, with population parsed as numbers and years as dates.

Loading thumbnail…

Temperature in San Francisco, Area Chart

This area chart displays a week of temperature data in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 to load the CSV dataset, scale the time and linear values, and render an SVG area path with a smooth curve. Axis labels and a title are added via D3’s axis components, while the area fill is styled with a light blue color. The code specifically employs `d3.csv`, `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the chart.

Loading thumbnail…

Temperature in San Francisco, Line Chart

This visualization displays a week of temperature readings in San Francisco as a smooth red line chart. The code loads CSV data using `d3.csv`, parses timestamps and temperature values, then renders an SVG line chart with `d3.line` and a basis curve. Time and linear scales (`d3.scaleTime`, `d3.scaleLinear`) map data to axes, with labeled axes and gridlines generated via `d3.axisBottom` and `d3.axisLeft`. The chart emphasizes temporal trends through a clear title and stylized tick marks.

Loading thumbnail…

Temperature in San Francisco

This scatter plot visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. Using D3 v5, the code employs `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and SVG circles to represent data points. The data is loaded via `csv` from a VizHub dataset, with timestamps parsed as `Date` objects. Styling includes orange circles, light green tick lines, and custom axis labels.

Loading thumbnail…

Choropleth Map of County Data

This choropleth map colors U.S. counties to visualize geographic data, with state boundaries drawn as white lines for contrast. The map is rendered as SVG using `d3.geoPath` to project TopoJSON geometry onto a 960×600 canvas. County and state shapes are styled via CSS classes, with the d3-scale-chromatic library available for color encoding. A small script sets a tooltip title on the label element, though the map itself does not display interactive data values.

Loading thumbnail…

Cars Schotter Plot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, using a circular mark for each vehicle. The visualization encodes the data on linear scales with axes labeled accordingly, and includes a title for context. Built with D3.js version 5, the code uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the plot, appending SVG circles to render the data points. The data is loaded from a CSV file hosted on VizHub, and the visual style applies a semi-transparent cyan fill to the circles through CSS.

Loading thumbnail…

Cars Schotter Plot

This scatterplot shows the relationship between horsepower and weight for cars from the classic auto-mpg dataset, with each circle representing a vehicle. The visualization uses D3 v5's `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map the data points, and renders them as semi-transparent cyan circles on an SVG canvas. The chart includes labeled axes for "Horsepower" and "Weight," along with a title, and loads data asynchronously from a CSV file via D3's `csv` function.

Loading thumbnail…

Cars Schotter Plot

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, using a circular mark for each vehicle. The visualization encodes the data on linear scales with axes labeled accordingly, and includes a title for context. Built with D3.js version 5, the code uses `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` to construct the plot, appending SVG circles to render the data points. The data is loaded from a CSV file hosted on VizHub, and the visual style applies a semi-transparent cyan fill to the circles through CSS.

Loading thumbnail…

Schotter Plot

This chart displays the population of the top ten most populous countries in 2018 using a dot plot. Each circle’s horizontal position encodes population size, while the vertical axis lists country names. The visualization uses D3 v5 to scale the data and render SVG circles, with a custom tick formatter converting values to billions. Data is loaded from a local CSV file and multiplied by 1000 to represent actual population counts. Gridlines and axis labels are styled via CSS.

Loading thumbnail…

Customising axis

This bar chart shows the top 10 most populous countries in 2018, with population values converted from thousands and formatted using a custom tick format that replaces 'G' with 'B' (e.g., billions). The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with d3.axisLeft and d3.axisBottom to render the axes. Custom styling removes the default domain and tick lines on the left axis, while the bottom axis draws light green gridlines using tickSize. Data is loaded from a CSV file via d3.csv and rendered as SVG rectangles.

Loading thumbnail…

Customising axis

This bar chart shows the top 10 most populous countries in 2018, with population values converted from thousands and formatted using a custom tick format that replaces 'G' with 'B' (e.g., billions). The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, with d3.axisLeft and d3.axisBottom to render the axes. Custom styling removes the default domain and tick lines on the left axis, while the bottom axis draws light green gridlines using tickSize. Data is loaded from a CSV file via d3.csv and rendered as SVG rectangles.

Loading thumbnail…

BAR CHART

This bar chart displays the population of the top 10 most populated countries in 2018, with China and India leading by a significant margin. The visualization uses d3.scaleLinear and d3.scaleBand to map population values to bar widths and country names to vertical positions, respectively. Data is loaded from a CSV file using d3.csv, and the population values are converted from thousands to actual numbers. The chart renders as an SVG with d3.axisLeft and d3.axisBottom providing the axes.

Loading thumbnail…

D3 PROJECT

This bar chart displays the population of ten countries, from China at over 1.4 billion down to Mexico at 130 million. Built with React and D3 v5, it renders as an SVG using `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with axes added via `axisBottom` and `axisLeft`. Population data is loaded from a CSV file and converted to numbers before rendering, with bars colored green and a styled path for the axes.

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page at an enormous font size, demonstrating the minimal setup required for a static web page. It relies solely on standard HTML and CSS, using a `style` block to set the `text-align` and `font-size` properties of the `body` element. No external libraries or data sources are involved, making it a pure markup and styling baseline for comparison with framework-based starters.