Mokshithabhi

@Mokshithabhi·7 public vizzes

trial

A force-directed network diagram visualizes connections between e-commerce entities such as brands, products, cart, and cart items. Five nodes, each labeled with its name, are arranged using d3.forceSimulation with forceManyBody and forceCenter. Curved links between nodes are rendered as SVG paths using a custom linkArc function, with markers indicating link types. Static data is imported from a data.js module, and node positions update on each simulation tick.

May 26, 2023

Loading thumbnail…

Untitled

A force-directed network diagram shows six interconnected nodes (brands, products, cart, cart_items) with directed, curved links. The code uses `d3.layout.force()` from D3 v3 to simulate the physics, `d3.select` for DOM manipulation, and SVG markers for arrowheads on the three link types (licensing, suit, resolved). Node labels display both an ID and name, and circles are draggable via `force.drag`. The graph analyzes e-commerce relationships among entities.

May 12, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

A scatter plot visualization displays the classic Iris Dataset, with points rendered as randomly colored and sized hexagons. The example demonstrates a reusable D3 v6 approach where SVG polygons are bound to data via `selectAll` and `enter`, generating hexagon shapes with randomized sizes and colors from predefined ranges. The code shows how array methods like `map` and `join` construct the polygon points, while `Math.random` drives the dynamic style and dimension updates applied through D3 selections. The implementation runs in a vanilla HTML page using a local `d3` dependency.

May 12, 2023

Loading thumbnail…

Fork of D3 Starter

This example shows a single red hexagon drawn in the center of a small 100x100 SVG canvas. The shape is constructed from six coordinate points calculated with a constant size and offset. The code uses D3 v7 to select the body, append the SVG container, and bind the point array as data. A path element is created and its `d` attribute is set using `d3.svg.line()`, which is a legacy API from D3 v3 and not a current method.

May 11, 2023

Loading thumbnail…

Fork of Fork of Reusable scatter plot with different symbols

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each species is represented by a distinct symbol from the d3.symbols collection, with the symbol type determined by a d3.scaleOrdinal. The code uses d3.scaleLinear for axes, d3.axisLeft and d3.axisBottom for ticks, and d3.csv to load the data. Rendering is done via SVG paths, with the chart configured through a custom reusable function pattern.

May 11, 2023

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example displays the Iris dataset as a scatter plot of petal width against sepal length, with each species represented by a distinct D3 symbol. The visualization uses d3.scaleLinear for positional encoding, d3.scaleOrdinal to map species to symbol types, and d3.symbol to generate the icon shapes. Axes are rendered with d3.axisLeft and d3.axisBottom. The reusable chart component accepts configurable accessor functions and margin parameters, and the data is loaded asynchronously from a GitHub Gist via d3.csv.

May 11, 2023

Loading thumbnail…

Untitled

Three circles of different sizes and colors are rendered in an SVG, each labeled with its corresponding node name and filled with a diagonal stripe pattern. The visualization uses D3 version 3 to bind data from a JSON array containing node positions, radii, labels, and colors. The code appends a pattern definition to the SVG defs and creates two overlapping circles per node: a solid color base and a striped overlay, with text positioned relative to each circle’s radius.

Mar 1, 2023