Mabelbao

@Mabelbao·5 public vizzes

Choropleth Map

A choropleth map colors countries by income group using an ordinal color scale with a spectral scheme, drawing each nation with `d3.geoPath` and a Natural Earth projection. The visualization supports zooming via `d3.zoom` and includes a custom color legend rendered with SVG circles and text. Country names and income data come from TopoJSON and TSV files loaded from the world-atlas package. Hovering over a country reveals its name and income group in a tooltip.

Nov 24, 2023

Loading thumbnail…

Choropleth Map

This choropleth map visualizes global economic groupings by coloring each country according to its economy category. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render country boundaries from TopoJSON data loaded from the world-atlas package. A sequential `d3.scaleOrdinal` with `schemeSpectral` assigns colors, while zooming is enabled through `d3.zoom`. Hovering highlights countries in red, and a color legend explains the ordinal categories.

Nov 24, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a large centered “Hello HTML!” message using plain HTML and CSS. The page consists of a single `div` element with the class `message`, which applies a font size of 13em and centers the text horizontally. No external libraries or JavaScript are used; the styling is defined in an inline `<style>` block. The visualization demonstrates the fundamental structure of an HTML page with embedded CSS, serving as a minimal starting point for web-based projects.

Nov 24, 2023

Loading thumbnail…

Fork of Hello D3 Starter

This example displays the text “Hello HTML!” in a large, centered font, demonstrating a minimal setup for a web-based data visualization. The code uses plain HTML and CSS to render the message, with the styling defined in an embedded `<style>` block. The visualization is a fork of the “Hello D3 Starter” project, adapted for the React framework. It references a README describing a data visualization of countries with the most blood donations, and includes a link to a separate React starter project, though the current code does not implement any chart or data rendering.

Nov 24, 2023

Loading thumbnail…

Hello D3 Starter

This example displays a static webpage with the message “Hello HTML!” centered and styled with large text. It serves as a minimal starter template, showing the foundational structure of an HTML page that integrates CSS for styling and JavaScript for potential interactivity. The code uses plain HTML elements, a `<style>` block for CSS rules, and an empty `index.js` file. No data visualization is present; it only demonstrates the basic layout and styling approach for beginning a project.

Nov 24, 2023