Jboulery

@Jboulery·7 public vizzes

fresh block

This example shows a blank SVG canvas containing a single dark rectangle positioned at the top-left corner. The visualization is minimal, demonstrating the basic setup of an SVG scene using D3 version 4. The code selects the document body, appends an SVG element with fixed dimensions, and then adds a group containing a rectangle of specified width and height. The rendering relies on D3’s selection and attribute methods to build the static graphic.

May 24, 2018

Loading thumbnail…

Stocks - Grouped to stacked bars

This example visualizes monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, allowing users to toggle between grouped and stacked bar charts. The grouped view shows each company’s price side-by-side, while the stacked view displays cumulative prices per month. Built with D3 v4, the visualization uses SVG for rendering and transitions to animate between the two modes. Data is loaded from a CSV file, processed with `d3.nest`, and mapped with `d3.scaleBand` and `d3.stack` to generate the bars.

Feb 1, 2018

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the population distribution across seven age groups for six U.S. states, using a distinct color for each age bracket. The chart is rendered as SVG, with bars grouped per state along the x-axis and population counts on the y-axis, formatted with SI prefixes like "10M." Built with D3 v4, the visualization loads data from a CSV file via `d3.csv`, uses `d3.scaleBand` for the x-positions and `d3.scaleLinear` for the y-axis, and applies an ordinal color scale. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend is manually constructed with SVG rectangles and text.

Jan 30, 2018

Loading thumbnail…

fresh block

Two empty square divs sit side by side, one red and one blue, each 200 pixels wide and tall. The page currently contains no data or visualization logic; the embedded script tag is blank. The example relies on the D3.js v4 library loaded from a CDN, though no D3 functions or APIs are invoked. The layout uses a fixed-position body with inline-styled divs to create a simple placeholder canvas, indicating a starting point for a future chart rather than a finished graphic.

Jan 26, 2018

Loading thumbnail…

Tutorial 2 D3

This visualization displays the Iris flower dataset, plotting petal length against petal width. Each of the three species (setosa, versicolor, virginica) is represented by a distinct SVG symbol—circle, cross, or diamond—and colored using a categorical scale. The view includes a linear regression line calculated from the data and displayed with its equation, alongside a legend. Mouseover interactions reveal a tooltip showing the exact coordinates of each point. Built with D3 v4, the code uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.symbol`, `d3.line`, and `d3.csv` to load the external CSV.

Jan 26, 2018

Loading thumbnail…

Tutorial 2 D3

This D3.js v4 visualization plots the classic Iris dataset, showing the relationship between petal length and petal width for three iris species. Each species is represented by a distinct symbol and color from the d3.schemeCategory10 palette. The chart uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisBottom/left for tick marks. A linear regression line, calculated from the dataset's means, is drawn using d3.line. Hovering over a point displays its coordinates via a text tooltip, and a legend identifies the species. The SVG is generated using d3.select and d3.append.

Jan 25, 2018

Loading thumbnail…

Tutorial 2 D3

This scatterplot maps the classic Iris flower dataset, plotting petal length against petal width for 150 samples. It uses the D3.js v4 library, rendering as an SVG with axis ticks and labels. The code employs `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for the chart frame, and `d3.symbol` with `d3.symbolCircle`, `d3.symbolCross`, and `d3.symbolDiamond` to distinguish the three species—setosa, versicolor, and virginica—by both shape and color. Data is loaded from a local `iris.csv` file.

Jan 23, 2018