Lo-ov

@Lo-ov·6 public vizzes

Lets Make a Face with D3.js

A smiling face composed of SVG shapes is drawn and then animated with D3.js. The face uses yellow circles for the head and eyes, and rectangular eyebrows that shift upward in sequence before returning. The mouth is an arc that transforms from an open smile into a closed line. The code accesses the SVG element with `d3.select` and uses `transition` with `duration` and `delay` to choreograph the animations.

May 9, 2020

Loading thumbnail…

Sequences sunburst

This interactive sunburst chart visualizes hierarchical sequences of page visits, using a radial partition layout where each arc represents a path segment and its size reflects visit counts. Hovering over an arc highlights the entire ancestor chain in the breadcrumb trail above and displays the percentage of visits for that sequence. Built with D3 v4, it uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the layout, with colors assigned via `d3.scaleOrdinal` and `d3.schemeTableau10`. Data comes from CSV files parsed with `d3.csvParseRows`.

May 9, 2020

Loading thumbnail…

Force-Graph

This interactive force-directed graph visualizes the network of game assets, with nodes representing individual files and links showing connections between them. The visualization uses a physics simulation to position nodes, balancing link forces, many-body repulsion, and centering forces. Built with d3.forceSimulation, d3.forceLink, and d3.forceManyBody, the SVG rendering updates each tick to reflect the evolving layout. Users can drag nodes, which temporarily reactivates the simulation to reposition the graph, with node colors assigned via a categorical color scheme.

Apr 27, 2020

Loading thumbnail…

Sequences sunburst

This sunburst chart visualizes hierarchical page-sequencing data from a CSV file, showing the proportion of visits that begin with each sequence of pages. The visualization uses a radial partition layout, with arcs representing nodes and an interactive breadcrumb trail displaying the current path. Built with D3 v4, it utilizes `d3.partition`, `d3.arc`, and `d3.hierarchy` to structure data, while `d3.scaleOrdinal` and `d3.schemeTableau10` assign colors to segments. Hovering over a segment highlights its ancestors in the sequence, and the central explanation shows the percentage of visits associated with that path.

Apr 23, 2020

Loading thumbnail…

Untitled

This example displays the text “hello” on a bare HTML page, serving as a minimal starter template. It loads the D3.js library version 5 from a CDN via a script tag and renders static content directly in the browser. The code does not include any data visualization or interactive logic; it simply demonstrates the basic setup for a React-based visualization project, as referenced in the accompanying README link. The rendering relies entirely on standard HTML parsing and D3’s inclusion, with no additional APIs or data sources invoked.

Apr 21, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the minimal structure of an HTML page, rendering two levels of heading text ("hello" in both an h1 and an h2 tag). It shows the fundamental building blocks of web content, with no external styling or scripts. The code is a plain HTML document with a DOCTYPE declaration, a head section containing the title, and a body housing the headings. It serves as a starting point for understanding how browsers parse and display basic markup, and can be used as a base for more complex visualizations.

Apr 20, 2020