albatross97

@albatross97·5 public vizzes

3.28-2

This example displays a world map rendered as a set of SVG paths using the Mercator projection. It loads geographic data from the World Atlas TopoJSON collection and converts it to GeoJSON with the TopoJSON `feature` function. The code applies `d3.geoPath` and `d3.geoMercator` to generate the country outlines, with paths appended to the SVG container. The visualization is minimal, showing only the mapped landmasses without additional styling or interactivity.

Apr 4, 2021

Loading thumbnail…

3.28

This example demonstrates how to update a data-bound visualization with D3’s enter, update, and exit selections. An animated fruit bowl shows apples and lemons as colored circles that appear, change type, and disappear over timed intervals. The code uses `d3.scaleOrdinal` for color and radius mapping, `selection.merge`, and `transition` to smoothly animate circle attributes. Fruit data is generated randomly with each item assigned a unique `id` to track changes across renders. All rendering is done in SVG.

Mar 28, 2021

Loading thumbnail…

new d3

This example displays a horizontal bar chart of the populations of five countries, with bars animating to a reduced opacity on mouseover and a tooltip indicating the country name. The visualization loads population data from a local CSV file, and uses D3 v6’s modular `select`, `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the SVG bar chart. The code applies custom tick formatting for millions and uses a transition to animate bar opacity, while omitting axis lines and ticks for the categorical axis.

Mar 28, 2021

Loading thumbnail…

Cars Report

This example demonstrates a basic D3 version 6 setup with a static SVG scene containing a green circle, rectangle, and a polyline path, accompanied by a text report that lists cars priced above $2,000. The visualization shows how D3 can structure SVG elements while also illustrating asynchronous data loading. The code uses the native `fetch`-like pattern through a custom `getCars()` promise, which resolves after a two-second delay, and then applies array filtering and mapping to format the car data into readable strings. The SVG rendering is done directly with hardcoded shapes rather than data-driven joins.

Mar 27, 2021

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal HTML page that displays the text “Hello HTML” in a large, centered font. It demonstrates the foundational use of CSS for styling and JavaScript for interactivity, with the script logging “Hello JavaScript!” to the browser’s developer console. The page relies on plain HTML elements, a `<style>` block, and an inline `<script>` tag, with no external libraries or data sources.

Mar 27, 2021