Halian Vilela

@halian-vilela·2 public vizzes

Data Folowing a Path

A collection of pink circles animates along a fixed black path, each circle traveling from the path’s start to its end in sequence. The visualization shows how data points can follow a predefined geometric route, with each circle representing a discrete step. The code uses D3 v5’s `scaleLinear` to map indices to path lengths, and `transition.attrTween` with `getPointAtLength` to move each circle along the SVG path. The animation uses `d3.easeCircleInOut` for smooth acceleration and deceleration, with the path defined by a complex Bézier string.

Feb 27, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart compares the frequency of earthquakes across four U.S. regions from 2011 to 2015, using data from a CSV file that includes state, region, year, and count. The visualization uses D3 v5 with `nest()` and `rollup()` to aggregate counts by region and year, then draws smoothed lines with `line()` and `curveBasis` to show trends. Color-coded circles mark yearly data points, and a custom `colorLegend` function displays the regional color key. The chart is rendered as SVG with axes from `axisLeft` and `axisBottom`, and includes interactive hover effects on the points.

Feb 20, 2020