Skip to main content
SimilarExport ZIP
100%

d3-module-faces | more modules

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

This visualization maps d3 modules along logarithmic scales of GitHub stars and NPM downloads, with each module represented as a Chernoff face whose facial features encode other attributes like repository size, contributor count, and issue count. A force simulation positions the faces, while color distinguishes module authors. The code uses `d3.forceSimulation`, `d3.forceX`, `d3.forceY`, `d3.forceCollide`, and a custom force container, with annotations rendered via `d3.swoopyDrag`. Data comes from npms.io.

AI-generated description

now with d3-sankey and d3-hexbin

as requested by @xaranke

an iteration on d3-module-faces | standard notation from @micahstubbs

Original README.md text

an iteration that shows axis tick labels in standard notation.

I found the tickFormat snippet to do this at this stackoverflow answer

along the way, I also fiddled with the width and the annotation placement to get everything inside of the 960px bl.ocks.org frame

an iteration on d3-module-faces from @adamrpearce

To visualize the d3 modules being used, I made a qr. By transforming many different attributes of our dataset into friendly glyphs, Chernoff faces allow us to understand multidimensional datasets. The encoding scheme is probably self explanatory, but I've included it below just in case: 

'face':  ƒ('dependentsCount')
'hair':  ƒ('description', 'length')
'mouth': ƒ('downloads')
'nosew': ƒ('githubContributers')
'noseh': ƒ('githubIssues')
'eyew':  ƒ('githubStars')
'eyeh':  d => Math.random()
'brow':  ƒ('repoSize')

I used the following modules:

Data is from nprms.io - see download-data.js to your generate your own listing of modules with different data points.

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/264454a671a6785cbc652cd79460fd2f'>d3-module-faces | more modules</a>

ISC Licensed

Similar vizzes

Loading thumbnail…

d3-module-faces

In this visualization, Chernoff faces encode multidimensional data about d3 modules in a log-scaled scatter plot, with the x-axis representing NPM downloads and the y-axis representing GitHub stars. Each module is depicted as a face whose features—face shape, hair, mouth, nose, eyes, and brows—map to attributes like dependents count, description length, downloads, GitHub contributors, issues, stars, and repo size. The faces are positioned using a force-directed simulation that nudges overlapping glyphs apart, while annotations with swoopy-drag call out notable clusters. The visualization uses Vue for structure and a hybrid SVG/WebGL rendering to support the animated, interactive scatter plot.

11wheel
92% match
Loading thumbnail…

Fork of make a face d3js

This example shows an interactive face made of circles that respond to mouse movement using a D3 force simulation. The visualization reads COVID-19 case data from a CSV file, though the display itself focuses on the playful animated face rather than a traditional chart. Built with D3 v7 and React, the code uses `d3.forceSimulation` to position the facial features, which are rendered as SVG elements within a 960x500 viewport. The simulation continuously updates node positions, creating a lively, dynamic expression that follows the pointer.

GGodspower Wodi
74% match
Loading thumbnail…

Face

This interactive face is rendered as an SVG whose geometry is driven by D3’s force simulation, with nodes representing facial features. The visualization uses a custom D3 v5 force layout to position circles for eyes, a nose, and a mouth, demonstrating how force-directed algorithms can create structured, expressive shapes. The entire scene is drawn using D3’s selection and data-join methods within a React framework, while the HTML page loads D3 from a CDN and logs it to the console for verification. No external data source is used, as the node positions emerge purely from simulation physics.

MMuhammad Aboidrees Altraife
73% match
Loading thumbnail…

Fork of Fork of Fork of Cool graphics

This visualization gallery displays multiple D3.js v7 charts analyzing GitHub contributor data and crime statistics. The main visualization is a network graph showing author-repository collaboration patterns, with nodes positioned around a decorative Buddha path and animated meditation circles using SVG. The interconnected charts include bar charts for commit counts by author and repository, a stacked bar chart for missing children demographics, and various crime rate visualizations. The implementation uses D3's zoom behavior for panning/zooming, tooltips for hover details, and scaleOrdinal for color encoding across different datasets.

NNita
73% 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
73% match
Loading thumbnail…

Face with D3.js!

A face is rendered as a dynamic SVG of stacked, overlapping circular nodes, forming a stylized visage that subtly shifts and settles into place. Built with D3.js v5, the visualization uses a force-directed simulation (`d3.forceSimulation`) to position the nodes, with the SVG coordinates and visual properties like fill color and radius driven by the simulation's tick events. The example runs in a React starter project, with the SVG scene defined in an HTML file and styled via a basic CSS reset.

Ooviya95
73% match
Loading thumbnail…

Let's make a face with D3.js!

A face drawn from a network graph animates as force-directed simulation moves its nodes. The D3.js code uses `d3.forceSimulation` with `forceX`, `forceY`, `forceCollide`, `forceManyBody`, and `forceLink` forces to arrange vertices from a JSON data file. The Canvas rendering updates on each tick, drawing edges with `drawEdge` and circular nodes with `drawNode` to form the face’s features.

Hhhhheeee
72% match
Loading thumbnail…

face d3

This example builds a stylized human face using SVG elements, with the arrangement driven by a physics-based layout. It constructs a face from a set of nodes and links, applying a force-directed simulation to position the features. The visualization uses `d3.forceSimulation` with force parameters to organize the nodes into a recognizable facial structure, while the SVG rendering is handled directly through the D3 library. The code loads D3 v6 from a CDN and creates the shapes dynamically, with the simulation running continuously to maintain the layout.

Ppgraybeal
72% match