Skip to main content
Log in
D

Douglas mochama

@OMWERIDOUGLAS·28 public vizzes

Loading thumbnail…

Pie chart

This pie chart visualizes the rating distribution for Action genre movies, with five rating categories from "below 5.0" to "above 8.5". The chart is rendered as an SVG using D3.js v7, with arcs generated by the `d3.arc` and `d3.pie` APIs. Data is loaded from a CSV file via `d3.csv`, filtered, and then mapped to a categorical color scheme using `d3.scaleOrdinal` and `d3.schemeCategory10`. A legend lists each rating bracket next to its corresponding color.

Apr 29, 2024
Loading thumbnail…

Pie chart

An animated scatter plot of the Iris dataset cycles through four feature pairs every few seconds, coloring each species—setosa, versicolor, and virginica—with distinct hues. The visualization loads D3 v6 from UNPKG and builds the chart via a reusable `scatterPlot` module using `scaleLinear`, `axisLeft`, and `axisBottom`. SVG circles update their x-axis attribute in a `setInterval` loop, while text labels and a legend are re-rendered dynamically. The example demonstrates local ES6 module imports and data parsing from a CSV URL.

Apr 29, 2024
Loading thumbnail…

Pie chart

An animated scatter plot of the Iris dataset cycles through four feature pairs every few seconds, coloring each species—setosa, versicolor, and virginica—with distinct hues. The visualization loads D3 v6 from UNPKG and builds the chart via a reusable `scatterPlot` module using `scaleLinear`, `axisLeft`, and `axisBottom`. SVG circles update their x-axis attribute in a `setInterval` loop, while text labels and a legend are re-rendered dynamically. The example demonstrates local ES6 module imports and data parsing from a CSV URL.

Apr 29, 2024
Loading thumbnail…

Pie chart

An animated scatter plot of the Iris dataset cycles through four feature pairs every few seconds, coloring each species—setosa, versicolor, and virginica—with distinct hues. The visualization loads D3 v6 from UNPKG and builds the chart via a reusable `scatterPlot` module using `scaleLinear`, `axisLeft`, and `axisBottom`. SVG circles update their x-axis attribute in a `setInterval` loop, while text labels and a legend are re-rendered dynamically. The example demonstrates local ES6 module imports and data parsing from a CSV URL.

Apr 29, 2024
Loading thumbnail…

Activity 9

This animated scatter plot displays the Iris dataset, cycling through different x-axis attributes (petal width, sepal width, petal length, sepal length) at intervals. It color-codes points by species (setosa, versicolor, virginica) with a legend and updates axis labels accordingly. The visualization uses D3 v6, loading data via `d3.csv`, and constructs the chart with a custom reusable `scatterPlot()` function that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. SVG elements, including circles and text, are manipulated through `selectAll` and `join` for smooth transitions.

Apr 29, 2024
Loading thumbnail…

Fork of Population Distribution

This interactive choropleth maps world population by country, with a dropdown to switch between years (1980–2030) and a sidebar ranking the top ten most populous nations. It uses D3 v6 with `d3.geoPath`, `d3.geoMercator`, and a `d3.scaleThreshold` color scale, pulling CSV data from a GitHub repository and GeoJSON country boundaries. Hovering reveals a tooltip with the country name and population, while the map redraws on year selection.

Apr 26, 2024
Loading thumbnail…

Covid 19 Distribution per continent

This interactive dashboard maps the global distribution of COVID-19 metrics across continents from 2020 to 2022. Users select a year and a metric—such as total cases, deaths, ICU patients, or vaccinations—to colorize a natural Earth projection using a logarithmic color scale. The choropleth map is rendered as SVG via `d3.geoPath`, with data from a GeoJSON world file. Hovering reveals a tooltip, and a gradient legend indicates relative values.

Apr 26, 2024
Loading thumbnail…

Covid 19 Distribution

This interactive dashboard visualizes the global distribution of COVID-19 metrics across countries on a natural Earth projection map. Users select a year and a metric—such as total cases, deaths, ICU patients, or vaccinated individuals—to update the choropleth’s color encoding. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering country boundaries from a GeoJSON file, and a logarithmic color scale interpolated with d3.interpolateHcl. Hovering over countries displays a tooltip with detailed values.

Apr 25, 2024
Loading thumbnail…

Scatter plot shapes

A scatter plot uses the Iris dataset to compare sepal length against sepal width, with each species distinguished by a unique geometric symbol rendered as SVG path data. D3’s `scaleOrdinal` maps species names to symbol strings from `d3.symbols`, which are then applied to `d3.symbol` shapes. The chart encodes data points as translucent steel-blue markers, with axes labeled using `axisBottom` and `axisLeft`. Data is loaded via `d3.csv` and scaled using `scaleLinear` for position.

