UNTAdityaAnanthula

@UNTAdityaAnanthula·7 public vizzes

Mexican_TopoJSON

This visualization displays a map of Mexico's states using a Mercator projection, with landmasses filled in teal and graticule lines in gray. It loads TopoJSON data from a GitHub gist, processes it through `topojson.feature`, and renders it with `d3.geoPath`. The React-based code uses `d3.geoMercator`, `d3.geoGraticule`, and SVG paths, pulling state boundaries from ArcGIS data refined with Mapshaper.

Jul 9, 2022

Loading thumbnail…

Social Network Graph_ICE8

A social network graph displays eight people as blue circular nodes connected by directed arrows, with edge thickness indicating relationship strength via the `value` attribute. The layout is computed using `d3.forceSimulation` with link, charge, collision, and center forces, while nodes are draggable via `d3.drag`. Hovering highlights a node by changing its stroke. Data is loaded from an external JSON file, and the SVG rendering uses D3 v6 selections, `scaleOrdinal` for color, and marker elements for arrowheads.

Jul 9, 2022

Loading thumbnail…

ICE8_Family Tree

A family tree visualization displays hierarchical relationships among named individuals, rendered as an interactive SVG diagram with animated expansion and collapse of branches. Built with D3.js v3 and jQuery, the code uses the `d3.layout.tree` algorithm to compute node positions from the JSON data, then draws rectangular nodes connected by labeled links with directional arrows. Node colors correspond to a `type` field (e.g., type1, type3), and the visualization supports zooming, dragging, and tooltips via D3 behaviors and custom CSS styling, with all tree data defined in the `data-example.json` structure.

Jul 9, 2022

Loading thumbnail…

ICE8-State_map

This example displays a blank map of India with state boundaries drawn as thin dark lines over a light gray sphere. It uses a React component that calls `d3.geoAlbers` and `d3.geoPath` to project and render TopoJSON data loaded from a remote URL via `d3.json` and processed with `topojson.feature` and `topojson.mesh`. The SVG output includes a filled landmass, state interior borders, and a graticule, with styling defined in CSS.

Jul 9, 2022

Loading thumbnail…

ICE9-World_Map

This visualization displays a world map using the Natural Earth projection, with countries rendered as semi-transparent yellow shapes with a subtle black outline. The ocean is filled with light blue to establish geographic context. The map is constructed using the D3.js library, specifically the `geoNaturalEarth1` projection and `geoPath` for generating the path geometries. The country boundaries originate from the world-atlas dataset loaded via JSON, and the geographic features are processed through TopoJSON's `feature` API before being drawn as SVG paths.

Jul 8, 2022

Loading thumbnail…

3D Scatter Plot Dataset

This example visualizes road measurement data as a 3D scatter plot, comparing road length, width, and ride dimensions across multiple points. The visualization uses Plotly’s `Plotly.newPlot` to render two traces: a 2D scatter plot of road length and width against ride length, and a 3D scatter plot of road length, width, and ride width. Data is loaded from a CSV file using D3.js (`d3.csv`), with each marker styled with size, opacity, and border colors. The layout removes all chart margins for a clean presentation.

Jul 6, 2022

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes cement sales for the first six months as a 3D bar chart, with each construction category represented by a series of colored bars. It uses the d3-3d plugin to project the bars into three dimensions, while the d3-x3d library renders the scene through X3DOM in the browser. The data is loaded from a CSV file via `d3.csv`, and the chart is generated using the `d3.x3d.chart.barChartMultiSeries()` component, with axes and scales provided by D3 v5. The visualization supports interactive rotation, allowing viewers to inspect the data from multiple angles.

Jul 6, 2022