32:T450,chartActiveJudges = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, dms.width, dms.height]) .attr("width", dms.width) .attr("height", dms.height) .style("background", "white"); const chart = svg .append("g") .attr("transform", `translate(${dms.marginLeft} ${dms.marginTop})`); const barWidth = dms.chartWidth / dataGenderActiveSeries[0].length; const bars = chart .append("g") .selectAll("g") .data(dataGenderActiveSeries) .join("g") .attr("fill", d => color(d.key)) .attr("stroke", d => color(d.key)) .attr("stroke-width", 0.5) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => time(timeParserYear(d.data["Year"]))) .attr("y", d => percentage(d[0] * 100)) .attr("height", d => percentage(d[1] * 100 - d[0] * 100)) .attr("width", barWidth) .attr("transform", `translate(${-barWidth} 0)`); // Axes: const axisLeft = d3.axisLeft(percentage).ticks(5); const axisTop = d3.axisTop(time); chart.append("g").call(axisLeft); chart.append("g").call(axisTop); return svg.node(); }33:T49a,chartConfirmations = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, dms.width, dms.height]) .attr("width", dms.width) .attr("height", dms.height) .style("background", "white"); const chart = svg .append("g") .attr("transform", `translate(${dms.marginLeft} ${dms.marginTop})`); const barWidth = dms.chartWidth / dataGenderConfirmationsSeries[0].length; const bars = chart .append("g") .selectAll("g") .data(dataGenderConfirmationsSeries) .join("g") .attr("fill", d => color(d.key)) .attr("stroke", d => color(d.key)) .attr("stroke-width", 0.5) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => timeZoomed(timeParserYear(d.data["Year"]))) .attr("y", d => judges(d[1])) .attr("height", d => judges(d[0]) - judges(d[1])) .attr("width", barWidth) .attr("transform", `translate(${-barWidth} 0)`); // Axes: const axisLeft = d3.axisLeft(judges); const axisBottom = d3.axisBottom(timeZoomed); chart.append("g").call(axisLeft); chart .append("g") .call(axisBottom) .attr("transform", `translate(0 ${dms.chartHeight})`); return svg.node(); }34:T4f3,chartConfirmationsRatio = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, dms.width, dms.height]) .attr("width", dms.width) .attr("height", dms.height) .style("background", "white"); const chart = svg .append("g") .attr("transform", `translate(${dms.marginLeft} ${dms.marginTop})`); const barWidth = dms.chartWidth / dataGenderConfirmationsSeriesProportional[0].length; const bars = chart .append("g") .selectAll("g") .data(dataGenderConfirmationsSeriesProportional) .join("g") .attr("fill", d => color(d.key)) .attr("stroke", d => color(d.key)) .attr("stroke-width", 0.5) .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => timeZoomed(timeParserYear(d.data["Year"]))) .attr("y", d => percentage(d[0] * 100)) .attr("height", d => percentage(d[1] * 100 - d[0] * 100)) .attr("width", barWidth) .attr("transform", `translate(${-barWidth} 0)`); // Axes: const axisLeft = d3.axisLeft(percentage).ticks(3); const axisTop = d3.axisTop(timeZoomed); chart.append("g").call(axisLeft); chart.append("g").call(axisTop); chart .append("path") .attr("d", annotationH(percentage(50))) .attr("stroke", "#fff"); return svg.node(); }35:T961,data = { const attachment = await FileAttachment("judges.csv").text(); const dataRaw = d3.csvParse(attachment); // Filter out judges that were never confirmed by the Senate const dataFilteredConfirmationDate = dataRaw.filter( d => d["Confirmation Date (1)"].length != 0 ); // Add "terms" object to each judge const dataProcessed = dataFilteredConfirmationDate.map(d => { const terms = []; for (let i = 1; i <= 6; i++) { let termSingle = {}; if (d[`Court Type (${i})`].length > 0) { termSingle["CourtType"] = d[`Court Type (${i})`]; termSingle["CourtName"] = d[`Court Name (${i})`]; termSingle["President"] = d[`Appointing President (${i})`]; termSingle["Party"] = d[`Party of Appointing President (${i})`]; termSingle["ConfirmationYear"] = d[`Confirmation Date (${i})`].length > 0 ? timeFormatterYear(timeParserDate(d[`Confirmation Date (${i})`])) : ""; termSingle["TerminationYear"] = d[`Termination Date (${i})`].length > 0 ? timeFormatterYear(timeParserDate(d[`Termination Date (${i})`])) : d[`Termination Date (${i})`].length <= 0 && d[`Senior Status Date (${i})`].length > 0 ? timeFormatterYear(timeParserDate(d[`Senior Status Date (${i})`])) : ""; if (d[`Confirmation Date (${i})`].length) { termSingle["ConfirmationDate"] = timeParserDate( d[`Confirmation Date (${i})`] ); } terms.push(termSingle); } } d["TermsServed"] = terms; return { NID: d["nid"], Name: nameFormatter( d["First Name"], d["Middle Name"], d["Last Name"], d["Suffix"] ), NameParts: { NameFirst: d["First Name"], NameMiddle: d["Middle Name"], NameLast: d["Last Name"], NameSuffix: d["Suffix"] }, Gender: d["Gender"], Race: d["Race or Ethnicity"], Terms: d["TermsServed"], FirstYear: +d["TermsServed"][0]["ConfirmationYear"], LastYear: d["TermsServed"][d["TermsServed"].length - 1]["TerminationYear"] .length > 0 ? +d["TermsServed"][d["TermsServed"].length - 1]["TerminationYear"] : 2020 }; }); return dataProcessed; // return dataProcessed.filter(d => +d["FirstYear"] >= 1900); }36:[{"id":"39db5c5059565bc711106d8da6317d6a8f6227cf5de180c9173bc16a3690c10b40706f485dcf05c3fb0a7f227c507afa3835ffb2134984da044a48bfb51be8e8","href":"https://static.observableusercontent.com/files/39db5c5059565bc711106d8da6317d6a8f6227cf5de180c9173bc16a3690c10b40706f485dcf05c3fb0a7f227c507afa3835ffb2134984da044a48bfb51be8e8","name":"annotations@3.csv","type":"text/csv","lastModified":1600714035820.406,"size":538},{"id":"a6bddc7a88c045acd223de9b6d7af990990ca69003fa555a1ae09738ba93ce6467e462f7bb6e35e67f32ea8f669951006627c65e0326a2fe71f2e6275f52d42d","href":"https://static.observableusercontent.com/files/a6bddc7a88c045acd223de9b6d7af990990ca69003fa555a1ae09738ba93ce6467e462f7bb6e35e67f32ea8f669951006627c65e0326a2fe71f2e6275f52d42d","name":"annotations@1.csv","type":"text/csv","lastModified":1600618309085.123,"size":349},{"id":"a7b62ad72a6f74e455a1d36439be00295b76141dd862c948a48c851e24d46969c047bce8961cf46c5bb9eee0fcc8cee621383361d3ec09b89bdf464714207d7d","href":"https://static.observableusercontent.com/files/a7b62ad72a6f74e455a1d36439be00295b76141dd862c948a48c851e24d46969c047bce8961cf46c5bb9eee0fcc8cee621383361d3ec09b89bdf464714207d7d","name":"all_judges@1.csv","type":"text/csv","lastModified":1600487417507.023,"size":1242103},{"id":"24688a1dbda0d67731d0d0d730870a6d57a776c09f9aeb00a0ec800f4dc7c76c740caeadfd850154b447b6311914643a56321a23800af5dfe7b4b4310ead90a5","href":"https://static.observableusercontent.com/files/24688a1dbda0d67731d0d0d730870a6d57a776c09f9aeb00a0ec800f4dc7c76c740caeadfd850154b447b6311914643a56321a23800af5dfe7b4b4310ead90a5","name":"judges.csv","type":"text/csv","lastModified":1600657976847.768,"size":5004956},{"id":"60ddf73bef2eea358e4f5a2cae94d1f79bd10d71c39b09f723fcc684906f6c7374c534bc4305b492f54c78bc607a73f1e031d5fa1705358eb28ba2ddf38ad7bf","href":"https://static.observableusercontent.com/files/60ddf73bef2eea358e4f5a2cae94d1f79bd10d71c39b09f723fcc684906f6c7374c534bc4305b492f54c78bc607a73f1e031d5fa1705358eb28ba2ddf38ad7bf","name":"demographics.csv","type":"text/csv","lastModified":1600528320682.47,"size":454219},{"id":"126f27c28ccacafe362716cd98df2a91f178c5a0c47d2afae6894616bc3e7ef4cd67534522ef8afeee43f6fcc4851749111294a1149a11f467c2acda8ead0ddc","href":"https://static.observableusercontent.com/files/126f27c28ccacafe362716cd98df2a91f178c5a0c47d2afae6894616bc3e7ef4cd67534522ef8afeee43f6fcc4851749111294a1149a11f467c2acda8ead0ddc","name":"annotations@2.csv","type":"text/csv","lastModified":1600711288452.928,"size":327},{"id":"2760463f2351c8193b94567ad24ac4616734b49bbdbd20a4d3da3cb858eb5ded9512932272821400c2119d387cddd62526ed69e4accc5f3fa3de6042b8c44764","href":"https://static.observableusercontent.com/files/2760463f2351c8193b94567ad24ac4616734b49bbdbd20a4d3da3cb858eb5ded9512932272821400c2119d387cddd62526ed69e4accc5f3fa3de6042b8c44764","name":"annotations.csv","type":"text/csv","lastModified":1600615896474.892,"size":217},{"id":"c46a3576ceaf2feef6a0cb82de82edd4ceffaf23b6db31e7aa25fbd62a27c506a521607668bb93e9adbb9f379c4bd6bdf622fac4677d763dee1fa4d0e398d6d8","href":"https://static.observableusercontent.com/files/c46a3576ceaf2feef6a0cb82de82edd4ceffaf23b6db31e7aa25fbd62a27c506a521607668bb93e9adbb9f379c4bd6bdf622fac4677d763dee1fa4d0e398d6d8","name":"federal-judicial-service.csv","type":"text/csv","lastModified":1600531611793.763,"size":1527636}] 30:{"title":"How the U.S. judicial system's gender distribution has changed over time","cells":[{"id":0,"value":"md`# How the U.S. judicial system's gender distribution has changed over time`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`This project examines how the proportion of male to female federal judges has changed in the U.S. over the last century. You can read the full article in The Post [here](https://www.washingtonpost.com/politics/2020/09/21/female-judges-were-rarity-when-ruth-bader-ginsburg-was-born-they-still-are/?arc404=true), what follows is an excerpt from the published story:\n\n> *It took U.S. presidents almost a century and a half to appoint a female federal judge. In 1928, 139 years after the Judiciary Act of 1789 established the court system and five years before Ruth Bader Ginsburg was born, President Calvin Coolidge appointed Genevieve Rose Cline to the U.S. Customs Court.*\n\n> *For over 50 years after Cline’s historic appointment, women still occupied less than 5 percent of all federal judgeships, according to the Federal Judicial Center. Another 35 years passed until a quarter of all federal judges were women — still a small minority.*\n\nUse the slider below to adjust when the charts start:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"viewof startingYear = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":830,"value":"md`The following chart shows the gender distribution across all male and female federal judges per year since **${startingYear}**. There are no federal judges identifying as a non-binary gender yet. It's useful because it gives a snapshot of the judiciary as a whole at any point in time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":824,"value":"md`This next chart shows total male and female federal judges *newly* confirmed each year since **${startingYear}**. It's helpful because it shows how the number of confirmed judges fluctuate over time. Some of the increases in women being confirmed are already record years for the number of new judges.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"md`And finally, the chart above shows the *ratio* of male to female federal judges confirmed each year since **${startingYear}**. This chart clearly shows the only two years when more women were confirmed to federal judgeships than men: 2008 and 2009.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`*Article III judge biographical data from the [Federal Judicial Center](https://www.fjc.gov/history/judges/biographical-directory-article-iii-federal-judges-export), last updated on Sep. 20, 2020*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`\n---\n## Configuring graphic container(s)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"dms = {\n let dimensions = {\n width: width,\n height: width * 0.6,\n marginTop: 50,\n marginLeft: 50\n };\n\n dimensions.marginBottom = dimensions.marginTop;\n dimensions.marginRight = dimensions.marginLeft;\n\n dimensions.chartWidth =\n dimensions.width - dimensions.marginLeft - dimensions.marginRight;\n dimensions.chartHeight =\n dimensions.height - dimensions.marginTop - dimensions.marginBottom;\n\n return dimensions;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"md`## Dealing with dates and names`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"timeParserYear = d3.timeParse(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":291,"value":"timeFormatterYear = d3.timeFormat(\"%Y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"timeParserDate = function(string) {\n if (string.includes(\"/\")) {\n return d3.timeParse(\"%m/%d/%Y\")(string);\n } else if (string.includes(\"-\")) {\n return d3.timeParse(\"%Y-%m-%d\")(string);\n } else {\n throw `Here's how your date is formatted: ${\n string.length > 0 ? string : \"IT'S BLANK 😭\"\n }. Good luck with that, my dude.`;\n // return undefined;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1057,"value":"timeParserDate(\"\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":759,"value":"nameFormatter = function(first, middle, last, suffix) {\n let name = \"\";\n\n first != \" \" && first.length > 0 ? (name = name + first) : (name = name);\n middle != \" \" && middle.length > 0\n ? (name = name + \" \" + middle)\n : (name = name);\n last != \" \" && last.length > 0 ? (name = name + \" \" + last) : (name = name);\n suffix != \" \" && suffix.length > 0\n ? (name = name + \" \" + suffix)\n : (name = name);\n\n return name;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"md`## Loading and transforming data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":995,"value":"md`Here up top, I put some useful datasets for transforming or annotating the larger, primary dataset:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"crosswalk = {\n const attachment = await FileAttachment(\"demographics.csv\").text();\n\n return d3.csvParse(attachment);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"annotations = {\n const attachment = await FileAttachment(\"annotations@3.csv\").text();\n\n return d3.csvParse(attachment);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"years = d3.range(startingYear, 2021)","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"md`The following data originally came from the Federal Judicial Center. I took this flat CSV and created a more easily traversible nested dataset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1230,"value":"data.filter((f) => {\n const str = f.Name;\n return str.search(\"Hastie\") >= 0;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"data.find(\n d =>\n d[\"NameParts\"][\"NameLast\"] == \"Roberts\" &&\n d[\"NameParts\"][\"NameFirst\"] == \"John\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"md`First, I created a dataset that listed which judges were active each year, based on their confirmation date for their first court appointment and their termination date for their final court appointment.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"dataGenderActive = {\n const activeJudgesPerYear = [];\n\n years.forEach(year => {\n data.forEach(judge => {\n if (judge[\"FirstYear\"] <= year && year <= judge[\"LastYear\"]) {\n let tempObj = { NID: \"\", Name: \"\", Year: year, Gender: \"\" };\n\n tempObj[\"NID\"] = judge[\"NID\"];\n tempObj[\"Name\"] = judge[\"Name\"];\n tempObj[\"Gender\"] = judge[\"Gender\"];\n\n activeJudgesPerYear.push(tempObj);\n }\n });\n });\n\n return d3.group(activeJudgesPerYear, d => d[\"Year\"], d => d[\"Gender\"]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":970,"value":"dataGenderActiveProcessor = function(data) {\n return Array.from(data, ([key, values]) => {\n let obj = Object.fromEntries(values.entries());\n\n obj.Male = obj[\"Male\"] === undefined ? 0 : obj[\"Male\"].length;\n obj.Female = obj[\"Female\"] === undefined ? 0 : obj[\"Female\"].length;\n obj.Year = key;\n\n return obj;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":974,"value":"dataGenderActiveSeries = {\n const stack = d3\n .stack()\n .keys([\"Male\", \"Female\"])\n .order(d3.stackOrderReverse)\n .offset(d3.stackOffsetExpand);\n\n return stack(dataGenderActiveProcessor(dataGenderActive));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":989,"value":"md`Then, I created a dataset that arranged each judge into the year of their first confirmation. That way, I could see how the government's federal judge appointment behavior shifted over time.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"dataGenderConfirmations = {\n return d3.group(\n data\n .filter(d => +d[\"FirstYear\"] >= startingYear)\n .sort((a, b) => d3.ascending(a[\"FirstYear\"], b[\"FirstYear\"])),\n d => d[\"FirstYear\"],\n d => d[\"Gender\"]\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"dataGenderConfirmationsProcessor = function(data) {\n return Array.from(data, ([key, values]) => {\n let obj = Object.fromEntries(values.entries());\n\n obj.Male = obj[\"Male\"] === undefined ? 0 : obj[\"Male\"].length;\n obj.Female = obj[\"Female\"] === undefined ? 0 : obj[\"Female\"].length;\n obj.Year = key;\n\n return obj;\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"dataGenderConfirmationsSeries = {\n const stack = d3\n .stack()\n .keys([\"Male\", \"Female\"])\n .order(d3.stackOrderReverse)\n .offset(d3.stackOffsetNone);\n\n return stack(dataGenderConfirmationsProcessor(dataGenderConfirmations));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":903,"value":"dataGenderConfirmationsSeriesProportional = {\n const stack = d3\n .stack()\n .keys([\"Male\", \"Female\"])\n .order(d3.stackOrderReverse)\n .offset(d3.stackOffsetExpand);\n\n return stack(dataGenderConfirmationsProcessor(dataGenderConfirmations));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Creating scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"time = d3\n .scaleTime()\n // .domain([timeParserYear(1789 - 1), timeParserYear(\"2020\")])\n .domain([timeParserYear(startingYear - 1), timeParserYear(2020)])\n // .domain([timeParserYear(2008 - 1), timeParserYear(2020)])\n .range([0, dms.chartWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1007,"value":"timeZoomed = d3\n .scaleTime()\n .domain([timeParserYear(startingYear - 1), timeParserYear(2020)])\n .range([0, dms.chartWidth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"judges = d3\n .scaleLinear()\n .domain([0, 150])\n .range([dms.chartHeight, 0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"percentage = d3\n .scaleLinear()\n .domain([0, 100])\n .range([0, dms.chartHeight])","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"color = d3\n .scaleOrdinal()\n .domain([\"Male\", \"Female\"])\n .range([\"#d6d6d6\", \"#ff5e63\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`## Making reusable visual elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"area = d3\n .area()\n .x(d => time(timeParserYear(d.data.Year)))\n .y0(d => percentage(d[0]))\n .y1(d => percentage(d[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"annotationV = function(x) {\n return `M ${\n x + 0.5 /* 👈 Adding the stroke width of the annotation line here*/\n } ${-10 /* 👈 Adding the offset above the chart here*/} v ${dms.chartHeight +\n 10}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":920,"value":"annotationH = function(y) {\n return `M 0 ${y + 0.5} h ${dms.chartWidth}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\n---\n## Libraries and packages`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"commafy = function(str) {\n return str.toString().replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}