JiakunGong

@JiakunGong·4 public vizzes

Make a face in D3.js

A minimal D3.js example renders a static red SVG background as its only visual output. Using d3.select and the style method, the code applies the background color to the SVG element. The page loads D3 v5 from a CDN and relies on a bundled script (bundle.js) that contains the single selection and styling operation, with no additional chart, data, or interaction layers.

Jan 16, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and colored through different CSS and inline styling techniques. It shows how stroke, fill, and stroke-width properties apply variously via presentation attributes, group-level cascading styles, and a dedicated `.lines` class. The SVG is grouped and scaled using a `transform` attribute, while the stylesheet employs CSS selectors like `.lines path` to target specific elements. The rendering relies entirely on SVG and plain CSS, with no JavaScript libraries involved.

Jan 16, 2020

Loading thumbnail…

Untitled

This example demonstrates a force-directed graph layout rendered in real time. It uses the D3.js force simulation API (`d3.forceSimulation`) to position nodes and edges, with the React framework managing the interactive UI. The graph displays a dynamic network of interconnected nodes, where each node’s movement and collision behavior is computed via physics-based rules. The data source is synthetic, generated in-code to populate the initial node and link structure. The visualization updates continuously, showing the emergent clustering and separation of nodes as the simulation converges.

Jan 16, 2020

Loading thumbnail…

HTML Cars Report

This example renders a static HTML car report using plain markup and CSS, presenting three used vehicles with their model years and prices in a bulleted list. The page uses a linked stylesheet that applies a monospace font, increased font size, and red highlighting to the first list item via the `highlighted` class. It demonstrates a bare-bones approach to data display without JavaScript or external libraries, relying solely on HTML structure and CSS styling for visual emphasis.

Jan 16, 2020