George Oyosa

@george-oyosa·10 public vizzes

Fork of HTML Starter

This example displays the first five rows of a sales dataset in a styled HTML table. It loads data from a remote CSV file using `d3.csv` and dynamically generates the table structure with JavaScript string concatenation and DOM insertion via `innerHTML`. The table includes hover effects and a clean, modern visual style defined through CSS.

Oct 6, 2025

Loading thumbnail…

Interactive Bar Chart Analysis

This interactive bar chart displays the average salary distribution across various data science job titles, sourced from a CSV dataset of data science salaries. Users filter the displayed salary range using a slider and numeric inputs, while a dropdown menu toggles sorting by salary or job title. The chart, rendered with D3 v7 as an SVG, uses `d3.rollup` to aggregate and `d3.mean` to calculate averages, with `d3.scaleBand` and `d3.scaleLinear` handling the axes. Bars update dynamically via a custom `updateChart` function and include hover tooltips.

Apr 16, 2024

Loading thumbnail…

Choropleth Map Analysis

This interactive choropleth map displays global data science salaries, using a color scale from dark purple to bright yellow to represent the salary ranges across countries. Users can filter the map's color distribution through two sliders that adjust the minimum and maximum salary values, while hovering over individual countries reveals a tooltip with the country name and its corresponding salary figure. The visualization is built with D3.js, utilizing `d3.geoMercator` for map projection, `d3.geoPath` to render country boundaries, and a `d3.scaleLinear` color scheme, with data sourced from a CSV file and world geometry from a GeoJSON file.

Apr 16, 2024

Loading thumbnail…

Scatter Plot with Colors

This scatter plot visualizes Test Cricket Records, plotting runs against matches played for individual players. Each circle is colored by the player’s country using `d3.scaleOrdinal` with `schemeCategory10`. The data is loaded via `d3.csv` from a GitHub gist, and axes are generated with `axisBottom` and `axisLeft`. The visualization uses D3 v6, renders to SVG, and applies linear scales via `scaleLinear` to map the quantitative fields.

Apr 16, 2024

Loading thumbnail…

India Car Sales

This visualization presents a pie chart of the top five Indian car companies by annual sales, with each slice labeled with its sales figure. The chart is built using D3 v5, with data loaded via `d3.csv` from a GitHub-hosted CSV file. The `d3.pie` and `d3.arc` functions generate the chart geometry, while `d3.scaleOrdinal` assigns distinct colors to each company. A legend on the right side lists the companies with their corresponding sales values.

Apr 13, 2024

Loading thumbnail…

India Car Sales

This visualization presents annual car sales for various companies in India as a pie chart, using data fetched from a CSV file hosted on GitHub. The chart displays sales figures in thousands, with each slice colored distinctly and labeled with its corresponding value. Legends identify each company alongside its sales total. The code employs D3 v5 APIs including `pie()`, `arc()`, and `scaleOrdinal()` to generate the SVG paths, labels, and legend elements, with data loaded asynchronously via `d3.csv`.

Apr 13, 2024

Loading thumbnail…

Android vs iOS Users Data

This area chart compares Android and iOS user numbers over time, using green and gray filled regions to show yearly trends from 2009 to 2023. The visualization is rendered as an SVG using d3 v6, leveraging the `area` generator with `curveBasis` for smoothed paths and `scaleTime`/`scaleLinear` for axes. Data is loaded via `csv` from the author's GitHub repository, with a custom legend and axis labels. The chart employs `axisBottom`, `axisLeft`, and explicit margin calculations to position elements within a 960×500 viewport.

Apr 11, 2024

Loading thumbnail…

Android, iOS Windows and Linux Users Data

This pie chart visualizes the aggregate distribution of Android, iOS, and BlackBerry OS users from a yearly US dataset spanning 2009–2023. The visualization displays three colored slices with white percentage labels and a legend. Built with D3 v6, it uses `d3.arc` for slice geometry, `d3.scaleOrdinal` for color mapping, and `d3.csv` to fetch external data. The SVG output is generated with a custom render function that computes angles via `d3.pie` and positions labels using arc centroids.

Apr 11, 2024

Loading thumbnail…

Pie Chart

This pie chart displays the top five countries by total reported COVID-19 cases, using a dataset from a GitHub-hosted CSV file. The visualization loads data with `d3.csv`, sorts it in descending order, and slices the first five entries. It renders slices using `d3.arc` and `d3.pie` within an SVG, with labels positioned via `label.centroid`. A categorical color scale from `d3.scaleOrdinal` distinguishes each country, while solid white strokes separate the segments.

Apr 11, 2024

Loading thumbnail…

Scatter Plot with Shapes

A scatter plot displays Test Cricket player records, mapping matches played on the x-axis against runs scored on the y-axis. Different point shapes—circles, squares, triangles, diamonds, and stars—encode the player's country, while the data originates from a CSV file. The visualization uses D3 v6's scaleLinear, axisBottom, axisLeft, and scaleOrdinal APIs, rendering paths via d3.symbol. This example demonstrates how shape encoding can add a categorical dimension to a simple two-variable comparison.

Apr 4, 2024