Skip to main content
Log in
A

arg04

@arg04·10 public vizzes

Loading thumbnail…

Nodes Proove

This example uses a force-directed graph to visualize a hierarchical JSON dataset of software tool categories, such as Monitoring, APM, and Cloud services, as nodes connected by parent-child links. The visualization builds a node-link diagram with circles and lines in an SVG container, applying `d3.forceSimulation` with link, charge, and position forces to arrange the nodes dynamically. The code loads the data from `allTools.json` using D3’s `json` method and renders the result with `d3.hierarchy` and `d3.forceLink`.

Jul 6, 2020
Loading thumbnail…

Untitled

This interactive network visualization uses D3 v4's force-directed simulation to display the structure of Softtek's DevOps toolchain. The graph, loaded from `miserables.json`, depicts hierarchical relationships between technologies and practices, from monitoring tools like Nagios and Prometheus to cloud services and configuration management systems. Nodes are rendered as small circles on a Canvas element, with links drawn as gray lines. Users can drag individual nodes to explore the network, which responds dynamically through the `d3.forceSimulation` API. The `d3.drag` function enables node repositioning, restarting the simulation to maintain layout stability.

Jul 6, 2020
Loading thumbnail…

Create a Bar Chart

This example shows a horizontal bar chart ranking nine countries by population, using a bar’s length to encode each value. The chart is rendered as SVG via D3 v5, with `d3.csv` loading the data and `scaleLinear` and `scaleBand` mapping population and country names to pixel positions. Bars are appended as `rect` elements, and each population value is multiplied by 1000 to reflect actual figures. The code imports only the needed D3 functions, keeping the bundle minimal.

Jul 5, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a simple face whose eyes, eyebrows, and mouth are built from SVG shapes. The eyebrows, drawn as rectangles, animate upward and back down using chained D3 transitions over two seconds each. The mouth is a path generated with the d3.arc helper, while the face’s construction relies on D3 selections, attribute setting, and SVG groups for positioning. CSS hides page margins and overflow.

Jul 4, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

A yellow circle with black outlines forms a simple face whose eyes, eyebrows, and mouth are built from SVG shapes. The eyebrows, drawn as rectangles, animate upward and back down using chained D3 transitions over two seconds each. The mouth is a path generated with the d3.arc helper, while the face’s construction relies on D3 selections, attribute setting, and SVG groups for positioning. CSS hides page margins and overflow.

Jul 4, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example builds a yellow smiley face with D3.js, featuring eyes, eyebrows, and a mouth rendered as SVG shapes. The code uses D3 selections to append a circle for the face, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. A chained `transition` with a 2-second duration animates the eyebrow group’s vertical position upward and then back, creating a moving-brow effect. The face is centered within a 960×500 SVG, and the animation runs once on page load.

Jul 2, 2020
Loading thumbnail…

Make a Face With D3JS

This example shows how to construct a simple face using SVG shapes within a 960-by-500 pixel canvas. The illustration is built entirely through D3.js v5 selections, using the `select` method to target the SVG element and appending paths and lines with distinct stroke styling. The CSS defines a `.lines` class that applies thick, rounded strokes in a teal color, while the JavaScript file remains minimal, suggesting the face’s features are drawn via the stylesheet definitions. The code relies on basic D3 selection and SVG geometry rather than data-driven binding, demonstrating a lightweight approach to static vector art.

Jul 2, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple, static inventory report of three cars with prices, where the first item is highlighted in blue. It uses plain HTML and CSS, with a monospace font and large text size, to render the list directly in the browser. The styling applies a class selector to emphasize one row, demonstrating basic SVG-adjacent styling practices within an HTML document rather than using any JavaScript or data-visualization libraries.

Jul 2, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple, static inventory report of three cars with prices, where the first item is highlighted in blue. It uses plain HTML and CSS, with a monospace font and large text size, to render the list directly in the browser. The styling applies a class selector to emphasize one row, demonstrating basic SVG-adjacent styling practices within an HTML document rather than using any JavaScript or data-visualization libraries.

Jul 1, 2020
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using both inline attributes and an external CSS stylesheet. The first two shapes use default black fills, while later shapes apply explicit fills like red and a green hex code, and a group-level fill with a black stroke. CSS class `.lines` sets stroke color and width, with a nested rule for path line joins. The rendering uses raw SVG in an HTML file, with a scale transform and translated groups.

Jul 1, 2020