Skip to main content
Log in
S

sathishkanna11

@sathishkanna11·9 public vizzes

Loading thumbnail…

Untitled

This interactive sunburst chart visualizes the hierarchical structure of the Bible, with sections for the Old and New Testaments and their subdivisions. The visualization uses D3.js v5 with the `d3.stratify`, `d3.partition`, and `d3.arc` APIs to compute and render the radial layout as SVG paths. Users can click on any slice to zoom into that level, and toggle between linear and grouped node-size modes via radio buttons. The example animates transitions using `transition.attrTween` with tweened arc paths and text labels, which are positioned along the centroid of each slice. Data is loaded from a JSON file describing the book hierarchy.

May 18, 2020
Loading thumbnail…

D3 v5 Zoomable Sunburst

This example presents a zoomable sunburst visualization of the flare.json hierarchical dataset, where clicking on a ring segment animates the view to focus on that node. Built with D3 v5, it renders the hierarchy as an SVG using `d3.partition` and `d3.arc` to compute arc geometry. Interactive transitions leverage `transition.attrTween` and `d3.interpolate` to smoothly reshape arcs and labels when navigating. Data is loaded via the Observable `@observablehq/flare` module using a `require()` call.

May 18, 2020
Loading thumbnail…

Circle on the Map3

A world map displays population changes by country from 2020 to 2030 using animated, scaled circles. D3's `geoNaturalEarth1` projection and `geoPath` render the landmasses, while `transition().delay()` sequentially animates each country circle's radius to reflect yearly population estimates from a CSV file. A legend using `scaleSqrt` and `sizeLegend` explains the circle-size mapping, and hovering highlights individual countries.

May 13, 2020
Loading thumbnail…

Persons of Concern StreamGraph by Origin

This interactive streamgraph visualizes the total number of persons of concern grouped by country of origin, with the sum of asylum-seekers, refugees, internally displaced persons, stateless persons, and other categories. The data comes from UNHCR Population Statistics and excludes countries with relatively low counts. Built with D3 v4, the visualization uses d3.stack with a wiggle offset and inside-out ordering, along with d3.area, d3.scaleTime, and d3.scaleLinear to render the smooth, labeled streams in SVG. The d3-area-label library positions area labels, and hovering over a path highlights it in black.

Apr 29, 2020
Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of four hardcoded values, with a color legend assigned via a radio button group offering apples or oranges datasets. The visualization renders as an SVG donut using D3 v5's `d3.pie()` and `d3.arc()` generators, with an ordinal color scale mapping categories to distinct hues. The chart draws all arcs at once from a fixed data array, and changing the dataset radio button does not trigger a re-render, as only the initial render function is called.

Apr 28, 2020
Loading thumbnail…

React Starter

This example renders a single-page React application that displays the text “Hello React!” centered on the page. It shows the minimal setup for a React project, using the `react` and `react-dom` libraries, with the `index.html` file loading the libraries from unpkg and the `bundle.js` file. The main `index.js` file imports React and ReactDOM, defines an `App` component, and calls `ReactDOM.render` to mount that component into the `#root` element.

Apr 26, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth from 1950 to 2015 using World Population data. The graphic shows a smooth rising curve filled in maroon, with time on the x-axis and population counts on the y-axis, formatted in billions. The visualization is rendered as an SVG using D3 v5, employing `d3.area` with a basis curve and `d3.scaleTime` for the temporal axis. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with gridlines and custom tick formatting.

Apr 22, 2020
Loading thumbnail…

World Population Area Chart

This area chart visualizes global population growth over time, with the x-axis representing years and the y-axis showing population in billions. The data is loaded from a CSV file containing world population figures by year. Using D3 v5, the chart employs `scaleTime` and `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and an `area` generator with a basis curve to create a smooth filled shape. The SVG rendering includes custom axis labels and a title, with gridlines styled via CSS.

Apr 22, 2020
Loading thumbnail…

Stylized Line Chart

This stylized line chart displays temperature over time for a week in San Francisco, plotted as a smooth curve using React with SVG rendering. The chart loads CSV data via d3.csv and scales time with d3.scaleTime and temperature with d3.scaleLinear. The line path is generated using d3.line with curveNatural to produce a smooth, organic flow between points. The minimalist design features a teal stroke, clean axes from custom React components, and the Poppins font, with the original dataset credited to Data Canvas Sense Your City.

Apr 22, 2020