solarmic2015

@solarmic2015·4 public vizzes

Fork of Let's make a face with D3.js

This example builds a simple smiling face using D3.js v5 within a React-free HTML page, rendering to SVG. The face is composed of a yellow circle, two eyes, eyebrows, and a mouth drawn with `d3.arc()`. The eyebrows animate up and down using chained `transition().duration()` calls, shifting their group’s `transform` attribute. Static positioning relies on absolute pixel values from the SVG’s width and height, and all shapes are appended to a central `<g>` element.

Jun 29, 2022

Loading thumbnail…

OLABANJO TEST

This example shows a force-directed network graph with linked nodes representing people in different roles—contractors, employees, and managers—distinguished by color through a D3 ordinal scale. The visualization uses `d3.forceSimulation` with `forceManyBody`, `forceCenter`, and `forceLink` to position nodes and edges, which are drawn as SVG lines with opacity and stroke width based on edge weight. Node labels are placed below each circle using SVG text elements. The layout animates via the simulation’s tick event, updating node transforms and link coordinates. The code relies on React, D3 v7, and renders to an SVG canvas.

Jun 29, 2022

Loading thumbnail…

Fork of Let's make a face with D3.js

This example displays a hardcoded JSON array of four car objects with model, price, and color fields, parsed by `JSON.parse` and exported from a separate module. The main script imports the data and writes the static string "Hello World" into a `<pre>` element using the DOM API. Built with D3 v5 and React, the visualization primarily demonstrates data setup and basic DOM manipulation, though the included face-drawing capabilities are not actively invoked in the current code.

Jun 28, 2022

Loading thumbnail…

My JS Test

This example shows a single large message, "Hello HTML!", centered on a plain page. It demonstrates a minimal setup for combining HTML, CSS, and JavaScript without any external libraries, relying solely on standard web technologies. The code defines a styled `<div>` element with a massive font size and applies text alignment through a CSS class. It serves as a barebones starter for understanding how separate markup and styling files interact.

Jun 28, 2022