argonaeut

@argonaeut·6 public vizzes

Interactive Map.js!

This interactive map displays global happiness and suicide mortality data, with each country colored blue and highlighted orange on hover. A tooltip reveals the country’s happiness rank, score, suicide mortality rate, and universal healthcare status when available, or states these as unknown otherwise. The visualization uses D3 v5 with `d3.geoMercator` and `d3.geoPath` to render SVG paths from TopoJSON world-atlas data, while `d3.zoom` enables panning and zooming. Happiness and suicide statistics come from a hosted JSON dataset, and hover text is implemented via SVG `<title>` elements.

Dec 1, 2020

Loading thumbnail…

Map.js!

This map visualization displays the world’s countries by using a Mercator projection to render geographic features as filled SVG paths on a light gray sphere background. The code loads country boundaries from the world-atlas TopoJSON dataset and converts them to GeoJSON with `topojson.feature`, then draws each country using `d3.geoPath`. Styling applies a blue fill with dark strokes and a subtle opacity, while the hidden overflow and full-bleed body create an immersive, full-window presentation.

Nov 30, 2020

Loading thumbnail…

Healthcare and The Will To Live

This interactive D3.js visualization argues for universal healthcare by correlating national happiness rankings with suicide rates across selected countries. Users explore a choropleth map, built with `d3.geoPath` and `d3.geoProjection`, to hover over countries and reveal metrics like happiness rank, suicides per 1000 population, healthcare access, median salary, and poverty rate. Accompanying bar charts and scatter plots, rendered with standard D3 scales, allow toggling between healthcare systems to compare these relationships. The analysis is based on country-level data presented through a static HTML interface with CSS styling.

Nov 30, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—on a fixed 960 by 500 canvas. The circle uses default styling, while the rectangle is explicitly filled with red. The code directly embeds SVG elements in HTML and applies a small external stylesheet to remove page margins and hide scrollbars. Rendering relies solely on native SVG markup within the browser, without any JavaScript libraries, and the stylesheet also defines a `.highlighted` class that is not used by the shapes.

Nov 25, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple, static HTML report titled “Cars Report,” listing three vehicles with their years, models, and prices. The first entry is visually emphasized with red text via a CSS class. The rendering relies on standard HTML elements and CSS styling, with the page structured using an unordered list and the document styled through an external stylesheet. The data is hardcoded directly in the markup, and no JavaScript or data-visualization libraries are used.

Nov 25, 2020

Loading thumbnail…

Cars Report

This example shows a text-based car report generated from a static JSON dataset, displaying vehicles with prices under $2,000. The page initially shows “Loading…” while `getCars()` simulates a two-second async fetch using a `Promise` and `setTimeout`. After the data loads, `generateReport` filters the parsed JSON array and maps each car through `formatCar`, which uses template literals to produce formatted strings. The final report is inserted into a `<pre>` element via `document.getElementById().textContent`, demonstrating array methods (`filter`, `map`, `join`) with ES6 modules.

Nov 24, 2020