Past Presidents

Past Presidents - ES5

This dashboard visualizes U.S. presidential history using a sortable data table, stacked single-line row charts, and interactive filters. It displays party affiliations, years in office, and presidential timelines, with the top row chart resizing based on the selected time period. Bars on both charts fade when outside the selected time period or if their party is not selected. The visualization uses D3.js and Crossfilter to enable brushing on the timeline and filtering by political party via checkboxes, with data rendered as SVG. This version is written in ES5 for broader browser compatibility.

Aalexmacy

90% match

Past Presidents - ES5

This dashboard visualizes U.S. presidential history through a sortable data table and stacked single-line row charts. The main row chart displays party representation as proportionally sized segments, while a second timeline chart shows individual presidencies and includes a brush for selecting time ranges. Both charts update in response to filters: bars fade when outside the selected period or when their party is deselected via the checkbox list. Data is managed with crossfilter, rendered using D3.js and SVG, and includes a sortable table of presidents with details like party affiliation and years in office. Written in ES5 for broad browser compatibility.

ZZhengYingqian

89% match

Presidents of the United States

This visualization presents a comprehensive overview of U.S. presidents, displaying their portraits in a grid alongside summaries of party, birth state, occupation, college, religion, and age at inauguration. The data is loaded from a Google Spreadsheet and rendered using the Knowledge Sharing Framework (KSHF), which employs D3.js for layout and interaction. Term start dates are plotted along a time-scaled bottom panel, while the grid supports text search, sorting by age or term, and zooming into individual records. The tooltip-style record view links to official White House biographies.

Aadilyalcin

78% match

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

72% match

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.

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.

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.

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.