Shivansh Mathur

@shivanshcoder·4 public vizzes

D3 Tutorial

This example demonstrates a tree visualization using the Flare dataset, displayed as a circular layout with labeled nodes and hierarchical branches rendered in SVG. The code uses D3 v5’s `d3.hierarchy` and `d3.tree` to compute node positions, then draws links and circles with `d3.select` and SVG elements. The hierarchical structure shows parent-child relationships across categories like analytics, animate, and physics, with each leaf node’s value represented by its visual placement. The visualization is contained within a fixed 960x500 viewport.

Mar 10, 2020

Loading thumbnail…

D3 Tutorial

This example is a D3 Tutorial showing a smiling face built from basic SVG shapes, with animated eyebrows that move up and down. It uses D3 v5 selection methods like `append`, `attr`, and `transition` and `duration` for the eyebrow animation, while drawing a mouth with `d3.arc`. Data from `data.csv` is not displayed; instead, the visualization relies on hardcoded coordinates within a React framework, rendering through an SVG container.

Mar 10, 2020

Loading thumbnail…

D3 Tutorial

This example demonstrates a D3.js network graph visualizing a force-directed layout of research papers, with nodes sized by their citing patents count. The chart uses the `d3.forceSimulation` API to position nodes and render them as SVG circles on a 960x500 canvas, with forces for charge and centering. Data is loaded asynchronously from a static JSON file using `d3.json`. The visualization highlights the strongest-cited works through larger radii, making publication impact immediately apparent.

Feb 22, 2020

Loading thumbnail…

D3 Tutorial

This example shows a bar chart of country populations using a vertical band scale for categories and a linear scale for values. The code loads data from a CSV file, parses the population numbers, and renders SVG rectangles with steelblue fills. It uses d3.csv, d3.scaleBand, d3.scaleLinear, and d3.axisBottom/axisLeft, with margins and an inner group transform to position the axes. The y-axis tick lines and domain are removed for a cleaner look.

Feb 22, 2020