8DancingElephants

@8DancingElephants·8 public vizzes

Fork of Force Directed Graph

This fork of a force-directed graph visualizes relationships between programming languages using a node-link diagram. The code uses `d3.forceSimulation` with forces for links, centering, charge, and X/Y positioning, and renders with SVG. Node size reflects link count, while link style (solid green vs. dashed black) and width distinguish connection weight values. Draggable nodes and curved paths are implemented via `d3.drag` and the tick function, with labels shown via SVG text elements.

Mar 9, 2021

Loading thumbnail…

Fork of Force Network

A force-directed network diagram visualizes relationships between films, actors, and directors from a JSON dataset. Nodes are color-coded by group and sized uniformly, while links represent connections such as "Acted in" or "Directed." The visualization uses D3 v6's `d3.forceSimulation` with link, charge, collision, and centering forces, rendered as SVG circles and lines. Interactive dragging updates node positions via `d3.drag`, with markers indicating link direction.

Mar 9, 2021

Loading thumbnail…

World Map to Ohio Map

This visualization renders a world map from TopoJSON country boundaries using D3’s `geoEqualEarth` projection and `geoPath`. The React component loads the world-atlas dataset via `useData` and draws each country as an SVG path with a teal stroke. Although titled “World Map to Ohio Map,” the code only displays the global map without zooming or transitioning to Ohio, despite the CSS styling paths thickly for emphasis. The visualization relies on `topojson.feature` to convert TopoJSON to GeoJSON for rendering.

Feb 16, 2021

Loading thumbnail…

Choropleth Map, COVID, Ohio

This choropleth map visualizes COVID-19 case counts across Ohio counties, using a yellow-to-red sequential color scale to encode the number of cases per county. The map renders SVG paths via `d3.geoPath` with a Natural Earth projection, drawing county boundaries from World Atlas TopoJSON and overlaying graticules and land features. React manages the component state, while D3 modules (`scaleSequential`, `schemeYlOrRd`, `csv`, `json`) load the data and compute the color mapping. The visualization shows case data from a CSV hosted on GitHub, with the color scale domains set dynamically based on the maximum case count.

Feb 15, 2021

Loading thumbnail…

Fork of HIV/AIDS Choropleth Map

A choropleth world map displays the share of the population infected with HIV/AIDS for the year 2017, shaded with d3.scaleSequential and interpolateYlOrRd. Missing countries appear gray. The visualization uses React with custom hooks to load and merge data from the IHME HIV prevalence CSV and ISO country codes, joining them by numeric codes. d3.geoNaturalEarth1 projection and d3.geoPath render the map, with graticules and interiors from d3.geoGraticule and topojson mesh.

Feb 15, 2021

Loading thumbnail…

Fork of Side-eye Smiley Part II

A cheerful yellow smiley face rendered as an SVG with a skeptical side-eye expression. Built with React and D3.js v6, the visualization uses multiple `<circle>` elements for the head and eyes, with a white highlight creating the side-eye effect, and a D3 `arc` path for the mouth. The static graphic is generated declaratively via React’s `ReactDOM.render`, with all shapes positioned relative to a center coordinate using D3’s `arc` API for the mouth’s annular sector.

Feb 15, 2021

Loading thumbnail…

Side-eye Smiley Part II

A smiley face rendered in yellow with black outlines looks askance through two offset eyes and a curved mouth. Built with React components and D3's `arc` generator, the SVG circles and path define the face’s features. The code uses static, hard-coded values for dimensions and positions, with D3 v6 handling the mouth’s arc calculation. The visualization is a playful, minimalist exercise in combining React’s declarative structure with D3 geometry.

Feb 15, 2021

Loading thumbnail…

Side-eye Smiley Part I

A yellow circle with a black outline contains two smaller circles, creating a simple smiley face whose eyes are shifted to one side. The composition uses the SVG `<circle>` element directly, with coordinates and radii set as attributes inside a static `index.html`. The rendering is fixed at 960 by 500 pixels, with the main face centered and the eyes placed asymmetrically to produce the "side-eye" effect. The example demonstrates basic vector shape drawing without external JavaScript libraries.

Feb 15, 2021