Jeet Jain

@jeetjain420·6 public vizzes

Untitled

A force-directed layout uses a d3.geom.quadtree for collision detection among 200 circles of varying radii, with a fixed root node at the center. The root’s position follows the mouse via an SVG mousemove event, causing the simulation to resume and repel other nodes. Circles are rendered as SVG elements with colors from d3.scale.category10, and d3.layout.force manages gravity and charge between nodes.

Jul 5, 2020

Loading thumbnail…

Smoothed Daily Coronavirus Deaths Line Chart

Smoothed lines trace daily coronavirus deaths over time for the top 50 countries by cumulative deaths, with a logarithmic y-axis. Hovering activates a Voronoi overlay, built with `d3.Delaunay`, to highlight the nearest data point’s country line and display a tooltip with the exact date and death count. Lines are smoothed via repeated averaging in the `blur` helper, and the visualization renders as SVG using React, D3 v5 scales (`scaleTime`, `scaleLog`), and axes from `d3.axisBottom` and `d3.axisLeft`. Data comes from the Johns Hopkins CSSE GitHub repository.

Jul 4, 2020

Loading thumbnail…

Untitled

This example shows the co-occurrence network of characters in *Les Misérables*, with nodes representing characters and links representing their appearances together in the same chapter. The visualization uses D3’s force-directed simulation (`d3.forceSimulation`) with link, charge, and centering forces to position the graph, rendered on a Canvas element via the `getContext("2d")` API. Nodes are draggable through `d3.drag`, allowing interactive repositioning during the simulation. The network data is loaded from an external JSON file, and each tick redraws the links and nodes directly onto the canvas.

Jul 4, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn in an SVG canvas, then its eyebrows animate upward and back down in a repeating motion. The example demonstrates basic D3.js v5 DOM manipulation by using `d3.select`, `append`, `attr`, and chained `transition().duration()` calls to move the rectangular eyebrows. The face is constructed from circles for the eyes and an `arc()`-generated path for the mouth, positioned relative to the SVG center. All rendering uses SVG elements with D3 applying attributes directly, and the eyebrows’ movement is the only animated behavior shown.

Jul 4, 2020

Loading thumbnail…

Lets make a BAR CHART!

This bar chart displays population estimates for ten countries using horizontal bars, encoding each nation’s population as the bar’s width and ranking countries vertically. The visualization uses D3 v5’s `scaleLinear` and `scaleBand` to map data values to pixel dimensions, with `axisLeft` and `axisBottom` providing labeled axes. Data is loaded from a CSV file via `csv()` and rendered as SVG rectangles, with populations scaled by a factor of 10,000.

Jul 2, 2020

Loading thumbnail…

Untitled

This example creates a red background for an SVG canvas. The code uses the `d3.select` method from D3.js v5 to select the `svg` element and applies a background color of red using the `.style` method. It serves as a minimal starter template for integrating D3.js with React, as referenced in the README.

Jul 1, 2020