Skip to main content
Log in
J

JasonXu1244

@JasonXu1244·8 public vizzes

Loading thumbnail…

Untitled

This example shows a force-directed network graph of music labels and entertainment companies, with nodes labeled by the Korean and English names of each organization. The visualization loads node and link data from an external JSON file, renders the network as circles and connecting lines using the SVG framework, and assigns node colors by group. The graph is built using the d3.v4.js library, using its `forceSimulation`, `forceLink`, `forceManyBody`, and `center` force APIs to layout the network, with node dragging enabled through the `drag` interaction component.

Sep 25, 2020
Loading thumbnail…

Let's make face with D3

This example draws a simple cartoon face using D3.js v6, rendered as SVG elements with a short animation. It shows a yellow circle as the head, two black circles for eyes, and an arc-based mouth that transitions from a filled semicircle to a hollow crescent shape over two seconds. The code uses D3 selections, the `arc` generator for the mouth path, and a chained `transition().duration()` to animate the shape change. The face is centered within a 960×500 SVG canvas, with hardcoded positions for facial features.

Sep 23, 2020
Loading thumbnail…

Let's make face with D3

This example draws a simple cartoon face using D3.js v6, rendered as SVG elements with a short animation. It shows a yellow circle as the head, two black circles for eyes, and an arc-based mouth that transitions from a filled semicircle to a hollow crescent shape over two seconds. The code uses D3 selections, the `arc` generator for the mouth path, and a chained `transition().duration()` to animate the shape change. The face is centered within a 960×500 SVG canvas, with hardcoded positions for facial features.

Sep 23, 2020
Loading thumbnail…

SVG

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a scaled and translated coordinate system. The code uses raw SVG elements within an HTML document, applying CSS classes to style the line and path elements with black and green strokes. A white-filled group with black outlines is layered over earlier shapes to show overlap and composition. The visualization shows how SVG coordinates and grouping transforms can be combined to build simple geometric compositions without any external JavaScript libraries.

Sep 22, 2020
Loading thumbnail…

SVG

This example demonstrates a minimal HTML page that integrates a Scalable Vector Graphics title with basic text content. The page displays a large monospace headline and a bulleted list item, styled entirely through an external CSS file. The implementation uses plain HTML and CSS, with the body’s font-size and font-family set via the linked stylesheet. No JavaScript libraries or data processing are involved; the visualization renders static text and list elements only.

Sep 22, 2020
Loading thumbnail…

HTML cars report

This example presents a minimal HTML cars report, displaying a static page with a heading and a list item. The page is built with plain HTML and CSS, using a monospace font and large text size for readability. The data source is not specified, and the rendering approach relies solely on basic document structure rather than any visualization library. No charts, graphs, or dynamic interactions are present, making it a purely structural demonstration.

Sep 22, 2020
Loading thumbnail…

HTML

This example displays a blank HTML page, demonstrating the foundational structure of a web document. The code sets up an HTML5 document with a title element and an empty body, where no data or visualizations are rendered. It uses no external libraries or APIs, relying solely on standard HTML markup. The visualization serves as a minimal, static starting point, showing the bare-bones skeleton upon which more complex data-driven graphics could be built. Its primary function is to present the basic container and metadata, without any interactive or graphical content.

Sep 22, 2020
Loading thumbnail…

Untitled

This visualization displays a chord diagram representing bilateral relationships between countries, with the thickness of each chord indicating the strength of the connection. It uses d3.forceSimulation to position nodes and d3.ribbon to draw the connecting arcs, with all elements rendered as SVG. The graph supports interactive highlighting, where hovering over a group or value emphasizes the corresponding connections. Data is loaded from a hardcoded array in the source, and the visualization is built using d3.v4 and React.

Sep 22, 2020