Matovu Ronald (@matovu-ronald), VizHub

Fork of ICE 08 11540905 - test

This interactive map displays world countries in a blue and green color scheme, with hover effects that change the country fill to red. It uses d3.geoEquirectangular projection and d3.geoPath to render the map from a Sphere object, while country boundaries and features are drawn from a JSON file loaded from the world-atlas package. The TopoJSON feature method creates GeoJSON objects for the countries. The map is rendered as an SVG with CSS-based hover styling.

Jun 26, 2023

Loading thumbnail…

Test Map by Ronald

This map shows the 50 U.S. states in blue with black borders, using a geographic projection to display land and interior boundaries. Built with React and D3 v5, it relies on `d3.geoPath` with the `geoAlbersUsaTerritories` projection to render the SVG paths. State data comes from the `us-atlas` TopoJSON file, processed via TopoJSON’s `feature` and `mesh` functions. Hovering a state turns it purple, as styled through CSS.

Jun 26, 2023

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map visualizes World Bank GDP per capita data for 2020 across countries worldwide. The map colors each country using a quantile color scale with a YlGnBu sequential scheme, with gray filling regions lacking data. The visualization loads GeoJSON topology from the world atlas and CSV data, processing both through `Promise.all` before rendering with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The code implements a reusable map component that updates through a state management pattern using `d3.select` and `d3.scaleQuantile`.

Jun 26, 2023

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map visualizes World Bank GDP per capita data for 2020 across countries worldwide. The map colors each country using a quantile color scale with a YlGnBu sequential scheme, with gray filling regions lacking data. The visualization loads GeoJSON topology from the world atlas and CSV data, processing both through `Promise.all` before rendering with `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.geoGraticule`. The code implements a reusable map component that updates through a state management pattern using `d3.select` and `d3.scaleQuantile`.

Jun 26, 2023

Loading thumbnail…

D3 Scatter Plot

This example presents the classic Iris dataset as a red circular scatter plot with axes, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v7 to load the CSV data, apply `scaleLinear` scales derived from `extent`, and render SVG circles via a data join. Axes are generated with `axisLeft` and `axisBottom`. The visualization runs in a React framework context, though the visible code is vanilla JavaScript.

May 31, 2023

Loading thumbnail…

SVG Fundamentals

This example illustrates a minimal HTML page titled “SVG Fundamentals” that renders a static text message using CSS styling. The page contains a single `div` element with the class `message`, which is styled with a large font size and centered alignment via CSS. The code relies on basic HTML structure and CSS rules, with no JavaScript or external libraries involved. It demonstrates the simplest form of web page composition, where content and presentation are separated through CSS classes.

May 28, 2023