Skip to main content
Log in
P

pin84

@pin84·6 public vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two methods of creating legends in a D3.js visualization: a categorical color legend showing fruit types with distinct colors, and a quantitative size legend representing numeric values with scaled circles. The SVG-based visualization uses D3 v5's scaling functions, specifically `scaleOrdinal` for the color mapping and `scaleSqrt` for the size mapping, with custom legend constructors `colorLegend` and `sizeLegend` building the tick marks, circles, and labels.

Jun 9, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates a simple data-loading workflow using D3.js version 5 and ES6 modules. It displays a static "Hello VizHub!" message styled with a large Ubuntu font on a dark blue background. The code imports the `select` and `csv` functions from D3, then fetches `data.csv` asynchronously and logs the parsed population data to the browser console. No visual representation of the data is rendered—only the message and console output are shown.

May 12, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js. It displays the text “Hello VizHub!” centered on a dark blue page with large, styled typography. The code imports the `select` function from D3 v5 and uses it to set the text content of a `#message` div. It also imports a string from a separate local module, `myMessage.js`, and applies the Ubuntu font via CSS.

May 12, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js. It displays the text “Hello VizHub!” centered on a dark blue page with large, styled typography. The code imports the `select` function from D3 v5 and uses it to set the text content of a `#message` div. It also imports a string from a separate local module, `myMessage.js`, and applies the Ubuntu font via CSS.

May 12, 2019
Loading thumbnail…

abc

This example demonstrates a minimal VizHub project that displays a single HTML element containing the text “aaa.” The page uses an external stylesheet to render the body in a large, white-on-white Ubuntu font, while a separate JavaScript module imports D3’s `select` function to set the content of a `#message` div to “Hello VizHub!”. The code illustrates basic ES6 module imports, D3 selection, and CSS styling within a self-contained template.

May 12, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js. It displays the text “Hello VizHub!” centered on a dark blue page with large, styled typography. The code imports the `select` function from D3 v5 and uses it to set the text content of a `#message` div. It also imports a string from a separate local module, `myMessage.js`, and applies the Ubuntu font via CSS.

May 12, 2019