HamishWoodrow

@HamishWoodrow·7 public vizzes

d3_tip_plot

This visualization uses a bar chart to show the frequency of a variable over time, with each bar representing a date from February to October 2017. The chart is rendered using SVG via D3.js v3, with an ordinal scale for the x-axis and a linear scale for the y-axis. It incorporates the d3-tip library to display tooltips on mouseover, showing the exact frequency value. Data is loaded from a local CSV file using `d3.csv`, and the bars are colored orange, darkening on hover to highlight interactivity.

Oct 30, 2017

Loading thumbnail…

flare_trial_2

This interactive tree diagram visualizes a hierarchical dataset of machine learning topics and techniques. Clicking on a node with children collapses or expands that subtree, with animated transitions smoothing the layout changes. The visualization is built with D3.js v3, using the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute and draw the node-link structure. Data is loaded from a JSON file, and nodes include external URLs that open in new windows when clicked. The SVG rendering uses red circles for parent nodes and white for leaf nodes.

Aug 25, 2017

Loading thumbnail…

fresh block

An interactive red-on-white dendrogram visualizes a hierarchical JSON dataset from `turbo.json`. Clicking a node collapses or expands its children. The tree uses `d3.layout.tree` for layout and `d3.svg.diagonal` for curved links. Animated transitions via `d3.select(...).transition()` reposition nodes and links when branches open or close. Leaf nodes with URLs render as clickable text anchors.

Aug 25, 2017

Loading thumbnail…

fresh block

This example shows a hierarchical tree of machine-learning topics as a tidy dendrogram, with internal nodes drawn as dark circles and leaf nodes as lighter ones. Each node displays a label, and the data is loaded from a local CSV file using `d3.csv` and structured with `d3.stratify`. The layout is computed by `d3.cluster`, and the curved links between parent and child nodes are rendered as SVG paths with a custom cubic Bézier curve. Clicking any node opens a new browser window.

Aug 25, 2017

Loading thumbnail…

fresh block

This example shows a hierarchical cluster dendrogram of machine learning research topics, using a tidy tree layout where each leaf node represents a specific topic and branches group related subtopics. The visualization uses `d3.cluster` to position nodes and `d3.stratify` to build the tree structure from CSV data with hierarchical id fields. Curved link paths create the classic dendrogram appearance, with internal nodes labeled on the left and leaf labels on the right. Data comes from a flare.csv file containing nested topic names, rendered as SVG elements with circle markers and text labels.

Aug 25, 2017

Loading thumbnail…

d3 choropleth map

This animated choropleth map visualizes the change in a numeric variable across US counties from 1817 to 2012 using a CSV time-series dataset. The map renders each county as a colored SVG path, with color intensity encoding the value for the currently selected year. A play button and timeline slider allow users to animate through years, updating the fill colors with a smooth transition. The visualization is built with D3 v3 and includes a legend to map color scale values, enabling temporal exploration of the spatial distribution of the data.

Aug 9, 2017

Loading thumbnail…

Viewership_Cult

A responsive multiline chart tracks the relative popularity of four TV shows—Breaking Bad, Game of Thrones, Lost, and South Park—over time from 2004 to 2017. The chart uses d3.svg.line to render each series, with d3.scale.linear for the axes and d3.svg.axis for ticks. Clicking a legend item toggles series visibility, and the chart resizes to fit its container while updating the scales. Data comes from a CSV file and is parsed with d3.csv, with a tooltip that uses d3.svg.line for a crosshair guide.

Aug 1, 2017