RenonDis

@RenonDis·4 public vizzes

Grouped bar chart with transition

This grouped bar chart displays five series of ten random values each, with bars colored by series and positioned along a shared categorical axis. The chart animates its initial appearance as each bar’s height transitions smoothly from zero to its data value, staggered by index. Built with D3 v4, it uses `d3.scaleBand` for both group and inner-bar positioning, `d3.scaleLinear` for the y-axis, and an SVG `transition` on the `height` attribute to drive the animation. The data are generated procedurally via `Math.random` and rendered as SVG rectangles.

Feb 2, 2018

Loading thumbnail…

Grouped bar chart v4

This grouped bar chart visualizes ten samples across five series, with random data generated directly in the code using `d3.range` and `Math.random`. Rendered as an SVG, the chart uses `d3.scaleBand` for both the outer and inner axes, while a `d3.scaleOrdinal` maps a categorical color palette to the series. The animation is achieved through a chained `transition()` call with staggered `delay()` on the rectangles, which grow from the bottom to their final heights. The chart leverages the d3.v4 library and follows the classic grouped bar layout adapted from a bl.ocks example.

Feb 1, 2018

Loading thumbnail…

Interactive scatterplot Iris using different marks

This interactive scatterplot visualizes the classic Iris dataset, plotting sepal length against sepal width. Each flower is drawn as a distinct SVG symbol, with its shape and color encoding the species. The visualization includes a legend; clicking a legend entry dims points from other species, allowing for easy comparison. The code uses d3.csv to load data, d3.scaleOrdinal with d3.symbols to generate different mark types, and d3.axisBottom and d3.axisLeft for the axes.

Jan 26, 2018

Loading thumbnail…

D3 Scatterplot with Regression Line

This scatterplot displays the classic Iris dataset, plotting sepal length against sepal width for three species. Each species is represented by a distinct symbol and color: circles for virginica, triangles for setosa, and squares for versicolor. The code computes a linear regression directly from the data and overlays the resulting regression line in green. It uses D3.js version 3.5.6 with SVG rendering, including `d3.svg.axis` for the axes and `d3.svg.symbol` for the custom point shapes.

Jan 26, 2018