anjanipriyajillela@gmail.com

@Anjani16·7 public vizzes

Fork of Network

This interactive network visualizes family relationships from ancestors to descendants, using links to represent parent-child connections and node colors to indicate generation levels derived from hierarchy depth. The visualization loads data from a CSV file, processes it with d3.stratify to compute depths, and renders it as an SVG with d3.forceSimulation using forceLink, forceManyBody, forceCenter, and forceCollide. Nodes are draggable via d3.drag, and hover tooltips appear through D3 selection styling.

Apr 13, 2026

Loading thumbnail…

Fork of Tree

A multi-generation family tree loads from a GitHub Gist CSV and renders as a vertical dendrogram in SVG. D3’s `d3.stratify` builds the hierarchy from child–parent pairs, while `d3.tree` computes the layout. Each node is a circle color-coded by depth (generation), connected by curved `d3.linkVertical` paths. Hovering over a node shows a tooltip with the person’s name and parent via mouse events on the SVG groups.

Apr 13, 2026

Loading thumbnail…

Fork of ice 8

This choropleth map visualizes population comparisons of leading countries in millions, using a blue gradient scale from D3’s `scaleLinear` to encode values. It renders geographic boundaries from TopoJSON world-atlas data via `d3.geoPath` with a `geoNaturalEarth1` projection. Population metrics are loaded from a CSV dataset, and hovering over a country displays a tooltip with details. The code also maps inconsistent country names, adds a graticule, and includes a static legend.

Apr 12, 2026

Loading thumbnail…

Fork of Fork of HTML Starter

An area chart visualizes the increase in marks over ten days using a semi-transparent blue filled region, an overlaid line, and circular data points. Built with D3 v7, the visualization employs `d3.scaleLinear` for both axes, `d3.area` and `d3.line` to generate the paths, and `d3.axisBottom` and `d3.axisLeft` for labeled axes, with data embedded directly in the HTML.

Mar 29, 2026

Loading thumbnail…

Fork of HTML Starter

This horizontal bar chart compares sales volumes for eight BMW car models, including the M3, X1, i8, and 5 Series. Each model receives a distinct pastel-colored bar with its sales figure labeled at the bar’s end. The visualization uses D3.js v7 with an SVG rendering approach. Data is embedded directly in the script, and the chart applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numerical x-axis, with axes generated by `d3.axisLeft` and `d3.axisBottom`.

Mar 29, 2026

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This visualization compares the popularity trends of Python, JavaScript, and Java across 20 days using two side-by-side SVG charts. The top line chart maps each language's daily score with `d3.line` paths, while the bottom combined chart overlays Python bars (`d3.scaleBand`) with a JavaScript line (`d3.line`). Both include grid lines, axes, and legends built with D3 v7 APIs (`d3.select`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`). The synthetic dataset is embedded directly in the JavaScript code.

Mar 8, 2026

Loading thumbnail…

Fork of Fork of HTML Starter

This scatter plot shows the popularity scores of eight programming languages, distinguishing between high- and low-popularity categories with color-coded points. Using a point scale for the x-axis and a linear scale for the y-axis, it renders circles via D3 selections, with axes and rotated labels generated by `d3.axisBottom` and `d3.axisLeft`. Color mapping applies `d3.scaleOrdinal`, while a custom legend and SVG text labels annotate the chart against a dark themed background.

Mar 8, 2026