RaphAllier

@RaphAllier·3 public vizzes

Bar charts everywhere

This example compares the average monthly stock prices of Microsoft, Amazon, IBM, and Apple across years (2000–2010) using bars that can switch between stacked and grouped layouts via radio buttons. The visualization uses D3 v4 with `d3.nest()` and `d3.rollup()` to aggregate the CSV data, `d3.stack()` for stacking, and ordinal and linear scales for positioning. An animated transition (800ms) updates the bar positions and heights when the mode changes, with SVG rendering and a custom color scale for each company.

Feb 1, 2018

Loading thumbnail…

Scatterplot of Iris

This scatterplot visualizes the relationship between petal length and petal width for 150 iris flowers, with a computed linear regression line overlaid to suggest the trend. The chart uses a simple SVG canvas with axes and labels generated via d3.axisBottom and d3.axisLeft. Data is loaded from the iris.csv file, and the regression line is created by manually calculating the least-squares coefficients and drawn as a dashed path using d3.line. The visualization is built with D3 v4 and includes hover tooltips for enhanced interactivity.

Jan 23, 2018

Loading thumbnail…

Iris Scatterplot

This scatterplot displays the classic Iris dataset, plotting the petal length for each of the 150 samples in sequence. Despite its title, the visualization renders the data as a simple linear strip of text labels rather than a traditional two-dimensional scatterplot. The code uses D3 v4 to load the CSV file via `d3.csv` and attempts to append text elements to an SVG canvas, positioning each value horizontally by index. The visualization is built with D3's DOM manipulation API, though the implementation is incomplete and does not produce a fully functional scatterplot.

Jan 21, 2018