Akash

@akashma19·6 public vizzes

Fork of ICE - 8 Family Tree Maanas Katta

A black-background family tree visualizes a branching hierarchy of ten characters using animated SVG circles and lime-green connecting paths. The code applies D3 v6’s `d3.stratify()` to transform a flat parent-child dataset into a tree structure, then uses `d3.tree()` to compute node coordinates. Links animate via `transition().duration(1000)` on path `d` attributes, while descendant nodes fade in with `transition().duration(800)` on radius. Node labels appear as bold black text, with data defined inline in the script.

Apr 22, 2022

Loading thumbnail…

customizing axis

This example shows a horizontal bar chart of population by country, with a customized x-axis that reformats large numeric values from scientific notation to abbreviated text (e.g., "1.44B" instead of "1.44G"). Using D3 v7, it loads data from a CSV file and maps population to a linear scale and country names to a band scale for the bars. The axes are generated with `axisLeft` and `axisBottom`, while the tick formatter uses `d3.format` with string replacement. Bars are drawn as SVG rectangles with heights derived from `yScale.bandwidth()`.

Apr 22, 2022

Loading thumbnail…

cars scatter polot

This example shows a scatter plot of top countries by population, with points arranged along a vertical categorical axis and a horizontal value scale. It uses the D3.js library (version 7) to render the visualization as an SVG, with circles positioned using `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis. Axis ticks are formatted with a custom function that abbreviates large numbers, and the underlying data comes from a CSV file containing country names and population figures.

Mar 23, 2022

Loading thumbnail…

Scatter Plots

This example visualizes population data for the ten largest countries and the European Union using a scatter plot with circular markers. The chart maps population on a linear x-axis using `d3.scaleLinear` and country names on a `d3.scalePoint` y-axis, with axis labels formatted via `d3.format`. SVG circles are positioned through `scaleLinear` and `scalePoint` domains, while the `d3.csv` loader parses the external CSV file. The visualization includes custom margins and grid lines, rendering entirely with D3 v7 SVG elements.

Mar 23, 2022

Loading thumbnail…

Making bar chat

This bar chart displays population figures for ten countries and political unions, using horizontal bars to compare values from China to Russia. The visualization relies on D3 v7’s `scaleLinear` and `scaleBand` to map population counts and country names, while `axisLeft` and `axisBottom` generate the axes. Data is loaded from a CSV file via `d3.csv`, and the SVG rendering applies a steelblue fill to each rectangle bar.

Mar 22, 2022

Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face using D3.js v7 and SVG primitives. A yellow circle forms the head, with smaller circles for eyes, rectangles for eyebrows, and a semicircular arc for the mouth, all positioned relative to the center of the SVG canvas. The code uses `d3.select` to target the SVG, `append` with `attr` to create shapes, and `transition().duration()` to animate the eyebrow group’s vertical position in a two-step bounce. The layout is handled manually with computed offsets rather than a data-driven scale or simulation.

Mar 21, 2022