SNarasimhar

@SNarasimhar·5 public vizzes

Untitled

This example displays a map of France, rendered in yellow on a pink background using a Mercator projection centered on the country. The visualization loads GeoJSON data from an external URL, filters the dataset to select only the feature named "France", and draws it as an SVG path using `d3.geoPath` with a `d3.geoMercator` projection. The code relies on D3 v4's `d3.json` method to fetch the geographic data and applies a custom scale and translation to position the map within the 540x400 pixel canvas.

Jul 9, 2022

Loading thumbnail…

Fork of ICE - 8 Making Maps (Country Map) Maanas Katta

This example displays a single country, France, rendered as a light green SVG path against a blue background, isolated from the rest of the world. It loads world country boundaries from the World Atlas TopoJSON dataset and uses `d3.geoMercator()` with a scale of 780 to project the geographic coordinates. The code filters the fetched features to select only France, then applies `d3.geoPath` with the Mercator projection to generate the path data, appending it to the SVG canvas.

Jul 9, 2022

Loading thumbnail…

Network graph

A network graph visualizes connections between named entities, such as "Oathkeeper," "Herokiller," and "johnnyDeep," with nodes colored by group and links weighted by line thickness. The graph uses D3.js v4 with a force-directed layout, implemented via the `d3.layout.force` API, which applies gravity, charge, and distance parameters to position nodes. Data is loaded from a local JSON file, and the SVG rendering updates node coordinates and link endpoints on each simulation tick. The interface includes a pink background and drag interaction for repositioning nodes.

Jul 9, 2022

Loading thumbnail…

Tree

This example shows a hierarchical tree diagram of a royal family lineage, with a central "King" node branching to four sons, each of whom further connects to two grandsons. The tree is rendered as an SVG using D3.js v6. The visualization uses an animated transition to draw the connecting links from each parent to its children over one second, while nodes appear as red circles with white text labels. The code leverages D3’s `stratify()` to structure the parent-child data and `tree()` layout to compute node positions.

Jul 8, 2022

Loading thumbnail…

1

A choropleth map of Bangladesh visualizes district-level poverty rates, with a red-to-white color scale indicating the proportion of "poor" residents in each area. Hovering over a district reveals a tooltip with the district name, ID, and both extreme and poor poverty percentages. The visualization uses D3.js v5 with topojson to parse geographic boundaries and a Mercator projection via `d3.geoMercator` and `d3.geoPath`. Pan and zoom interactions are enabled through `d3.zoom`, while map shapes are rendered as SVG paths. Poverty data comes from a JSON file linked to district names.

Jul 8, 2022