James DeVore

@JamesDeVore·2 public vizzes

Let's make a face with D3.js!

A simple face is drawn on a blank SVG canvas using D3.js selections. The example demonstrates basic shape creation with the `arc` generator from D3, though the visible rendering is a circle centered in the frame. The code sets the circle’s radius to half the SVG height and positions it at the center using `attr` calls, with the page styled for a clean, full-viewport display. It serves as a minimal introduction to binding SVG elements with D3’s data-join and attribute manipulation.

Jul 8, 2019

Loading thumbnail…

Untitled

This example shows an interactive force-directed network of interconnected nodes, with each node colored by cluster and draggable by the user. The visualization uses `d3.forceSimulation` to calculate layout physics, `d3.forceLink` for edge constraints, and `d3.forceCenter` to keep the graph centered. Node positions update smoothly via `d3.zoom` and `d3.drag` behaviors, while transitions are animated with `transition.attrTween` for opacity. The data is provided as a static JSON file embedded in the script.

Jul 8, 2019