Past Presidents - ES5

Election History

This visualization displays over two centuries of U.S. presidential election results as a grid of colored cells, one per state and election year, with fill color indicating the winning party and opacity reflecting vote share. Built with D3 v4, it uses SVG rectangles mapped via `d3.scaleBand` for both axes, and adds a hover-based tooltip that highlights the corresponding row and column while showing vote totals and party percentages. A button toggles the vertical sorting between alphabetical and chronological state order using an animated transition.

TThanaporn-sk

70% match

Election History

TThanaporn-sk

70% match

Parallel Coordinates

This example uses dex.js and D3 to create an interactive parallel coordinates chart of U.S. presidents, plotting categorical and ordinal variables such as presidency number, party, and home state along parallel axes. The `dex.charts.d3.ParallelCoordinates` component renders the lines, while a configuration pane built with `dex.ui.ConfigurationPane` exposes data filters and GUI options for narrowing the displayed presidents. The layout uses jQuery UI’s `layout` for resizable panels, and the labels on the outer axes may overflow into margins if not expanded.

69% match

Radial Tree

This radial tree visualization displays the sequence of U.S. presidents, branching by party affiliation and home state, using data from a CSV file. The chart, built with dex.js and D3 v4, renders a hierarchical layout with a color scale mapping parties to red, blue, green, and black. It uses `d3.csv` to load the data and `d3.scaleOrdinal` for the color scheme, though it is not interactive. The example adapts Mike Bostock’s radial tree technique for reusable presentation.

Difference Chart

This visualization compares public approval, disapproval, and undecided ratings for multiple U.S. presidents by aligning their time in office along a common axis. It renders three separate charts side-by-side, each showing two presidential terms overlaid. The chart uses filled red and blue areas to highlight where one president’s rating exceeds the other’s, with dark red and dark blue lines tracing each individual series. The code uses D3 v3 with `d3.time.scale` and `d3.svg.area` to interpolate between sampled data points from CSV files. Data is sourced from the UCSB presidency popularity dataset.

BBeaupe

Dendrogram

A dendrogram visualizes the hierarchical relationship among U.S. presidents, grouping them by party, then home state, and finally by presidency number. The example loads data from `presidents.csv` using D3’s `d3.csv` method and renders an interactive tree chart through the DEX library’s `dex.charts.d3.Dendrogram` component. The chart is embedded in a full-page `div` and styled with Bootstrap and jQuery UI, while the underlying D3 layout computes the branching structure.

NVD3 Bubble Chart

This example uses a D3 Plus ring network to visualize the relationships among U.S. presidents, their political parties, and home states. The interactive chart arranges nodes in concentric rings, with arrows indicating edges between connected data points. The code loads data from a JavaScript array and renders the visualization using the `dex.charts.d3plus.RingNetwork` API, which leverages D3’s v3 force simulation for layout, along with jQuery, Bootstrap, and underscore libraries for interaction and styling. The visualization highlights categorical groupings and connections within the presidential dataset.

Chord Diagram

This chord diagram visualizes the relationships between U.S. Presidents, their political parties, and home states, using data loaded from a CSV file. The code relies on the dex.js library’s `dex.charts.d3.Chord` component to render the diagram and includes an interactive `dex.ui.ConfigurationPane` for adjusting chart settings. The visualization uses D3.js internally, as dex.js builds on it, and the layout is managed with jQuery UI’s layout plugin to keep the chart and configuration panel responsive.