JoelGallagher

@JoelGallagher·10 public vizzes

d3.js learning

A stacked bar chart shows the annual production of four fruit varieties—Red Delicious apples, McIntosh apples, Naval oranges, and Anjou pears—from 2006 to 2016. The chart uses d3.v3’s `d3.layout.stack` to flatten the time-series data into cumulative layers, with axes drawn via `d3.svg.axis` and an ordinal time scale for the x-axis. SVG rectangles for each segment include mouseover tooltips displaying individual values, and a legend identifies the color-coded fruit types.

Jun 7, 2019

Loading thumbnail…

fancier_force_distance

This example visualizes a force-directed network of patent litigation and licensing disputes among technology companies. It shows how firms are connected through lawsuits, with each link representing a legal relationship and its type distinguished by color and line style. The visualization uses D3.js v3’s `d3.layout.force` to simulate physical forces, positioning nodes and adjusting link distances based on a numeric `distance` property in the data. SVG elements—paths for links with arrow markers, circles for nodes, and text labels—are bound to the force simulation’s tick event, which updates their positions. The source data originates from a Thomson Reuters blog post, and the code manually constructs node and link arrays from a hardcoded list.

Nov 18, 2018

Loading thumbnail…

erica_force_distance

A D3 force-directed graph displays four named nodes—PortalX, PaymentGateway, StarRezWeb, and Conference—connected by four links, each assigned a custom `distance` value that controls the length of its corresponding line. The visualization uses `d3.layout.force` to simulate physical forces, with the `linkDistance` function returning each link's specified distance, while circles represent nodes and lines represent links. The SVG rendering updates positions on every tick, and nodes are draggable via `force.drag`. The data is hardcoded in the script, and the example is built with D3 version 3.5.17.

Nov 18, 2018

Loading thumbnail…

DynamicChart_Animated

Five student records switch between math and science scores with a simple bar chart built from div elements. Clicking the Math or Science buttons triggers a transition that smoothly resizes each bar’s width to match the selected subject’s value. The chart uses D3 v4’s data join with a key function on student names, merging enter and update selections for animated width changes via `selection.transition()`. Styled with teal CSS bars, the visualization demonstrates basic data binding and animated updates without axes or scales.

Oct 31, 2018

Loading thumbnail…

Entererer

Entererer is a minimal bar chart that visualizes a static array of five numeric values using D3.js v4. It shows a descending sequence of teal horizontal bars, each with a width proportional to its corresponding data point. The example demonstrates D3’s **enter selection** by using `d3.select('#chart')`, `.selectAll('div')`, and `.data(data)` followed by `.enter()` to create new `div` elements for each item, then sets their `class` to `bar` and computes the `width` style via a custom function. The rendering relies on standard HTML and CSS, with data hardcoded in the script.

Oct 31, 2018

Loading thumbnail…

DataJoinTinker

This example demonstrates how D3.js can create horizontal bar charts using two different approaches within a single page. The visualization shows five data points displayed as teal bars in the first chart and red bars in the second chart, with bar widths proportional to the data values. The code uses D3’s selection and data binding methods—`selectAll`, `data`, and `append`—to generate the bar elements, while styling them with CSS classes. Notably, the first chart binds data to pre-existing divs without calling `enter()`, whereas the second chart uses `enter().append()` to create new divs dynamically. The source data is a hardcoded array of five numbers.

Oct 19, 2018

Loading thumbnail…

SelectionTinker

Two HTML paragraphs initially render in black, then d3.selectAll changes every paragraph’s text color to blue, and finally d3.select overrides the first paragraph to red, demonstrating selection and chained styling. Using D3 v4, the example shows how a broad selection affects all matched elements while a narrower select targets only the first, with no data binding or interaction. The code relies solely on d3.select, d3.selectAll, and .style for DOM manipulation.

Oct 18, 2018

Loading thumbnail…

DomainRangeTinker

DomainRangeTinker demonstrates how a D3 v4 linear scale converts a percentage value into its decimal equivalent. The example uses `d3.scaleLinear()` with a domain of `[0, 100]` and a range of `[0, 1]`, then computes the scale’s output for an input of 99. The resulting decimal, 0.99, is rendered as text in an SVG element using a monospace font. The code appends a single `<text>` node to the SVG canvas, positioning it at fixed coordinates. This minimal block illustrates the core concept of domain-to-range mapping without any interactive elements or data loading, relying solely on the scale’s transform.

Oct 18, 2018

Loading thumbnail…

WeekDayChart

This example visualizes the frequency of events across the seven days of the week using a simple bar chart. The chart shows that Wednesday has the highest count at 131, while Friday has the lowest at 1. The visualization is built with D3 v4, using `d3.scaleBand` for the x-axis day categories and `d3.scaleLinear` for the y-axis frequency scale. Bars are rendered as SVG `rect` elements, and the chart includes hover effects that change bar color from steelblue to brown. The data is hardcoded in a `flatDays` array, and the y-axis is labeled "Frequency."

Aug 19, 2018

Loading thumbnail…

MultiLine BucketChart

This example demonstrates a multi-line chart where each line represents a separate data series, bucketed over time to compare trends across categories. The visualization uses D3.js v4 to generate an SVG-based chart, with the `d3.line` generator creating the paths for each series. The code initializes an SVG canvas and appends a text label as a placeholder, though the actual chart rendering logic is not yet implemented in the provided snippet. The data source originates from a gist by JoelGallagher, and the example relies on the d3.v4 library for DOM selection and SVG manipulation.

Aug 10, 2018