herbertamakloe

@herbertamakloe·4 public vizzes

Fork of Network Visualization

This network visualization displays the character relationships from Les Misérables, with nodes colored by group type and a legend mapping categories like Document, Email, and Person. It uses d3.forceSimulation with link, charge, and center forces to position the nodes, while links are rendered as lines whose stroke width reflects edge weight. The SVG is built using d3.v5, with nodes and links appended as circles and lines, and a custom colorLegend function creates the legend using d3.scaleOrdinal with the schemeCategory10 palette.

May 8, 2021

Loading thumbnail…

Fork of Network Practice

This example shows a force-directed network of 13 nodes connected by 17 links, with nodes colored by group using a categorical scale and link thickness varying with edge weight. The visualization loads node and link data from a JSON file and renders it as SVG circles and lines. It uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute the layout, updating node positions and link endpoints on each tick.

Apr 8, 2021

Loading thumbnail…

Fork of Canvas Force Tutorial

This example shows a force-directed network graph built from a CSV file of names and connection weights, rendered as circles and lines on an HTML5 Canvas. It uses d3.forceSimulation with forceX, forceY, forceCollide, forceManyBody, and forceLink to position the nodes, updating the canvas on each simulation tick via the `ctx` drawing context. The visualization reads data.csv asynchronously with d3.csv, constructs the node and link arrays, and then starts the simulation, with node radius fixed at 7 pixels.

Apr 8, 2021

Loading thumbnail…

Let's make a face with d3

A yellow circle with two black eyes and a curved mouth forms a simple cartoon face, centered within an SVG viewport. The code uses D3 selections and the `append` method to create the face's elements, positioning them with translated group attributes. The mouth is generated using the D3 `arc` generator with specified inner and outer radii and angular extents. Dimensions for the face and eye spacing are derived directly from the SVG element's attributes.

Apr 7, 2021