qliu50@fordham.edu

@irisruc·4 public vizzes

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes world countries colored by economic classification, with an interactive color legend that filters the map when clicked. Hovering a country reveals its name and value via a tooltip, and the map supports zooming and panning. The visualization uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for the map, while `scaleOrdinal` with `schemeSpectral` maps data values to colors. Data is loaded from the World Atlas TopoJSON and TSV files, and filtering updates both map and legend opacities in real time.

Feb 18, 2024

Loading thumbnail…

SVG starter

This example demonstrates a collection of primitive SVG shapes—circles, rectangles, lines, and a path—arranged in a coordinate grid and styled with CSS. The code uses raw SVG elements within an inline `<svg>` tag, applying transforms like `scale`, `translate`, and `rotate` to position and manipulate the shapes. A CSS file defines stroke widths, colors, and line joins for the graphical elements, while the HTML structure keeps the markup minimal. The visualization serves as a starter template for understanding how to combine SVG geometry with external stylesheet rules.

Jan 10, 2024

Loading thumbnail…

HTML Starter - Cars Report

This starter example displays a simple inventory of three cars, listing each model’s year, name, and price as static text. It shows a basic webpage structure with a heading and an unordered list, where the first item is highlighted in red. The visualization relies on plain HTML for content and a linked CSS file (`style.css`) for styling, setting the font size and family for the entire body. The implementation uses no external libraries or JavaScript, serving purely as a minimal, static HTML report.

Jan 9, 2024

Loading thumbnail…

Fork of Hello VizHub 3524

This example shows a simple text-based car report that loads a hardcoded JSON dataset and displays a filtered list of cars under a specified price. It demonstrates asynchronous data loading with a Promise-based `getCars` function and ES6 module imports across local files. The code uses D3 via UNPKG only for import, while the report generation relies on native JavaScript array methods like `filter`, `map`, and `join`. The final output renders as formatted text in an HTML `<pre>` element using vanilla DOM manipulation.

Jan 8, 2024