Skip to main content
100%

Presidents of the United States

✓ Published0🌍 Public
Aadilyalcin
Last edited Jan 9, 2016
Created on Jan 9, 2016

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Past Presidents

This dashboard displays data about U.S. Presidents, including their party affiliations and time in office. It uses a sortable data table, two stacked single-row bar charts, and interactive filters to explore the data. The main row chart shows party representation across all presidents, resizing based on a selected time period via a brush slider, while a second chart displays the presidential timeline. Bars fade when outside the selected time period or when their party is deselected using checkbox filters. The visualization was designed as an alternative to pie charts, aiming to show comparable percentages of a whole with a stacked row chart approach.

Aalexmacy
78% match
Loading thumbnail…

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
74% match
Loading thumbnail…

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
73% match
Loading thumbnail…

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.

PPatMartin
68% match
Loading thumbnail…

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
66% match
Loading thumbnail…

Know Your Presedential Candidates

This visualization displays the 2020 presidential candidates by fetching data from the OpenFEC API. The code uses D3.js v5 to create an SVG chart within a Bootstrap-styled page, while the API is queried with a custom API key through D3's JSON request methods. The visualization appears as a static white container, with the data retrieval and console logging being the primary visible actions. The chart dimensions are set to 400 by 600 pixels, though no specific visual encoding is implemented in the shown code.

MMegan Bailey
66% match
Loading thumbnail…

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.

PPatMartin
65% match
Loading thumbnail…

Line Chart

This visualization shows the approval ratings of multiple U.S. presidents over time, plotting separate lines for George W. Bush and Barack Obama. The view uses a time-scaled x-axis and a linear y-axis from 0 to 90, with a grid and tick marks on the right. The code loads data from CSV files, including presidential popularity data, and renders the two lines with D3 v3’s `d3.svg.line` and `d3.time.scale`. The SVG chart is drawn inside a 500x1500 pixel canvas, with the source data cited.

BBeaupe
65% match