Subodh Singh

@subodh-singh·4 public vizzes

Map Data

A world map rendered with a natural Earth projection displays global city populations as scaled golden circles, with landmasses in dark tones and graticules overlaid. The visualization uses React with D3 v5, including `d3.geoNaturalEarth1` and `d3.geoPath` to draw the map from TopoJSON world-atlas data, while city coordinates and population sizes come from a CSV loaded via `d3.csv` and mapped through `scaleSqrt`. The SVG output layers spheres, land, country borders, graticules, and city circles, with opacity creating a subtle glow effect.

Mar 16, 2022

Loading thumbnail…

Learning D3

This example presents a circular astrological chart with twelve labeled house sectors, each containing planetary symbols. Concentric circles divide the chart into inner and outer zones, with radial lines connecting sector positions. The visualization uses D3 v5 selections to create SVG circles, lines, and text elements. It computes positions using trigonometric functions and displays ordinal house numbers alongside planetary glyphs, with astronomical data hardcoded as an array of abbreviations.

Feb 5, 2020

Loading thumbnail…

Learning D3

A D3.js visualization displays a zodiac chart on an SVG canvas, with astrological symbols placed in twelve house positions. The chart uses D3 selections to draw a grey arena background, diagonal and partial lines, and text elements mapped to house offsets. Planet symbols like Mercury and Venus appear blue, and hovering over them triggers a tooltip with opacity transitions. The code employs d3.select, append, attr, and event handlers for interactivity, though the data is hardcoded rather than loaded externally.

Feb 4, 2020

Loading thumbnail…

feat1_dropdown

A bar chart displays the percentage of height and weight measurements for eight blocks in Palghar, India, with bars colored on a red-yellow-green scale. A dropdown menu lets users switch between the two measurement types, though the change handler currently only logs the selection. The visualization uses D3 v5 with scaleSequential and interpolateRdYlGn for color encoding, scaleBand for x-axis positioning, and scaleLinear for the y-axis. Data is loaded from a CSV file, and results are rendered as SVG.

Feb 2, 2020