benben1996

@benben1996·11 public vizzes

Let's make a map with D3.js!

This example demonstrates fundamental DOM manipulation and animation with D3.js by constructing an interactive smiley face with yellow circular head, eyes, and animated eyebrows. The visualization uses D3.js v5 to create SVG elements including circles, rectangles, and a path for the mouth via the `d3.arc` API. The eyebrows undergo a looping transition animation using chained `transition().duration(2000)` calls to move up and down. The code shows basic selection, appending, and attribute setting through the `select` and `append` methods.

Jan 4, 2019

Loading thumbnail…

Let's make a face with D3.js!

A simplified yellow face is drawn from SVG shapes, including a circular head, eyes, eyebrows, and a mouth, centered in a 960×500 viewport. The example demonstrates D3.js v5 selections, the `arc` generator for the mouth path, and chained `transition().duration()` calls that animate the eyebrow group vertically up and down over two seconds each. The code hard-codes all geometry values, such as eye spacing and radius, and uses SVG attributes for styling.

Jan 4, 2019

Loading thumbnail…

Choropleth Map

This choropleth map displays world countries in solid red against a blue sphere, with each country labeled by name on hover. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render geographic features from TopoJSON data loaded via the world-atlas package. Interactive zooming is implemented with D3’s zoom behavior, while country styling and hover effects are defined in CSS. The map draws all features as SVG paths, with a title element added per country for tooltip-like labels.

Dec 28, 2018

Loading thumbnail…

Choropleth Map

This choropleth map displays global country polygons colored red, with a blue sphere background and hover highlighting. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and `d3.zoom` for pan-and-zoom interactions. Geographic data comes from the World Atlas TopoJSON and TSV files, which are merged to attach country names for tooltips.

Dec 28, 2018

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map with D3.js, displaying country boundaries as light green polygons on a dark blue background with a curved sphere outline. The visualization uses the `geoMercator` projection and `geoPath` to render geographic features as SVG paths. It loads world country data as TopoJSON from the world-atlas package, converts it to GeoJSON using the `feature` function from TopoJSON, and binds the resulting features to path elements. The map is static with no interaction or animation.

Dec 28, 2018

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes such as circles, rectangles, lines, and paths render with CSS styling. The code applies stroke, fill, and color properties both inline and through CSS classes, including stroke-linejoin and stroke-linecap attributes. Elements are grouped and transformed using SVG’s translate and scale operations. The example uses no external libraries, relying solely on standard SVG markup and CSS for presentational effects. The visual output is static, showing the shapes scaled and positioned within the viewport.

Dec 25, 2018

Loading thumbnail…

Hello VizHub

This example displays a single bold message, “Hello VizHub!”, centered on a dark background using large, light-colored Ubuntu text. It demonstrates a minimal D3.js setup where the DOM element’s content is set via the `select` and `text` methods. The code imports a local ES6 module (`myMessage.js`) and uses D3 v5 from a CDN, with styling handled entirely by external CSS. No data is loaded or processed; the visualization is purely a static text rendering.

Dec 25, 2018

Loading thumbnail…

Cars Report

This example displays a car report, listing details for five vehicles. It selects a single car and shows its formatted description, including the year, make, model, and price, in large text on a dark background. The code uses ES6 modules to import car data from a JSON string, filters and maps over the array, and updates the DOM via `document.getElementById` to display the message. The styling applies the Ubuntu font and a centered layout through CSS.

Dec 25, 2018

Loading thumbnail…

Cars Report

This example displays a single car brand name in large, centered text, pulled from a small inline JSON dataset of used cars with year, make, model, and price fields. It highlights the simplest possible data-binding workflow: loading static JSON, selecting the first record, and updating the DOM. The code uses native JavaScript with ES6 modules, `JSON.parse` for data ingestion, and `document.getElementById` to write text content. Styling relies on plain CSS with a Google Fonts import for Ubuntu, resulting in a minimal, readable report.

Dec 24, 2018

Loading thumbnail…

Hello VizHub

Dec 24, 2018

Loading thumbnail…

Hello VizHub

This example demonstrates the simplest possible D3.js visualization: a single HTML element displaying the text “Hello VizHub!” on a dark background. The code imports the `select` function from D3 v5 and a custom ES6 module exporting a string constant. It uses `select('#message').text(message)` to populate the page, with styling provided by an external Google Fonts stylesheet. The project serves as a minimal template for starting new visualizations, relying entirely on static content rather than data or interactive features.

Dec 24, 2018