Soorin

@Soorin·5 public vizzes

basic tree structure graph

A basic tree structure graph displays hierarchical data as green circular nodes connected by green straight-line links. The visualization uses the D3.js v4 `d3.tree` layout to compute node positions from a JSON array loaded via `d3.json`, with the root hierarchy created by `d3.hierarchy`. Nodes and edges are rendered as SVG circles and paths, with the latter drawn using path commands from parent to child coordinates. The example focuses on the simplest possible tree layout, showing parent-child relationships without additional styling or interaction.

Oct 21, 2017

Loading thumbnail…

Number of registered voters on voting sections chart

This visualization shows the number of registered voters for each voting section in the Vaslui locality during the 2016 elections, using a bar chart built with D3.js v4. The chart filters CSV data to Vaslui, maps voting sections to the x-axis, and voter counts to the y-axis via `d3.scaleBand` and `d3.scaleLinear`. Bars animate in with a staggered delay, and hovering reveals a tooltip with the section name and voter count. The visualization uses SVG rendering and includes axes via `d3.axisBottom` and `d3.axisLeft`.

Oct 19, 2017

Loading thumbnail…

circle transition

This animated scatterplot displays barley yield data across multiple sites and years, with each circle representing a specific genus at a location. The visualization cycles through nine yearly snapshots, transitioning circles as they enter, exit, and reposition according to their yield values. Built with D3 v4, it uses SVG circle elements, a band scale for site categories, and a linear scale for yield measurements. Transitions animate circle radius and vertical position over one-second intervals, while a color scale distinguishes different barley genera.

Oct 18, 2017

Loading thumbnail…

Simple bar chart transition

Three bar chart datasets are displayed through a select menu, with animated transitions between value sets using SVG rectangles. The chart shows exiting bars shrinking downward and disappearing, while new and updated bars grow from the bottom to their new heights. The code uses d3.v4’s `d3.transition()` and `selection.merge()` to handle enter, update, and exit states, with a `d3.scaleOrdinal` and `d3.schemeCategory10` for color mapping. Data is hardcoded as arrays of numbers, and the select element triggers `updateBars` on change.

Oct 17, 2017

Loading thumbnail…

Temperature line chart with scales

This example shows daily average temperatures for Austin over a seven-month period as a single green line chart. The visualization uses D3 v4 to parse tab-separated data, apply time and linear scales via `d3.scaleTime` and `d3.scaleLinear`, and render axes with `d3.axisBottom` and `d3.axisLeft`. The line itself is generated with a `d3.line` path, drawn as an SVG element. The chart focuses on a single city’s temperature trend, with the x-axis formatted to display month and year.

Oct 17, 2017