Dlanka

@Dlanka·7 public vizzes

fresh block

The visualization shows a single dark path drawn as a thin, curved line with a sharp angle, rendered on a plain white background. The path begins near the upper left, drops vertically, then curves gently before angling downward and extending off the lower edge of the frame. The code uses D3 v4 to append an SVG `path` element to the body, setting its stroke to black and fill to transparent. The path’s shape is defined by a cubic Bézier curve command (`C`) and a smooth curve (`S`), with explicit coordinates supplied in the `d` attribute, creating a simple, abstract linear composition.

Apr 6, 2018

Loading thumbnail…

org chart

This org chart visualizes a small hierarchical team structure using D3.js v4. It shows a collapsible tree where clicking a node toggles its children in and out of view, with smooth transitions on expand and collapse. The chart renders nodes as rectangles connected by vertical curved links, using `d3.tree()` with custom node spacing and `d3.linkVertical()` for the paths. The data originates from a hardcoded JavaScript object representing staff relationships. A zoom transform is applied via `d3.zoom()`, allowing pan and scale gestures on the SVG container.

Mar 28, 2018

Loading thumbnail…

Bar Chart v4

This example visualizes a categorical bar chart of Sri Lankan city names and their corresponding counts, loaded from a local JSON file. The chart shows only the x-axis with city labels, while the y-axis and bars are not rendered in the provided code. Built with D3 v4, it creates an SVG container sized 400 by 500 pixels, using a `d3.scaleBand` for the x-axis and `d3.axisBottom` to display the category ticks. The data is fetched asynchronously via `d3.json`, and the axis is positioned using margin-based translation, though the visualization remains incomplete.

Jan 31, 2018

Loading thumbnail…

Bar Chart v4

This is a minimal bar chart example built with D3.js v4, rendered as an SVG. It creates an empty SVG canvas with fixed dimensions of 960 by 500 pixels, appended directly to the body. The code does not include any data or bar-rendering logic; it only sets up the SVG container. The example serves as a starting point for building a bar chart, using D3’s selection and append methods to initialize the visualization structure.

Jan 31, 2018

Loading thumbnail…

Bar Chart v4

This example displays a minimal bar chart created with D3.js v4, rendering a single empty SVG container. The visualization demonstrates the foundational setup for a D3 project, using `d3.select` to append an SVG element with fixed width and height dimensions. The code initializes the drawing surface but does not bind or visualize any data, leaving the chart blank. The example relies on the D3 library loaded from the official CDN and follows a standard Blockbuilder.org template structure, with the SVG rendered directly in the browser. It serves as a starting point for understanding D3’s SVG manipulation capabilities without additional scales, axes, or data transformations.

Jan 31, 2018

Loading thumbnail…

Bar Chart

This example demonstrates a minimal bar chart implementation, showing how a static SVG canvas can be initialized and labeled. The visualization consists of a single text element positioned within an SVG container, serving as a placeholder rather than displaying actual data. The code uses D3.js v4 to select the body element, append an SVG with fixed dimensions of 960 by 500 pixels, and add a styled text label. The rendering approach relies on D3's selection and DOM manipulation methods, with the text element styled using monospace font and centered positioning. The data source is not specified, as the example focuses on basic SVG setup rather than data-driven visualization.

Jan 31, 2018

Loading thumbnail…

Advance Chart

This chart displays the distribution of counts across six Sri Lankan cities, with each city represented on the x-axis and its corresponding count on the y-axis. It uses a simple bar-less axis-only layout, showing only the scales and ticks without plotted bars or marks. Built with D3.js v4, the code loads data from a local JSON file, defines linear and ordinal scales, and renders axes via `d3.axisLeft` and `d3.axisBottom` appended to an SVG container. The visualization focuses on axis construction and data binding, leaving the actual data representation absent.

Jan 31, 2018