MettiHoof

@MettiHoof·5 public vizzes

Barchart_csv_data

This example displays minimal SVG content inside a fixed full-viewport body, showing a single text instruction to edit the underlying code. The visualization does not render data or charts; instead, it uses d3.select to append an SVG canvas measuring 960 by 500 pixels, then adds a monospace text element positioned at (120, 200). The code relies solely on d3.v4 for DOM selection and SVG construction, with no external datasets or rendering logic beyond the placeholder text.

Nov 24, 2016

Loading thumbnail…

Scatterplot multiple series v2

This scatterplot visualizes the relationship between sepal width and sepal length for three iris species, with each species assigned a distinct color from a categorical scale and displayed as a small dot. The chart uses D3 v3 to load a TSV file with `d3.tsv`, compute the x- and y-axis domains with `d3.extent`, and encode position with `d3.scale.linear`. Color encoding leverages `d3.scale.ordinal` (via `d3.scale.category10()`), while axes are rendered using `d3.svg.axis`. A legend identifies each species, and the SVG rendering follows conventional margin-based layout.

Nov 18, 2016

Loading thumbnail…

Scatterplot multiple series

This scatterplot visualizes the relationship between sepal width and sepal length for three iris species, with each species distinguished by color. The SVG chart loads a TSV file and uses d3.tsv for parsing, d3.scale.linear for positioning, and d3.scale.ordinal (via d3.scale.category10) for color encoding. d3.extent computes the axis domains, while d3.svg.axis renders the labeled axes. A legend identifies the species categories.

Nov 18, 2016

Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

Nov 17, 2016

Loading thumbnail…

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in *Les Misérables*, with related characters drawn closer together through a physical simulation of charged particles and springs. Nodes are colored by group and links are weighted by co-occurrence frequency. The implementation uses D3 v4’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute positions, rendered as SVG lines and circles with drag interaction. Data is from Donald Knuth’s character co-appearance compilation.

Oct 17, 2016