Skip to main content
Log in
S

Sg2041

@Sg2041·7 public vizzes

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This example shows a network of organizations connected by the Kenneth Rainin Foundation, with larger color-coded main nodes linked to smaller child nodes and leaf circles. The data is assembled in a JavaScript module that defines node sizes, colors, and link distances. The visualization uses d3.forceSimulation with forceManyBody and forceLink to position elements, rendering as SVG circles, lines, and text labels in an HTML page. Nodes can be dragged, which sets fixed positions and restarts the simulation.

Mar 16, 2023
Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes the network of connections within the Kenneth Rainin Foundation, using a force-directed layout with colored main nodes, child nodes, and leaf nodes. The visualization employs d3.forceSimulation, forceManyBody, forceLink, and forceCenter to position nodes and links dynamically, with drag interaction enabled. Data is generated programmatically in data.js with custom node sizes and distances, while colors come from a paletton.com-generated palette. The SVG rendering updates positions on each simulation tick, with text labels for main and child nodes.

Mar 16, 2023
Loading thumbnail…

Network graph

This example demonstrates a simple network graph consisting of three nodes (Alice, Bob, and Carol) connected by two directed links, forming a chain. It uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute node positions, and logs each simulation tick to the console. The visualization renders as an SVG-less HTML page with no explicit drawing code, relying solely on the simulation’s output for node and link coordinates. The data is hardcoded as JavaScript arrays of node objects and link indices.

Mar 16, 2023
Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message using CSS for styling. The page is a bare minimum HTML document that demonstrates how to combine hypertext markup with cascading style sheets and JavaScript. The implementation relies on standard HTML elements and CSS properties, such as the `font-size` and `text-align` rules applied to the `.message` class. No external libraries or data sources are used; it serves as a foundational template for building more complex visualizations in a browser environment.

Mar 16, 2023
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map with interactive pan and zoom capabilities, using a natural Earth projection rendered as SVG paths. The map displays country boundaries with light green fill, which turns red on hover, and includes tooltips showing country names from the world-atlas TSV data. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom to handle the projection and view transforms, while d3.json and d3.tsv load the TopoJSON geometry and name mappings. The sphere background is styled blue, and the map supports fluid zooming through the d3.zoom event handler.

Mar 16, 2023
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map with interactive pan and zoom capabilities, using a natural Earth projection rendered as SVG paths. The map displays country boundaries with light green fill, which turns red on hover, and includes tooltips showing country names from the world-atlas TSV data. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom to handle the projection and view transforms, while d3.json and d3.tsv load the TopoJSON geometry and name mappings. The sphere background is styled blue, and the map supports fluid zooming through the d3.zoom event handler.

Mar 16, 2023
Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country With Voronoi Overlay

This chart displays cumulative COVID-19 deaths over time for each country as thin gray lines on a logarithmic y-axis, using data from the Johns Hopkins Coronavirus Dataset. A Voronoi overlay, computed with `d3.Delaunay` from the d3-delaunay library, renders red cells over three hardcoded points, providing a potential interaction region for hover events. The React-based visualization employs `d3.scaleLog`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the SVG, with axis tick marks drawn as grid lines.

Mar 16, 2023