2f:Ta9c,plot = addTooltips( Plot.plot({ width:1200, height:730, style: {backgroundColor:"transparent", fontFamily:"Domine"}, x: {label:null, domain:[-2.25, 2.25], ticks:false}, y: {label:null, domain:[-1.25,2.25], ticks:false}, facet: {data:nominees, y:"row_index", x:"column_index", label:null}, marks:[ //dot - create arc of votes, positional arguments included in data Plot.dot(votes, {x:"x",y:"y", r:6, title: d => d.senator + d.state + ' (' + d.party + ')\n' + d.original_vote, fy:"row_index", fx:"column_index", //if then logic for color mapping fill: d=> d.vote==="Yea" && d.party==="D" ? "#154FD6" : d.vote==="Yea" && d.party==="R" ? "#EB0000" : d.vote==="Yea" && d.party==="I" ? "grey" :"white", stroke: d=> d.party==="D" ? "#154FD6" : d.party==="R" ? "#EB0000" : "grey"}), //dot - used for image border Plot.dot(nominees, {fill:"black", y: d=> 0.15, x: d=> 0, r:32}), //image - SCOTUS nominee Plot.image(nominees, {x:0, y:0.15, src:"image", width:60}), //text - SCOTUS nominee Plot.text(nominees, {text:"nominee", y: d=> -0.65, x: d=> 0, fontSize:16, fontWeight:'bold'}), //text - nominating president Plot.text(nominees, {text: d=> 'Nominated by\n' + d.president + ' (' + d.president_party + ')', fill:'#666666',y: d=> -1.02, x: d=> 0, fontSize:11}), //text - aggregate Dem votes Plot.text(nominees, {text: d=> "Dem Yeas", y:-0.35, x:-1.5, fill:"#154FD6", fontSize:13, fontFamily:"Open Sans", fontWeight:'bold'}), Plot.text(nominees, {text: d=> Math.round((d.dem_yeas/d.total_dem)*100)+"%", y:-.725, x:-1.5, fill:"#154FD6", fontSize:20, fontWeight:'bold', fontFamily:"Open Sans"}), Plot.text(nominees, {text: d=> d.dem_yeas + '/' + d.total_dem, y:-1.1, x:-1.5, fill:"#154FD6", fontSize:13, fontFamily:"Open Sans"}), //text - aggregate Rep votes Plot.text(nominees, {text: d=> "Rep Yeas", y:-0.35, x:1.5, fill:"#EB0000", fontSize:13, fontFamily:"Open Sans", fontWeight:'bold'}), Plot.text(nominees, {text: d=> Math.round((d.rep_yeas/d.total_rep)*100)+"%", y:-.725, x:1.5, fill:"#EB0000", fontSize:20, fontWeight:'bold', fontFamily:"Open Sans"}), Plot.text(nominees, {text: d=> d.rep_yeas + '/' + d.total_rep, y:-1.1, x:1.5, fill:"#EB0000", fontSize:13, fontFamily:"Open Sans"}), ] }), {fill:"green", "stroke-width": "3px", stroke: "green"} )30:[{"id":"fc0384b012ea30ffdb7e7af0fd8e339938f77a237a39d5e6ce11b424da60ef21f1de5226f8d163fdbfa009624a21fb5ef19d603f5d6d44145ef759205bb9fa5a","href":"https://static.observableusercontent.com/files/fc0384b012ea30ffdb7e7af0fd8e339938f77a237a39d5e6ce11b424da60ef21f1de5226f8d163fdbfa009624a21fb5ef19d603f5d6d44145ef759205bb9fa5a","name":"scotus-nominee-votes.csv","type":"text/csv","lastModified":1684069819256.98,"size":87812},{"id":"90cfe8ed3a1d59d780ad90c79ed8f91f6a0d0afbb5520921b191a3346f58d91fd06fb03e0657dba1de90db4ad769f868868d8bc4159297198776f8574fe86110","href":"https://static.observableusercontent.com/files/90cfe8ed3a1d59d780ad90c79ed8f91f6a0d0afbb5520921b191a3346f58d91fd06fb03e0657dba1de90db4ad769f868868d8bc4159297198776f8574fe86110","name":"supreme-court-justices.jpeg","type":"image/jpeg","lastModified":1684071570301.989,"size":2557894},{"id":"64a1df20893d862d2979a0e9e607f80c2dfce0be2a0733c883edae7976cd81504cdc37b35c310755efb500938a656cb92e807da7276c9f8a2cf60b610108d43a","href":"https://static.observableusercontent.com/files/64a1df20893d862d2979a0e9e607f80c2dfce0be2a0733c883edae7976cd81504cdc37b35c310755efb500938a656cb92e807da7276c9f8a2cf60b610108d43a","name":"scotus-nominee-votes@1.csv","type":"text/csv","lastModified":1684088856517.712,"size":95108}] 2d:{"title":"Supreme Court Justice Nominations","cells":[{"id":61,"value":"# Supreme Court Justice Nominations\nObservable Plot recreation of a plot I created with R **ggplot2** and supporting ggplot2 libraries. Data scraped from the U.S. Senate gov website using rvest.\n\nSimilar to ggplot2, you can **facet** an Observable Plot. In this example, I'm using a facet to create a plot per Supreme Court Justice with their respective Senate Confirmation votes. \n
\n
","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"

U.S. Supreme Court Justice Confirmations

Justices of the United States Supreme Court are appointed by the President and confirmed by the Senate. The President nominates a candidate to fill a vacancy, after which the Senate Judiciary Committee holds hearings on the nominee. The committee then makes a recommendation to the full Senate, which holds a vote. A simple majority (51 of 100) is required to confirm a nominee. The graphic uses Senate Roll Call data to show the vote results for the last 12 appointed justices.

","pinned":false,"hidden":false,"mode":"html"},{"id":10,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"# Original for Comparison\nThe original plot was created in R with ggplot2, ggimage, and ggtext. Positional arguments for x and y were created with an additional package, ggparliament.","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"supremeCourtJustices = FileAttachment(\"supreme-court-justices.jpeg\").image()","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"# Tooltip\nImport tooltip feature from Mike Freeman's notebook. Observable expected to release its own tooltip feature soon.","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"import {addTooltips} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"# Data\nImport data from csv file. Data scraped from Senate gov website. Positional arguments created with R ggparliament.","pinned":false,"hidden":false,"mode":"md"},{"id":346,"value":"scotus_votes = await FileAttachment(\"scotus-nominee-votes@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"# SQL Queries\nUse SQL to create two new data sets: 1) clean the votes data to add some indexes for the facets (requires a mapping for x and y facet) and 2) create an aggregated data set at the justice level to tally votes for Dems and Reps.\n\n## Cleaned up Votes","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"select a. * ,\n case when a.nominee_index<5 then 1\n when a.nominee_index<9 then 2\n when a.nominee_index<13 then 3\n end as row_index\n ,case when a.nominee_index IN (1,5,9) then 1\n when a.nominee_index IN (2,6,10) then 2\n when a.nominee_index IN (3,7,11) then 3\n when a.nominee_index IN (4,8,12) then 4\n end as column_index\n ,'https://raw.github.com/tashapiro/supreme-court-justices/main/images/' || UPPER(nominee) || '.png' as image\n from\n (select s. * ,\n case when s.nominee = 'Souter' then 1\n when s.nominee='Thomas' then 2\n when s.nominee='Ginsburg' then 3\n when s.nominee='Breyer' then 4\n when s.nominee='Roberts' then 5\n when s.nominee='Alito' then 6\n when s.nominee='Kagan' then 7\n when s.nominee='Sotomayor' then 8\n when s.nominee='Gorsuch' then 9\n when s.nominee='Kavanaugh' then 10\n when s.nominee='Barrett' then 11\n when s.nominee = 'Jackson' then 12 end as nominee_index\nfrom scotus_votes s\n) a","pinned":true,"hidden":false,"mode":"sql","output":"votes","database":"var:scotus_votes"},{"id":379,"value":"## Aggregate Data at Justice Level","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"select \n nominee, column_index, row_index, image \n ,case \n when nominee IN ('Souter','Thomas') then 'George H.W. Bush'\n when nominee IN ('Ginsburg','Breyer') then 'Bill Clinton'\n when nominee IN ('Alito','Roberts') then 'George W. Bush'\n when nominee IN ('Kagan','Sotomayor') then 'Barack Obama'\n when nominee IN ('Gorsuch','Kavanaugh','Barrett') then 'Donald Trump'\n when nominee='Jackson' then 'Joe Biden' else '' end as president\n ,case when nominee IN ('Souter','Thomas','Alito','Roberts','Gorsuch','Kavanaugh','Barrett') then 'R'\n else 'D' end as president_party\n ,count(case when party='D' and vote='Yea' then senator end) as dem_yeas\n ,count(case when party='D' then senator end) as total_dem\n ,count(case when party='R' and vote='Yea' then senator end) as rep_yeas\n ,count(case when party='R' then senator end) as total_rep\n from votes\ngroup by 1,2,3,4","pinned":true,"hidden":false,"mode":"sql","output":"nominees","database":"var:votes"},{"id":314,"value":"# CSS\nApply additional stylings, including trick to hide facet labels.","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}