N

Nwaegerue Chinemerem

@thecode-master-sy·17 public vizzes

Loading thumbnail…

interactive scatter plot

This interactive scatter plot displays measurements from the famous Iris dataset, with dropdown menus allowing users to select which four numeric attributes (sepal length, sepal width, petal length, petal width) appear on the x and y axes. Each point represents a flower, color-coded by species. Built with D3 v7 and React, the SVG visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `transition().duration(2000)` to animate points smoothly to new positions when selections change.

Loading thumbnail…

Data viz of 2018 football top scorers

This interactive scatter plot visualizes data on the top football scorers of 2018, comparing the number of goals scored against matches played. The data is filtered to show only players from La Liga, Serie A, and Bundesliga. Player names are revealed on hover, while the color of each point indicates the league, and the point size encodes the average shots per match. Built with React and D3 v5, the visualization uses D3's `scaleLinear` for the axes, `scaleSqrt` for sizing, and `scaleOrdinal` with `schemeCategory10` for the categorical color legend.

Loading thumbnail…

Data viz of 2018 football top scorers

This visualization displays a large, static message reading “Hello HTML!” centered on a white background, styled through inline CSS. The page renders using a single HTML file with embedded JavaScript and style rules, but does not include any data or charting logic. It serves as a minimal starter template for testing CSS and JavaScript interactions, with the text scaled to a massive font size of 13em using the `.message` class. No external libraries or data visualizations are present in this example.

Loading thumbnail…

Data viz of 2018 football top scorers

This visualization displays a large, static message reading “Hello HTML!” centered on a white background, styled through inline CSS. The page renders using a single HTML file with embedded JavaScript and style rules, but does not include any data or charting logic. It serves as a minimal starter template for testing CSS and JavaScript interactions, with the text scaled to a massive font size of 13em using the `.message` class. No external libraries or data visualizations are present in this example.

Loading thumbnail…

Data viz of 2018 football top scorers

This visualization displays a large, static message reading “Hello HTML!” centered on a white background, styled through inline CSS. The page renders using a single HTML file with embedded JavaScript and style rules, but does not include any data or charting logic. It serves as a minimal starter template for testing CSS and JavaScript interactions, with the text scaled to a massive font size of 13em using the `.message` class. No external libraries or data visualizations are present in this example.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Fork of Goals Scatter Plot with Responsive Axis

This scatter plot visualizes 2018 top football league scorers, mapping goals on the x-axis and shots on the y-axis. Each circle represents a player, colored by league (La Liga, Serie A, Bundesliga, Premier League) via a custom color function. Rendering uses D3 scales and axes from `@curran/responsive-axes`, with the visualization observing container resize events to adapt its dimensions. The underlying data comes from the `@eschuman20/footballscorers` dataset, and the code includes an embedded YouTube tutorial link.

Loading thumbnail…

Bar Chart Horizontal

This horizontal bar chart displays population estimates for six countries, with each bar’s length scaled to its population value. The chart uses D3 v7 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, with SVG rendering. A bottom axis labels ticks in abbreviated format (e.g., “B” for billions), while horizontal grid lines extend across the plot area. The y-axis labels are country names, and the x-axis is titled “population.” Data is hardcoded as an array of objects, with numeric populations derived by multiplying string values by 1000.

Loading thumbnail…

face by thecodemaster

A stylized face rendered in SVG animates its eyebrows in a looping motion. Built with D3 v7, the visualization constructs a green circular head, two eyes, and a mouth using basic shape primitives and an arc generator. The `d3.arc()` function defines the mouth’s curved path, while chained `transition().duration()` calls move the eyebrow rectangles up and down. The code uses `select()` to manipulate the SVG canvas and applies attributes like `cx`, `r`, and `transform` to position elements. The animation runs automatically on page load, with no external data source.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3.js setup, rendering an empty SVG canvas with a single `<g>` group element. The code uses `d3.select` to target the SVG by its `id`, sets its width and height to 500 pixels each, and appends the group. It is built with D3 version 7.8.2, loaded from the unpkg CDN, and the visualization is entirely static, showing no data or geometric shapes. The fork serves as a starting point for learning D3’s core selection and SVG manipulation APIs.