Daniel R Handoko

@Tryus111·4 public vizzes

Dinamic plot

This visualization displays Fisher's iris dataset with a dynamic scatterplot that cycles through four measured attributes. Animated circles transition smoothly between axes using D3 v7's transition framework, with `d3.scaleLinear` handling value mapping and d3.axisBottom and d3.axisLeft rendering coordinates. Each second, the x-axis switches to a new variable while y-axis remains fixed, demonstrating reusable chart components through a custom plot function.

Aug 16, 2023

Loading thumbnail…

D3.js Import Data from Local CSV

This example shows an interactive scatterplot of the Iris dataset, cycling through different flower measurements every second. The visualization uses D3.js version 7 to load CSV data from a GitHub gist, parsing string values into numbers. A custom reusable chart function (`dinamicPlot`) builds SVG circles and axes using `d3.scaleLinear` and transitions with `transition.attrTween`. The animation updates the x-axis variable in a continuous loop, while the y-axis remains fixed on sepal length.

Aug 16, 2023

Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example presents an interactive scatter plot of the Iris dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) at intervals to explore relationships with sepal length on the y-axis. The visualization uses D3.js v6 within a React environment, rendering with SVG and animation. The reusable `scatterPlot` function leverages D3 scales, axes, and data joins, while the main script loads CSV data, maps species to colors (red, violet, orange), and includes a custom legend with labels and points.

Aug 14, 2023

Loading thumbnail…

Visualization

This visualization creates a striped pattern of horizontal and vertical bars that are selectively revealed through two SVG masks. The masks use alternating black-and-white rectangles and D3 symbols to alternate visibility of the grid lines, producing an overlapping geometric composition. Built with D3 v7, the code uses `select`, `range`, `scaleBand`, and `symbol` to generate the shapes, while `append('mask')` and `attr('mask', ...)` control the clipping. The rectangles are sized based on `window.innerWidth` and `window.innerHeight`, with the pattern repeated 120 times across the screen.

Aug 6, 2023