kasalwelengwe@gmail.com

Fork of Fork of Smiley Face Part III

Canada p2

This example displays a map of Canada using a conic conformal projection, with SVG paths outlining the country's boundaries and small circles marking the starting point of each arc in the TopoJSON data. The visualization is built with D3 v5, using `d3.geoPath` and `topojson.mesh` to render the geographic shapes, while the projection is configured with specific parallels and rotation. The data originates from a local JSON file containing topology information, and the map is drawn within an SVG canvas.

Customizing Access

A smiley face rendered with React and D3 follows the mouse cursor across the screen. The application uses React state to track mouse coordinates via an `onMouseMove` event, and D3's `arc` function is imported for potential path generation. The SVG renders a single yellow circle with a black stroke whose center position updates live from the `clientX` and `clientY` values, creating an interactive element that responds directly to user input.

Fork of Hello HTML

This example demonstrates a static SVG face constructed from three circles—a large yellow head and two black eyes—positioned in a fixed layout, alongside a separate React-controlled heading. The SVG elements are defined directly in the HTML with explicit attributes for coordinates, radius, fill, and stroke. The React library (react@18.1.0) and ReactDOM (react-dom@17.0.2) are loaded via UMD scripts to render a simple “Hello World” `<h1>` element into the root div, while the SVG remains independent of React’s rendering. The code uses plain SVG markup, not D3 or canvas APIs.

Choropleth Map

A choropleth map visualizes population estimates per country for 2018, with each country shaded and overlaid with proportional circles sized by population magnitude. The visualization uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, while `topojson.feature` loads world geometry. Population data comes from a CSV file, and a square-root scale sizes the circles. The map supports zooming through `d3.zoom`, and legends for color and size are built with custom SVG components. Hovering highlights countries and shows population in a tooltip.

Choropleth Map with Interactive Filtering

A choropleth map shows world countries colored by economic development group, with an interactive color legend that filters which regions remain highlighted. Users click legend items to isolate a category, dimming all other countries and brightening the selected ones. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with country boundaries drawn from TopoJSON data. The legend is built with D3 scales and SVG circles, while `d3.zoom` enables panning and zooming on the map.

HTML Starter

A world map rendered with SVG using D3.js v5 and the topojson library displays country boundaries via a Natural Earth projection. Each country is colored with a categorical ordinal color scale based on the result of its numeric ID modulo 10, which is also shown in a tooltip on hover. The map supports zooming through D3’s zoom behavior, and hovering highlights a country in red. A color legend, built from the ordinal scale’s domain, is positioned at the top right.

HTML Starter

This example displays an interactive world map with countries colored according to their numeric ID modulo 10, using a spectral color scale to distinguish the resulting categories. The visualization uses D3 v5 with a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, while loading country boundaries from a topojson file. A custom color legend with circles and text labels is built using D3 selections and scales, and the map supports panning and zooming through `d3.zoom`. Population data from a CSV file is not directly displayed; instead, country names and their category values appear as tooltips on click.

HTML Starter

This example renders a simple smiley face using D3.js v5 with SVG. It draws a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within an SVG container. The code uses d3.select and d3.arc with inner and outer radius settings to construct the mouth shape, demonstrating basic SVG append operations and attribute assignment. The visualization is purely static, with no data binding or interactions, serving as a minimal HTML starter template.

HTML Starter

This example renders a simple smiley face using D3.js v5 with SVG. It draws a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within an SVG container. The code uses d3.select and d3.arc with inner and outer radius settings to construct the mouth shape, demonstrating basic SVG append operations and attribute assignment. The visualization is purely static, with no data binding or interactions, serving as a minimal HTML starter template.

HTML Starter

This example renders a simple smiley face using D3.js v5 with SVG. It draws a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within an SVG container. The code uses d3.select and d3.arc with inner and outer radius settings to construct the mouth shape, demonstrating basic SVG append operations and attribute assignment. The visualization is purely static, with no data binding or interactions, serving as a minimal HTML starter template.

HTML Starter

This example displays the text “Hello HTML” centered in the browser with an extremely large font size. It uses a plain HTML document with inline CSS styling for the `body` element, setting `text-align` to center and `font-size` to 13em. The page is a minimal starter template, providing a bare-bones foundation without any JavaScript, frameworks, or external libraries. It serves as a basic entry point for rendering static content directly in the browser.