Skip to main content
Log in
M

Maninder Singh

@co18332·11 public vizzes

Loading thumbnail…

Moving Circles

Moving Circles is an interactive visualization that generates expanding ring particles that follow the cursor across a dark background. As the mouse moves, the code inserts new circle elements at the pointer position, each with a unique hue from an incrementing HSL color value. The circles then animate outward over two seconds using a square-root easing function, growing from a tiny radius to 100 pixels while fading their stroke opacity to zero before being removed. The example is built with D3 v3, using SVG transitions, mouse event handling, and d3.hsl for color generation.

May 5, 2020
Loading thumbnail…

Multicolored Clock

The Multicolored Clock visualizes time as a nested set of seven animated arc segments, each representing seconds, minutes, hours, day, date, month, and a static credit ring. The arcs smoothly transition every second using elastic easing, with colors interpolating across an HSL spectrum based on each unit’s current value via a linear scale. Built with D3 v3, it uses `d3.svg.arc`, `attrTween` for value interpolation, and `textPath` to label each ring. Data is generated live from the JavaScript `Date` object, rendered as SVG with continuous animation.

May 5, 2020
Loading thumbnail…

Magnifying Effect

This visualization demonstrates a magnifying effect on a grid of lines using a fisheye distortion. The display initially shows a uniform grid of vertical and horizontal paths rendered as SVG. When the mouse moves over the canvas, the code updates the fisheye’s center point and recomputes each path’s coordinates by mapping the original points through the `d3.fisheye` function. The distortion magnifies the area around the cursor, bending the lines outward while preserving the overall structure. The example uses D3 v3 with SVG rendering and custom mouse-event handlers to drive the interactive effect.

May 5, 2020
Loading thumbnail…

Radial Tree of Countries Hierarchy

This radial tree shows the hierarchical structure of countries grouped by continent and subregion, with the root node "World" at the center. It renders a clustered dendrogram using D3 v4’s `d3.cluster` layout, drawing curved SVG paths for links and text labels for each node. The visualization supports zooming and panning via `d3.zoom`, and adjusts label size and rotation based on depth and angle. Data is loaded from a JSON file representing the geographic hierarchy.

May 5, 2020
Loading thumbnail…

Animating the face with D3.js

A face shape is drawn as a cyan path with a distinctive "e" cutout, rendered in an SVG viewBox. The example demonstrates how to construct and animate a custom path using D3.js version 5 within a React framework. The code uses `select` to target the SVG element and appends the path with a predefined `d` attribute string, showing static vector rendering rather than interactive animation. The HTML page loads D3 from a CDN and applies styles to remove margins and hide overflow.

May 5, 2020
Loading thumbnail…

Scatter Plot with Menus

An interactive scatter plot displays correlations between numeric attributes from a car dataset (e.g., horsepower, weight, mpg). Dropdown menus, built with d3.js, let viewers select which columns appear on each axis, updating the visualization. The SVG circles animate into position using D3 transitions, with axes labeled and gridlines rendered via `axisBottom` and `axisLeft`.

May 4, 2020
Loading thumbnail…

Animated Dataflow of World Countries Tree

This visualization shows a hierarchical dataflow tree of world countries, organized by continent and subregion, with country names displayed at the leaf nodes. Animated orange dashed paths flow along the links between parent and child nodes, creating a sense of data movement through the hierarchy. The code uses D3 v5’s `cluster` layout, `hierarchy`, and `linkHorizontal` to position and draw the tree, with CSS `stroke-dashoffset` animations driving the flow effect. The SVG canvas supports zooming via D3’s `zoom` event, and JSON data defines the geographic structure.

May 4, 2020
Loading thumbnail…

Top 10 Most Populous Sectors of Chandigarh

This bar chart ranks the ten most populous sectors of Chandigarh, with Mauli Jagran and Ram Darbar tied at the top. It uses a horizontal layout with population on the x-axis and sector names on the y-axis. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render SVG elements. Population values are loaded from a CSV file and formatted in thousands, while axis ticks and labels are styled via an external stylesheet.

May 3, 2020
Loading thumbnail…

Top 10 Most Populous Sectors of Chandigarh Scatter Plot Graph

This scatter plot shows the population distribution of Chandigarh’s ten most populous sectors, with each circle positioned along a linear population scale and a point scale for sectors. The chart uses D3 v5’s `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render the SVG, with data loaded from a CSV file via `d3.csv` and scaled by 1,000. Circle size is fixed, emphasizing sector ranking by population, and the axes include gridlines and a formatted tick label using `d3.format`.

May 3, 2020
Loading thumbnail…

Making a Bar Chart

A horizontal bar chart displays population estimates for ten countries, sorted from China to Mexico, using a blue SVG bar for each nation. The visualization loads data from a CSV file, converts population values to numeric form, and renders bars with D3 v5's `select`, `csv`, `scaleLinear`, and `scaleBand`. The chart includes `axisLeft` and `axisBottom` for labeled scales, with margins positioning the plot area. Bar lengths are proportional to population via the linear scale, while band padding creates spacing between rows.

May 3, 2020
Loading thumbnail…

Making a bar Chart

This SVG bar chart displays the relationship between two variables from the file data.csv, with bar heights proportional to the data values. The visualization is built using D3 version 5, where a single SVG element of 960 by 500 pixels is selected via the d3.select method, and its dimensions are parsed with parseFloat and the unary plus operator. The data is loaded asynchronously using the d3.csv function, and the chart is rendered in an HTML page that links to the D3 library from a CDN.

May 2, 2020