guinessjulie

@guinessjulie·3 public vizzes

Importing D3 Function Using ES6

A red SVG canvas demonstrates ES6 module imports in D3 v6, loading the library from UNPKG and styling the backdrop with `d3.select` and `style`. The example highlights how to use `import` statements for D3 functions while rendering a fixed 960×500 viewport, with `index.html` linking the script and bundled JavaScript.

Oct 30, 2020

Loading thumbnail…

Untitled

This example demonstrates how to integrate D3.js with ES6 modules in VizHub, rendering a static message with a large, centered font. The code imports the `select` function from D3 via UNPKG and a custom `message` string from a local `myMessage.js` module. It uses `select('#message').text(message)` to update the DOM, with styling controlled by a CSS file that sets the text alignment, font size, and appearance. The visualization shows a simple text-based output without any data or interactive behavior.

Oct 30, 2020

Loading thumbnail…

Force Directed Graph

A force-directed graph maps parent companies to their subsidiary brands, using curved links and labeled circular nodes. The visualization shows relationships like Facebook, Inc. connecting to Instagram and WhatsApp, with dashed coral lines distinguishing weaker connections. Built with d3.forceSimulation, the layout applies forceLink, forceCenter, and forceManyBody to position nodes dynamically. Node size and blue color intensity reflect link count, computed via path filtering. User interaction is supported through d3.drag, while tick updates redraw curved SVG paths. Data is embedded directly in the code as link and node objects.

Oct 26, 2020