Apr 15, 2024
Loading thumbnail…

Scatter plot shapes

This example renders a bubble chart of car makes, plotting horsepower on the x-axis, torque on the y-axis, and using circle radius to encode highway MPG. The chart uses d3.csv to load data, d3.scaleLinear for axes and radius, and d3.scaleOrdinal with schemeCategory10 for color-coded legends. SVG circles are generated through data joins, with axes and a legend appended via D3’s axis components.

Apr 15, 2024
Loading thumbnail…

Activity6_Task4

This example visualizes automotive data from a CSV file using a bubble chart in D3.js v7. It plots horsepower on the x-axis, torque on the y-axis, and encodes highway MPG as the bubble radius. Each circle is colored by car make using a categorical color scale with a legend. The visualization demonstrates loading data via d3.csv, applying scales and axes, and rendering SVG elements.

Apr 15, 2024
Loading thumbnail…

Activity6_Task4

This visualization displays the relationship between sepal and petal lengths for three iris species, colored distinctly in blue, orange, and green. The D3.js code loads CSV data from a GitHub gist and renders an SVG scatter plot with labeled axes and a legend. It uses `d3.csv` for data ingestion, `d3.scaleLinear` for coordinate mapping, `d3.scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for axis generation.

Apr 15, 2024
Loading thumbnail…

Activity6_Task3

This scatter plot displays iris flower measurements, plotting sepal length against petal length, with each point colored by species using a d3.scaleOrdinal color scale. The visualization loads CSV data from a GitHub gist and renders SVG circles through D3 v7, employing d3.axisBottom and d3.axisLeft for labeled axes. A legend identifies the three species categories. The chart uses simple linear scales for positioning and demonstrates basic data binding with d3.selectAll and enter selections.

Apr 15, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the distribution of movie ratings across six genres, using proportions from a CSV data source. It displays five rating categories from “below 5.0” to “above 8.5” as stacked segments within each genre bar. The visualization uses d3.csv to load data, d3.stack for stacking, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.scaleOrdinal for color mapping. Clicking any bar triggers an alert showing the genre’s full rating breakdown.

Apr 15, 2024
Loading thumbnail…

Activity6_Task2

This example visualizes the top 20 most populous countries in 2010 as a horizontal bar chart, with bars sorted in descending order and displayed using an SVG canvas. The chart loads population data from a remote CSV file via D3’s `d3.csv` method, then uses `d3.scaleLinear` for the x-axis (population in millions) and `d3.scaleBand` for the categorical y-axis (country names). Axes and labels are rendered using `d3.axisBottom` and `d3.axisLeft`, while bars are drawn as `rect` elements with a steelblue fill. The code also demonstrates local ES6 module imports and D3 loading via UNPKG.

Apr 14, 2024
Loading thumbnail…

Activity6_population

This example visualizes the top 20 countries by population in 2010 using a horizontal bar chart. The code loads CSV data from a GitHub gist via `d3.csv`, sorts it in descending order, and renders SVG bars with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while tick labels are formatted in millions. The chart includes axis labels and uses steelblue bars, demonstrating D3 v7’s data binding and SVG rendering capabilities.

Apr 14, 2024
Loading thumbnail…

Activity6_population

This example visualizes the top ten countries by population in 2000 as a horizontal bar chart. Using a d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, it renders SVG rectangles with steelblue fill. The code loads data from a CSV via d3.csv, sorts it descending, and formats axis tick labels in millions. Axes are created with d3.axisBottom and d3.axisLeft, with custom text labels for both dimensions.

Apr 14, 2024
Loading thumbnail…

Activity6_population

This example visualizes the top ten countries by population in 2000 as a horizontal bar chart. Using a d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, it renders SVG rectangles with steelblue fill. The code loads data from a CSV via d3.csv, sorts it descending, and formats axis tick labels in millions. Axes are created with d3.axisBottom and d3.axisLeft, with custom text labels for both dimensions.

Apr 14, 2024
Loading thumbnail…

Activity6_population

This example visualizes the top ten countries by population in 2000 as a horizontal bar chart. Using a d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis, it renders SVG rectangles with steelblue fill. The code loads data from a CSV via d3.csv, sorts it descending, and formats axis tick labels in millions. Axes are created with d3.axisBottom and d3.axisLeft, with custom text labels for both dimensions.

Apr 14, 2024
Loading thumbnail…

Population Distribution

This choropleth map visualizes world population distribution across countries, with a dropdown menu to switch between years (1980, 2000, 2010, 2022, 2023, 2030). It uses d3.csv to load population data, d3.geoPath and d3.geoMercator for geographic rendering as SVG paths, and a d3.scaleThreshold color scale to encode population ranges. Hovering reveals a tooltip with the country name and population, while a sidebar table lists the top ten most populous countries, updated dynamically on year changes.

Apr 12, 2024
Loading thumbnail…

Population Density

This choropleth map visualizes global population density across selectable years (1980, 2000, 2010, 2022) using a Mercator projection via `d3.geoMercator` and `d3.geoPath`. A threshold color scale maps density values to a blue sequential palette, with country-level data loaded from a raw GitHub CSV. Users interact through a dropdown to switch years, triggering map redraws and an animated tooltip on hover showing country name and density. A sidebar ranks the top ten most densely populated countries for the chosen year.

Apr 12, 2024
Loading thumbnail…

Gender Disparities

This dashboard visualizes gender disparities in education by displaying male and female enrollment rates as a bar chart for a selected country and indicator. The user filters the data through dropdown menus for country and educational metric. The application, built with D3.js v7 and Bootstrap, loads CSV data from a GitHub repository. A D3 scaleBand and scaleLinear create the bars, with axes rendered using d3.axisBottom and d3.axisLeft.

Apr 12, 2024
Loading thumbnail…

Demographic indicators

This interactive visualization presents two bar charts comparing demographic indicators across countries: life expectancy trends and birth rate trends. Users select a country from dropdown menus to highlight its values within each chart. The code uses D3.js (v7) to load CSV data from GitHub repositories, group data by country, compute birth rates from population changes, and render SVG bar charts with axes and labels. The selection dropdowns trigger chart updates for the chosen country's data.

Apr 10, 2024
Loading thumbnail…

Survival rate

This interactive scatter plot visualizes aircraft incidents, plotting the number of fatalities against the number of people aboard, with each point colored steelblue. A dropdown menu filters incidents by year, toggling point visibility, while a side panel computes and displays the average survival rate for the filtered selection. Built with D3.js, the visualization uses d3.csv for data loading, d3.scaleLinear for axes, and d3.select for DOM manipulation and event handling. Tooltips show exact values on mouseover, and the data comes from a GitHub-hosted CSV dataset.

Apr 10, 2024
Loading thumbnail…

Crash Distribution

This bar chart visualizes the distribution of airplane crashes by operator, allowing users to adjust the number of operators displayed via a slider. The chart is rendered as an SVG using D3.js (v7), aggregating the data with `d3.rollup` and sorting operators by crash count in descending order. Bars are drawn with `d3.scaleBand` and `d3.scaleLinear`, with axes labeled and rotated for readability. Interactivity is handled through an `input` event listener on the range slider, which dynamically updates the chart without reloading the dataset from the provided CSV source.

Apr 10, 2024
Loading thumbnail…

Accidents

This interactive bar chart visualizes the number of airplane accidents attributed to different operators, using data from a GitHub-hosted CSV file. The chart displays a user-selected number of operators (from 1 to 25) in either ascending or descending order of accident counts. Rendered as an SVG via d3.select and d3.append, the visualization uses d3.rollup to aggregate accident counts, d3.scaleBand and d3.scaleLinear for positioning, and d3.axisBottom and d3.axisLeft for axes. Interactive controls update the chart through event listeners on input and change events, redrawing bars dynamically.

Apr 10, 2024
Loading thumbnail…

CrashData

This interactive map visualizes the distribution of motor-vehicle collisions across New York City, with each crash represented as a point on a geographic grid. The code uses D3.js's `d3.geoPath` to render city boundaries and `d3.select` with a custom color scale to encode crash density by neighborhood. Data is loaded from a local CSV via `d3.csv`, and the rendering relies on the Canvas API for efficient point plotting. A brush interaction, implemented through `d3.brush`, allows users to filter collisions by time of day or day of week, dynamically updating the displayed points.

Apr 10, 2024
Loading thumbnail…

CrashData

This bar chart displays the ten most populous countries as of January 1st, 2024, with country names on the x-axis and population measured in thousands on the y-axis. The visualization uses D3.js, specifically `scaleBand` for positioning bars and `scaleLinear` for the population scale. Data comes from the UN Population Estimates 2024 dataset, filtered to include only countries. The bars are rendered as SVG rectangles, with axes and labels generated through D3's `axisLeft` and custom axis label components.

Apr 10, 2024