Skip to main content
Log in
J

Joshua chirchir

@Joshua56·12 public vizzes

Loading thumbnail…

Untitled

This interactive bar chart displays population data for countries within a selected world region. Clicking a region name—Africa, Asia, Europe, Americas, or Oceania—triggers a fetch request to the REST Countries API, which returns country data for that area. The visualization uses D3.js to generate horizontal bars whose heights encode each country’s population, with rotated text labels showing country names and exact population values. The SVG is dynamically cleared and redrawn for each new region selection, with a hotpink styling used for the static bar examples.

Apr 7, 2023
Loading thumbnail…

Effects on population towards poverty

This visualization explores the relationship between population size and poverty levels across different regions. Users select a region from an interactive list, which updates the scatterplot-style SVG display. Built with D3 version 6, the example uses d3.select and d3.json to load and bind data, while d3.scaleLinear and d3.axisBottom manage the quantitative axes. The code demonstrates basic D3 data joins for rendering circles and updating the visualization based on user input.

Apr 6, 2023
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal setup for D3 version 7, displaying the text "Hello D3 version 7" in the center of the page at an oversized font size. The code imports the `select` function from the D3 module and uses it to set the body’s text content. The page loads D3 from a CDN and references a separate `bundle.js` file, while a linked video shows how to begin using D3 version 6 for context.

Apr 6, 2023
Loading thumbnail…

Fork of Data visualizations

This scatterplot visualizes the correlation between poverty and obesity rates across U.S. states. Each state is represented by a circle labeled with its abbreviation, plotted along axes for poverty and obesity percentages. The chart uses D3.js to load CSV data, create scales, and render the SVG elements. A tooltip, built with the d3-tip library, appears on click, showing the state name, poverty, and obesity values. The accompanying text highlights observed clusters and trends in the data.

Apr 6, 2023
Loading thumbnail…

Fork of D3Times

This visualization shows the correlation between poverty and obesity rates across U.S. states using a scatter plot from the D3Times dataset. A circle represents each state, with its horizontal position based on poverty percentage and vertical position based on obesity percentage; the axes are scaled to focus on the higher ranges common in the data. The chart reveals a general trend where states with higher poverty rates, such as Arkansas and West Virginia, also exhibit higher obesity rates, while states with lower poverty, like Colorado and Massachusetts, show lower obesity. Implemented with D3.js version 5.5, the code loads CSV data from a remote GitHub repository, uses `d3.scaleLinear` for axes, draws circles with appended state abbreviations, and incorporates d3-tip tooltips that display state details on click. The SVG rendering is constructed within a Bootstrap container, with axis labels and an accompanying article explaining the observed correlation.

Apr 6, 2023
Loading thumbnail…

Fork of Visualasation

This example displays the text “Hello D3 version 7” in massive, centered type on a blank page, demonstrating a minimal setup for D3 v7. It uses `d3.select` to target the `body` element and the `.text` method to insert content, with styling controlled via CSS in an inline style block. The page loads D3 from a CDN and runs the script from a separate bundled file, showing the basic structure for any new D3 project.

Apr 6, 2023
Loading thumbnail…

Fork of Visualasation

This example displays the text “Hello D3 version 7” in massive, centered type on a blank page, demonstrating a minimal setup for D3 v7. It uses `d3.select` to target the `body` element and the `.text` method to insert content, with styling controlled via CSS in an inline style block. The page loads D3 from a CDN and runs the script from a separate bundled file, showing the basic structure for any new D3 project.

Apr 6, 2023
Loading thumbnail…

Visualasation

This example demonstrates how to initialize a basic D3 visualization by rendering the text "Hello D3 version 7" directly into the page body. It uses the `select` API from `d3` to target the `body` element and applies the `.text()` method. The page loads D3 version 7.8.2 via a CDN and uses a bundled JavaScript file. The visualization is minimal, showing the immediate output of a D3 command without any data processing or custom graphics.

Apr 6, 2023
Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal setup for D3 version 7, displaying the text "Hello D3 version 7" in the center of the page at an oversized font size. The code imports the `select` function from the D3 module and uses it to set the body’s text content. The page loads D3 from a CDN and references a separate `bundle.js` file, while a linked video shows how to begin using D3 version 6 for context.

Apr 6, 2023
Loading thumbnail…

POPULATION

This example displays the word “POPULATION” as static, oversized text centered on a page. The visualization demonstrates a minimal D3 setup, showing only the text “Hello D3 version 7” in the browser. Built with D3 v7, the code uses `d3.select` to target the body element and the `.text` method to insert content. The page’s styling and layout are defined in the HTML with a 13em font size. No data source or interactive behavior is included.

Apr 6, 2023
Loading thumbnail…

Population

This example displays the text “Hello D3 version 7” in the center of the page at a massive font size. It demonstrates basic DOM manipulation using D3’s `select` method to target the `body` element and set its text content. The visualization loads D3 v7 from a CDN and updates the page’s existing `body` element, relying on the bundled `index.js` for the dynamic text assignment. No data fetching or complex rendering occurs, only a simple text replacement within the HTML document.

Apr 6, 2023
Loading thumbnail…

Untitled

This map shows the population of individuals under 18 living in poverty across US counties in 2014, using red semi-transparent bubbles over a gray landmass with white state borders. The visualization loads TopoJSON data and renders it with `d3.geo.path` for geographic shapes, while bubble radii are scaled via `d3.scale.sqrt` based on population values. Hovering over a county triggers a tooltip displaying its name and population, and bubbles highlight with a darker stroke on mouseover. The SVG output includes static county and state paths, with the proportional bubbles layered on top.

Apr 6, 2023