Nate-Holland

@Nate-Holland·8 public vizzes

Force-Directed Graph

This force-directed graph visualizes character co-occurrence in Les Misérables, grouping related characters into proximity while separating unrelated ones. Drawn as SVG circles and lines, nodes are colored by group and links weighted by interaction frequency. The data, compiled by Donald Knuth and stored in `miserables.json`, drives a `d3.forceSimulation` with link, charge, and center forces. Interactive dragging is enabled via `d3.drag`, while node positions update on each simulation tick.

Oct 23, 2017

Loading thumbnail…

d3js workshop - animated bar charts

This example shows an interactive animated bar chart of 2015 Premier League standings, with each team’s points displayed as the bar length and colored by number of wins. Below the chart, a row of circles duplicates the same color encoding, and clicking either a bar or circle triggers a D3 update that transitions the bar widths and colors to reflect wins instead of points. Built with d3.v3, it uses d3.csv to load the data, d3.scale.linear for positioning and color, and SVG elements with event listeners for the interaction.

Oct 23, 2017

Loading thumbnail…

world map

A world map uses a choropleth to show which countries have bilateral extradition treaties with the United States, shading countries with older treaties in purple and newer ones in orange, while those without treaties appear gray. The map is built with D3 v3, using the `d3.geo.naturalEarth` projection and `d3.geo.path` to render SVG land and boundary paths from a TopoJSON file. The code also loads an external offices CSV, though its data plays no role in the visual output.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles 2

Three circles spaced horizontally transition in sequence from their initial position, turning red as they shift downward. Hovering reverses the effect, returning a circle to its starting point in black; clicking turns it green, briefly enlarges it, then shrinks it to nothing. The example demonstrates D3 data joins, selection, and event handling within an SVG scene, using D3 v3’s `transition()`, `delay()`, `duration()`, and `on()` methods on a fixed data array. It extends a basic circles tutorial with interactive feedback and animated state changes.

Oct 19, 2017

Loading thumbnail…

d3js workshop - circles

Three circles are drawn in an SVG canvas, then animated in sequence: each circle turns red, grows, and shifts downward. The animation is staggered with a one-second delay per circle using D3's transition API, which modifies the fill, radius, and y-position attributes. The SVG elements are created by appending to the canvas and bound to a simple data array, demonstrating basic D3 v3 selection and transition methods.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding by generating a list of div elements from an array of names. The code creates an empty selection with `d3.selectAll('div')`, binds the array `['ben', 'elcin', 'ana', 'jonatan', 'frank']` using `.data()`, and enters missing elements with `.enter()` before appending each div. Each new element then displays its index and corresponding name via a `text` callback function, showing how bound data drives dynamic content. The example uses D3 v3 and is built with Blockbuilder.

Oct 19, 2017

Loading thumbnail…

d3js workshop - data binding

This example demonstrates D3.js data binding through selection and appending operations on HTML elements. The code shows how `d3.select` and `d3.selectAll` target specific divs by element type, ID, or class, with commented examples illustrating text updates. It then appends a new div to the body using `d3.select('body').append('div')` and sets its content with `.text()`. The example uses D3 v3 loaded from a CDN, with all interactions occurring directly on the DOM without external data sources.

Oct 19, 2017

Loading thumbnail…

TTworkshop - html basic

This example demonstrates a minimal HTML page for the TTworkshop, combining styled text with an inline SVG drawing. The page uses CSS selectors to apply different font sizes and colors to paragraphs, including an ID and class-based style, while a blue inline style overrides the class rule for the first paragraph. The SVG element renders a single red circle with a black stroke, and the code uses plain HTML and SVG APIs without any JavaScript libraries or data sources.

Oct 19, 2017