grandbleu916

@grandbleu916·5 public vizzes

Customizing Axes

This bar chart shows the population of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. The visualization demonstrates customization of D3 axes by removing domain lines, styling tick lines and labels with pink and hot pink colors, and formatting population values using `d3.format('.3s')` with a custom replacement that converts 'G' to 'B'. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft` with an SVG rendering approach.

Aug 12, 2019

Loading thumbnail…

AAAAApple

Five red apples appear in a row against a white background, then one disappears after a second. The example demonstrates D3's data join pattern by binding an array of fruit objects to SVG circles, entering circles for each apple, and removing the circle when the data array shrinks. It uses D3 v5's `select`, `range`, and the `enter`/`exit` selections with `attr` to position and style the circles at 120-pixel intervals.

Aug 12, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how to display a simple text message within a web page using D3.js. It shows a static greeting rendered in large, styled typography against a dark blue background. The code imports the `select` function from the D3 library and applies the message text to a `<div>` element using `select('#message').text()`. The project also illustrates ES6 module usage, importing a string from a separate local file, along with CSS styling via Google Fonts.

Aug 12, 2019

Loading thumbnail…

Let's make a face with D3.js!

A D3.js smiley face is drawn with SVG shapes, including pink circles for the head and eyes, rectangles for eyebrows, and an arc for the mouth. The eyebrows animate by moving downward and upward repeatedly using chained `transition()` calls with `duration(1000)`. The example demonstrates basic DOM manipulation with `d3.select`, shape generation via `d3.arc`, and attribute setting on SVG elements.

Aug 8, 2019

Loading thumbnail…

SVG Example

This example displays a single pink diamond shape drawn on an SVG canvas, demonstrating basic vector graphics rendering within a VizHub project. The shape is defined by an SVG `<path>` element with explicit coordinate points, while the page layout and text styling are handled through CSS. The code imports D3.js utilities and a local ES6 module to inject a "Hello VizHub!" message, showcasing how D3’s `select` function interacts with HTML elements. The visualization relies solely on static SVG markup rather than dynamic data or interactive features.

Aug 7, 2019