Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published1🌍 Public
DDaniel
Last edited Aug 1, 2019
Created on Jul 31, 2019

An interactive hierarchical graph displays expert and technology nodes with D3.js v5, rendered as an SVG with draggable circles and connecting lines. The visualization uses a button to trigger a custom DOM event, while force-directed layout and zoom/drag interactions manipulate node positions. Data comes from a static JavaScript object representing a company's expertise network, with node colors indicating role types.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A D3.js network graph visualizes a hierarchical dataset of experts and strategic technology topics, using color-coded nodes and connecting links. Rendered as SVG, the graph supports zooming via `d3.zoom` and dragging nodes through `d3.drag`, with positions computed by a force simulation. A "Switch" button dispatches a custom event, though the graph itself does not visibly change in response, and the code includes a template-prefilled smiley-face title that is not implemented in the visualization.

DDaniel
90% match
Loading thumbnail…

Let's make a face with D3.js!

This interactive network graph uses D3’s force simulation to arrange a hierarchical dataset of experts and technology topics, with draggable nodes and zoom/pan support via `d3.zoom`. A button triggers a custom `switch` event that toggles the graph between a tree layout and a face-like arrangement, animating the eyebrows. Rendered as SVG elements (`circle` and `line`), the visualization demonstrates DOM manipulation with D3’s data joins and scales.

Ssongr0
90% match
Loading thumbnail…

Let's make a face with D3.js!

This interactive visualization displays the hierarchical structure of world regions using a tree layout, with each node representing geographic entities from a JSON dataset. The chart renders as a dendrogram with branching paths drawn as horizontal links, while all node labels are displayed as text. Built with D3.js v5, the code uses the `tree()`, `hierarchy()`, and `linkHorizontal()` APIs to compute positions and paths, and includes zoom functionality via `zoom().on('zoom', ...)` for exploring the data. The visualization is rendered as SVG with custom styling for node text and edges.

RRohit440
81% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a hierarchical tree visualization of world regions and countries, arranged in a structured layout with labeled nodes. The visualization shows the geographic hierarchy from continents down to individual countries, with each text node sized according to its depth in the tree. The code uses D3.js v5 APIs including `tree()`, `hierarchy()`, `linkHorizontal()`, and `zoom()` to compute the layout, draw the connecting paths, and provide interactive zooming. Data comes from a local `data.json` file with region and country names, rendered as SVG elements with custom text shadow styling.

Ss-janibekova
79% match
Loading thumbnail…

Let's make a face with D3.js!

A D3.js example builds a force-directed graph visualization of a network, rendered on a Canvas element with red circular nodes and connecting edges. The simulation uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, `d3.forceCollide`, `d3.forceManyBody`, and `d3.forceLink` to position nodes and links. Data is loaded from a JSON file via `d3.json`, and the `tick` event updates the Canvas drawing. The code demonstrates combining SVG markup with Canvas rendering for network exploration.

Hhhhheeee
78% match
Loading thumbnail…

Let's make a face with D3.js

This example renders a hierarchical dataset of world regions and countries as a tidy tree visualization, with the root at the left and leaves extending rightward. The tree layout positions nodes in a parent-child structure, and horizontal links connect them using `d3.linkHorizontal`. Labels display each region’s name, with font size scaling by depth and text anchors varying for leaf versus internal nodes. The visualization supports pan and zoom via `d3.zoom`, and loads the nested JSON data using `d3.json`.

Rrgarimella-viz
78% match
Loading thumbnail…

Let's make a face with D3.js!

This visualization displays the hierarchical structure of world regions and countries as a horizontal tree layout, using the country names themselves as the visual elements. The D3.js v5 code loads country data from a JSON file, applies the `tree` layout, and renders the hierarchy via SVG paths for links and text nodes whose font size scales with depth. The visualization supports pan and zoom interactions through the `zoom` function, making it easy to explore the nested geographic groupings.

Mmeihaoming
78% match
Loading thumbnail…

Let's make a face with D3.js!

This example renders a hierarchical dataset of world regions and countries as a horizontal tree, using D3.js v5. The visualization groups countries under regions such as Southern Asia and Western Asia, with text labels sized by depth. The code builds the layout with `d3.tree` and `d3.hierarchy`, draws curved links via `d3.linkHorizontal`, and applies zooming through `d3.zoom`. Data loads from a JSON file, and SVG elements are styled with a custom font and blue stroke.

HHadi M Zadeh
78% match