A block bar chart about changes to the number of the female Cabinet members of U.S.A. over time (per each president). This example covers transformation strategies for encoding, axis labels, and tooltips. Further descriptions are available in Kim et al. (2021). Images are obtained from ThisPersonDeosNotExist and blurred.
Desktop view
Design specification View
{"name": "us-cabinet-partial","layout": {// layout object "composition": "single",// a single view composition "width": 860,"height": 236,"row": [// row elements {// the first row element ==> y position "field": "president","type": "nominal","sort": {// a specific order for the row "order": ["Donald J. Trump","Barack Obama","George W. Bush","Bill Clinton","George Bush","Ronald Reagan"]}}],"column": [// the column element {// the first column element ==> x position "field": "position_num",// to set specific position of a image block "type": "ordinal","scale": {"domain": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]}}]},"layer": [// a layer object {"mark": {// mark type and properties "type": "image","width": 35,// sizing "height": 35,"opacity": {// static properties "value": 1},"stroke": {"value": "#ffffff"},"strokeWidth": {"value": 2},"url": {// image-url encoding "field": "image"}},"text": [// text elements {"type": "on-axis",// y position axis labels "field": "president","anchor": "start","orient": "left","align": "left","padding": 200,"flex": "horizontal-space-between","items": [// the first axis label {"width": 150,"align": "left","fontSize": 16,"fontWeight": 700},{// the second axis label "width": 30,"expression": "count()",// expression for the count (offers auto-groupby) "align": "right","fontSize": 16,"fontWeight": 700,"color": "#999999"}]}],"tooltip": {// tooltip "visibility": "on-mark",// unfixed, appearing on the mark triggering the tooltip "fields": [{"field": "name"},{"field": "position"}]}}],"title": {"width": 600,"align": "center","items": [{// the title element "text": "Number of white men in the first cabinet of each president","align": "center","fontSize": 16,"fontWeight": 700,"offset": 20// the offset from the visualization }]},"data": [// dataset for the visualization {"name": "Mike Pence","position": "Vice President","position_num": 1,"id": 64,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Rex W. Tillerson","position": "Secretary of State","position_num": 2,"id": 65,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Steven Mnuchin","position": "Secretary of the Treasury","position_num": 3,"id": 66,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-3.png"},{"name": "James N. Mattis","position": "Secretary of Defense","position_num": 4,"id": 67,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Jeff Sessions","position": "Attorney General","position_num": 5,"id": 68,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-5.png"},{"name": "Ryan Zinke","position": "Secretary of the Interior","position_num": 6,"id": 69,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Sonny Perdue","position": "Secretary of Agriculture","position_num": 7,"id": 120,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Wilbur Ross","position": "Secretary of Commerce","position_num": 8,"id": 70,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Tom Price","position": "Secretary of Health and Human Services","position_num": 9,"id": 72,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Rick Perry","position": "Secretary of Energy","position_num": 10,"id": 74,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-5.png"},{"name": "David J. Shulkin","position": "Secretary of Veterans Affairs","position_num": 11,"id": 46,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-1.png"},{"name": "John F. Kelly","position": "Secretary of Homeland Security","position_num": 12,"id": 76,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Reince Preibus","position": "Chief of Staff","position_num": 13,"id": 77,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": false,"image": "image/us-cabinet-3.png"},{"name": "Robert Lighthizer","position": "United States Trade Representative","position_num": 14,"id": 114,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": false,"image": "image/us-cabinet-4.png"},{"name": "Dan Coats","position": "Director of National Intelligence","position_num": 15,"id": 121,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": false,"image": "image/us-cabinet-5.png"},{"name": "Mick Mulvaney","position": "Director of the Office of Management and Budget","position_num": 16,"id": 79,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": false,"image": "image/us-cabinet-1.png"},{"name": "Mike Pompeo","position": "Director of the Central Intelligence Agency","position_num": 17,"id": 122,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": false,"image": "image/us-cabinet-2.png"},{"name": "Scott Pruitt","position": "Environmental Protection Agency Administrator","position_num": 18,"id": 78,"gender": "male","race": "white","cat": "male_white","president": "Donald J. Trump","inner": false,"image": "image/us-cabinet-3.png"},{"name": "Joseph R. Biden Jr.","position": "Vice President","position_num": 1,"id": 2,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Timothy F. Geithner","position": "Secretary of the Treasury","position_num": 2,"id": 6,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": true,"image": "image/us-cabinet-5.png"},{"name": "Robert M. Gates","position": "Secretary of Defense","position_num": 3,"id": 9,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Tom Vilsack","position": "Secretary of Agriculture","position_num": 4,"id": 16,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Shaun Donovan","position": "Secretary of Housing and Urban Development","position_num": 5,"id": 28,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Arne Duncan","position": "Secretary of Education","position_num": 6,"id": 39,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Rahm Emanuel","position": "Chief of Staff","position_num": 7,"id": 47,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": false,"image": "image/us-cabinet-5.png"},{"name": "Peter R. Orszag","position": "Director of the Office of Management and Budget","position_num": 8,"id": 53,"gender": "male","race": "white","cat": "male_white","president": "Barack Obama","inner": false,"image": "image/us-cabinet-1.png"},{"name": "Dick Cheney","position": "Vice President","position_num": 1,"id": 3,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Paul H. ONeill","position": "Secretary of the Treasury","position_num": 2,"id": 7,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Donald H. Rumsfeld","position": "Secretary of Defense","position_num": 3,"id": 10,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": true,"image": "image/us-cabinet-4.png"},{"name": "John D. Ashcroft","position": "Attorney General","position_num": 4,"id": 12,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": true,"image": "image/us-cabinet-5.png"},{"name": "Donald L. Evans","position": "Secretary of Commerce","position_num": 5,"id": 20,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Tommy G. Thompson ","position": "Secretary of Health and Human Services","position_num": 6,"id": 26,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Anthony Principi","position": "Secretary of Veterans Affairs","position_num": 7,"id": 43,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Andrew Card","position": "Chief of Staff","position_num": 8,"id": 48,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": false,"image": "image/us-cabinet-4.png"},{"name": "Mitchell E. Daniels Jr.","position": "Director of the Office of Management and Budget","position_num": 9,"id": 54,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": false,"image": "image/us-cabinet-5.png"},{"name": "Robert B. Zoellick","position": "United States Trade Representative","position_num": 10,"id": 57,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": false,"image": "image/us-cabinet-1.png"},{"name": "John P. Walters","position": "Director of the Office of National Drug Control Policy","position_num": 11,"id": 115,"gender": "male","race": "white","cat": "male_white","president": "George W. Bush","inner": false,"image": "image/us-cabinet-2.png"},{"name": "Al Gore","position": "Vice President","position_num": 1,"id": 34,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Warren M. Christopher","position": "Secretary of State","position_num": 2,"id": 5,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Lloyd M. Bentsen","position": "Secretary of the Treasury","position_num": 3,"id": 8,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": true,"image": "image/us-cabinet-5.png"},{"name": "Les Aspin","position": "Secretary of Defense","position_num": 4,"id": 116,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Bruce Babbitt","position": "Secretary of the Interior","position_num": 5,"id": 15,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Robert B. Reich","position": "Secretary of Labor","position_num": 6,"id": 24,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Richard Riley","position": "Secretary of Education","position_num": 7,"id": 41,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Thomas F. McLarty III","position": "Chief of Staff","position_num": 8,"id": 49,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": false,"image": "image/us-cabinet-5.png"},{"name": "Leon E. Panetta","position": "Director of the Office of Management and Budget","position_num": 9,"id": 55,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": false,"image": "image/us-cabinet-1.png"},{"name": "Mickey Kantor","position": "United States Trade Representative","position_num": 10,"id": 58,"gender": "male","race": "white","cat": "male_white","president": "Bill clinton","inner": false,"image": "image/us-cabinet-2.png"},{"name": "Dan Quayle","position": "Vice President","position_num": 1,"id": 82,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-3.png"},{"name": "James A. Baker ","position": "Secretary of State","position_num": 2,"id": 83,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Nicholas F. Brady","position": "Secretary of the Treasury","position_num": 3,"id": 84,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-5.png"},{"name": "Dick Cheney","position": "Secretary of Defense","position_num": 4,"id": 85,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Dick Thornburgh","position": "Attorney General","position_num": 5,"id": 86,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Clayton Yeutter","position": "Secretary of Agriculture","position_num": 6,"id": 88,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Robert A. Mosbacher","position": "Secretary of Commerce","position_num": 7,"id": 89,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Jack F. Kemp","position": "Secretary of Housing and Urban Development","position_num": 8,"id": 92,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-5.png"},{"name": "Samuel K. Skinner","position": "Secretary of Transportation","position_num": 9,"id": 93,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-1.png"},{"name": "James D. Watkins","position": "Secretary of Energy","position_num": 10,"id": 94,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Edward J. Derwinski","position": "Secretary of Veterans Affairs","position_num": 11,"id": 95,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Richard G. Darman","position": "Director of the Office of Management and Budget","position_num": 12,"id": 96,"gender": "male","race": "white","cat": "male_white","president": "George Bush","inner": false,"image": "image/us-cabinet-4.png"},{"name": "George H. W. Bush","position": "Vice President","position_num": 1,"id": 100,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-5.png"},{"name": "Alexander M. Haig Jr.","position": "Secretary of State","position_num": 2,"id": 101,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Donald T. Regan","position": "Secretary of the Treasury","position_num": 3,"id": 102,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Caspar W. Weinberger","position": "Secretary of Defense","position_num": 4,"id": 103,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-3.png"},{"name": "William French Smith","position": "Attorney General","position_num": 5,"id": 104,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-4.png"},{"name": "James G. Watt","position": "Secretary of the Interior","position_num": 6,"id": 105,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-5.png"},{"name": "John Block","position": "Secretary of Agriculture","position_num": 7,"id": 63,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Malcolm Baldrige","position": "Secretary of Commerce","position_num": 8,"id": 118,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-2.png"},{"name": "Raymond J. Donovan","position": "Secretary of Labor","position_num": 9,"id": 106,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-3.png"},{"name": "Richard S. Schweiker","position": "Secretary of Health and Human Services","position_num": 10,"id": 107,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-4.png"},{"name": "Drew Lewis","position": "Secretary of Transportation","position_num": 11,"id": 109,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-5.png"},{"name": "James B. Edwards","position": "Secretary of Energy","position_num": 12,"id": 110,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-1.png"},{"name": "Terrel H. Bell","position": "Secretary of Education","position_num": 13,"id": 63,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": true,"image": "image/us-cabinet-2.png"},{"name": "David A. Stockman","position": "Director of the Office of Management and Budget","position_num": 1,"id": 111,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": false,"image": "image/us-cabinet-3.png"},{"name": "Bill Brock","position": "United States Trade Representative","position_num": 2,"id": 112,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": false,"image": "image/us-cabinet-4.png"},{"name": "William J. Casey","position": "Director of Central Intelligence","position_num": 2,"id": 63,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": false,"image": "image/us-cabinet-5.png"},{"name": "Edwin Meese III","position": "Counselor to the President","position_num": 4,"id": 119,"gender": "male","race": "white","cat": "male_white","president": "Ronald Reagan","inner": false,"image": "image/us-cabinet-1.png"}]}
View
Number of white men in the first cabinet of each president
The tooltip demonstration.
Cicero Specification
Below, we provide one transformation rule at a time, and show the intermediate result on the side.
Specification
{"$schema": "../cicero.json","name": "us-cabinet-partial-mobile","description": "This is a Cicero specification for 'US Cabinet (Partial)' visualization from desktop to mobile.","metadata": {"condition": "small"},"transformations": [...]}
View
Rules: Resize the chart and serialize the axis labels
Resize the chart proportionately
{"description": "Resize the chart","specifier": {"role": "view"},"action": "modify","option": {"width": 375,"height": 350}}
Serialize axis labels
{"description": "Serialize axis labels","specifier": {"role": "axis.label","field": "president"},"action": "transpose","option": {"serial": true}}
View
Number of white men in the first cabinet of each president
Rule: Remove the image encoding
{"description": "Remove image channel","specifier": {"role": "mark"},"action": "remove","option": {"channel": "url"}}
This rule only removes the image encoding, so the size of the blocks remains same, and the color of the blocks set to be default (steelblue).
View
Number of white men in the first cabinet of each president
Rule: Modify mark properties
{"description": "Modify mark properties""specifier": {"role": "mark"},"action": "modify","option": {"size": {"value": 400},"color": {"value": "#CCCCCC"}}}
View
Number of white men in the first cabinet of each president
Rules: Miscellenous adjustments
Adjust the axis label box sizes
{"description": "Adjust axis label box sizes","specifier": {"role": "axis.label","field": "president"},"action": "modify","option": {"items": [// 'items' keyword allows to access the listed elements {// Corresponds to the first text element itme "width": 300},{// Corresponds to the second text element itme "width": 70}]}}
Remove the tooltip
{"description": "Remove tooltip","specifier": {"role": "tooltip"},"action": "remove"}
Resize the title area
{"description": "Resize title area.","specifier": {"role": "title"},"action": "modify","option": {"width": 250}}
View
Number of white men in the first cabinet of each president