31:T764,chartMap = { const mapWidth = 960; const mapHeight = 620; const projection = d3.geoAlbersUsa().scale(1150).translate([mapWidth/2, mapHeight/2]) const path = d3.geoPath().projection(projection) const translate = (coords) => { const [x, y] = projection([+coords.longitude, +coords.latitude]) return `translate(${x},${y})` } const svg = d3.create("svg") .attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`) .style("width", "100%") .style("height", "auto") .style('background-color', null) const states = svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.states).features) .join("path") .attr("fill", "#e7e4ea") .attr("stroke", "#f9faff") .attr("stroke-linejoin", "round") .attr("d", path); const bubbles = svg.append("g") .attr("fill-opacity", 0.8) .selectAll("circles") .data(data) .join("circle") .attr("fill", "#e6C4ff") .attr("stroke", "slateblue") .attr("stroke-width", 1) .attr("transform", translate) .attr("r", 5) .on('mouseover', function (e, d, i) { tooltip .html( `

${d.mansion}

${d.address}, ${d.city}, ${d.fullname} ${d.zip}

`) .style('visibility', 'visible'); d3.select(this).attr('stroke-width', 10) .attr("fill", "slateblue") .attr("fill-opacity", 1); }) .on('mousemove', function (e) { tooltip .style('top', e.pageY + 10 + 'px') .style('left', e.pageX + 10 + 'px'); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition() .attr('stroke-width', 1) .attr("fill", "#e6C4ff") .attr("fill-opacity", 0.8); }); return svg.node(); }32:T5c0,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, barChartWidth, barChartHeight - 30]); svg.append("text") .attr("x", barChartWidth/2) .attr("y", 60) .attr("text-anchor", "middle") .text("U.S. Governor's Mansions Ordered from Largest to Smallest") .style("font-family", "Roboto Condensed") .style("font-weight", "400") .style("font-size", "16px"); svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", (d,i) => x(i)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()) .attr("stroke", "slateblue") .attr("stroke-width", "0.5px") .attr("fill","#e0ceed") .on("mouseover", function (e, d, i) { tooltip .html( `

${d.fullname}

${d.value.toLocaleString('en-us')} sqft

`) .style('visibility', 'visible'); d3.select(this).attr("fill", "slateblue"); }) .on('mousemove', function (e) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on("mouseout", function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("fill", "#e0ceed"); }); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }33:T9c9,chart2 = { const svg = d3.create("svg") .attr("viewBox", [0, 0, 700, 440]); svg.append("rect") .attr("x", 170) .attr("y", 40) .attr("fill", "#ffffff") .attr("stroke", "#666") .attr("stroke-width", "0.6px") .style("stroke-dasharray", ("4, 3")) .attr("height", d => planY(0) -planY(55000)) .attr("width", d => planY(0) -planY(55000)) svg.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", 170) .attr("y", 40) .attr("fill", "#e0ceed") .attr("stroke", "slateblue") .attr("stroke-width", "0.5px") .attr("height", d => planY(0) -planY(d.value)) .attr("width", d => planY(0) -planY(d.value)) .on('mouseover', function (e, d, i) { tooltip .html( `

${d.fullname}

${d.value.toLocaleString('en-us')} sqft

`) .style('visibility', 'visible'); d3.select(this).attr('fill', 'slateblue'); }) .on('mousemove', function (e) { tooltip .style('top', e.pageY + 10 + 'px') .style('left', e.pageX + 10 + 'px'); }) .on('mouseout', function () { tooltip.html(``).style('visibility', 'hidden'); d3.select(this).transition().attr("fill", "#e0ceed"); }); svg.append("text") .attr("x", 160) .attr("y", 55) .attr("text-anchor", "end") .text("Delaware") .style("font-family", "Roboto Condensed") .style("font-weight", "400") .style("font-size", "10px"); svg.append("text") .attr("x", 160) .attr("y", 300) .attr("text-anchor", "end") .text("Illinois") .style("font-family", "Roboto Condensed") .style("font-weight", "400") .style("font-size", "10px"); svg.append("text") .attr("x", 160) .attr("y", 380) .attr("text-anchor", "end") .text("The White House") .style("font-family", "Roboto Condensed") .style("font-weight", "400") .style("font-size", "10px"); svg.append("line") .attr("x1", 165) .attr("x2", 182) .attr("y1", 53) .attr("y2", 53) .style("stroke", "#000") .style("stroke-width", 0.5) svg.append("line") .attr("x1", 165) .attr("x2", 182) .attr("y1", 297) .attr("y2", 297) .style("stroke", "#000") .style("stroke-width", 0.5) svg.append("line") .attr("x1", 165) .attr("x2", 182) .attr("y1", 377) .attr("y2", 377) .style("stroke", "#000") .style("stroke-width", 0.5) return svg.node(); }34:T9b9,{ const w = 900 const h = 300 const halfBarHeight = barHeight / 2 const svg = d3.create("svg") .attr("viewBox", [-50, 50, 1200, 340]); const xScale = d3.scaleLinear() .domain([0, totalSqFt]) .range([0, w]) svg.append("g") .selectAll("rect") .data(groupData) .enter().append("rect") .attr("x", d => xScale(d.cumulative)) .attr("y", h / 2 - halfBarHeight + 30) .attr("height", barHeight) .attr("width", d => xScale(d.value)) .style("fill", "#e0ceed") .style("stroke", "slateblue") .on("mouseover", function (e, d, i) { tooltip .html( `

${d.fullname}

${d.value.toLocaleString("en-us")} sqft

`) .style("visibility", "visible"); d3.select(this).attr("fill", "slateblue"); }) .on("mousemove", function (e) { tooltip .style("top", e.pageY + 10 + "px") .style("left", e.pageX + 10 + "px"); }) .on('mouseout', function () { tooltip.html(``).style("visibility", "hidden"); d3.select(this).transition().attr("fill", "#e0ceed"); }); svg.append("text") .attr("x", xScale(totalSqFt) + 15) .attr("y", 175) .text("U.S. Governors' Mansions") .attr("font-family", "Roboto Condensed") .attr("font-weight", "700") svg.append("text") .attr("x", xScale(totalSqFt) + 15) .attr("y", 195) .text(totalSqFt.toLocaleString('en-us') + " sqft") .attr("font-family", "Roboto Condensed") //compared to versailles svg.append("rect") .attr("x", 0) .attr("y", 240) .attr("fill", "lightgrey") .attr("stroke", "#666") .attr("stroke-width", "0.5px") .attr("height", barHeight) .attr("width", xScale(679784)) svg.append("text") .attr("x", xScale(679784) + 15) .attr("y", 275) .text("Versailles") .attr("font-family", "Roboto Condensed") .attr("font-weight", "700") svg.append("text") .attr("x", xScale(679784) + 15) .attr("y", 295) .text("679,784 sqft") .attr("font-family", "Roboto Condensed") svg.append("text") .attr("x", w/2 + 60) .attr("y", 100) .attr("text-anchor", "middle") .text("Versailles is Not Large Enough for Our Governors") .style("font-family", "Roboto Condensed") .style("font-weight", "400") .style("font-size", "21px"); return svg.node() }35:Tb3e,comparisonChart = { const compareWidth = 900 const compareHeight = 300 const compareBarWidth = 180 const compareXLabelPosition = 325 const svg = d3.create("svg") .attr("viewBox", [0, -90, 900, 445]); const compareScale = d3.scaleLinear() .domain([0, d3.max(dataState, d => d.value)]).nice() .range([compareHeight, 0]) svg.append("g") .selectAll("rect") .data(dataState) .enter().append("rect") .attr("x", 100) .attr("y", (d) => compareScale(d.value)) .attr("height", (d) => compareScale(0) - compareScale(d.value)) .attr("width", compareBarWidth) .style("fill", "#e0ceed") .style("stroke", "slateblue"); svg.append("text") .data(dataState) .attr("x", 100 + compareBarWidth / 2 ) .attr("y", (d) => compareScale(d.totalValue) - 10) .text((d) => d.totalValue.toLocaleString('en-us') + " sqft") .attr("text-anchor", "middle") .attr("font-family", "Roboto Condensed") .attr("font-size", "14px"); svg.append("g") .selectAll("rect") .data(dataState) .enter().append("rect") .attr("x", 110 + compareBarWidth) .attr("y", d => compareScale(d.state_med_size)) .attr("height", d => compareScale(0) - compareScale(d.state_med_size)) .attr("width", compareBarWidth) .style("fill", "lightgrey") .style("stroke", "grey"); svg.append("text") .data(dataState) .attr("x", 110 + compareBarWidth * 1.5) .attr("y", (d) => compareScale(d.state_med_size) - 10) .text((d) => d.state_med_size.toLocaleString('en-us') + " sqft") .attr("text-anchor", "middle") .attr("font-family", "Roboto Condensed") .attr("font-size", "14px"); //x axis svg.append("text") .data(dataState) .attr("x", 100 + compareBarWidth / 2) .attr("y", compareXLabelPosition) .text("Governor's Mansion") .attr("text-anchor", "middle") .attr("font-family", "Roboto Condensed") .attr("font-size", "14px"); svg.append("text") .data(dataState) .attr("x", 110 + compareBarWidth * 1.5) .attr("y", compareXLabelPosition) .text((d) => "Median Home Size (" + d.name + ")") .attr("text-anchor", "middle") .attr("font-family", "Roboto Condensed") .attr("font-size", "14px"); svg.append("line") .attr("x1", 80) .attr("x2", 480) .attr("y1", compareXLabelPosition - 25) .attr("y2", compareXLabelPosition - 25) .style("stroke", "#000") .style("stroke-width", 1); //captions svg.append("text") .data(dataState) .attr("x", 280) .attr("y", -55) .text((d) => "The governor's mansion is " + Math.round((d.value / d.state_med_size)) + " times larger than a typical home in " + d.fullname) .attr("text-anchor", "middle") .attr("font-family", "Roboto") .attr("font-size", "15px"); return svg.node() }36:[{"id":"37218c7fb81224f8d888409d5c72ef5114d8dcbe977dc6ec2335633095cfff57a21de49e936d601824b634f034caf973e9298a56c2515c17b369f70b13d93941","href":"https://static.observableusercontent.com/files/37218c7fb81224f8d888409d5c72ef5114d8dcbe977dc6ec2335633095cfff57a21de49e936d601824b634f034caf973e9298a56c2515c17b369f70b13d93941","name":"us-gov-mansions.csv","type":"text/csv","lastModified":1644773751994.243,"size":8782}] 2f:{"title":"Where is the largest governor's mansion?","cells":[{"id":0,"value":"md`# Where is the largest governor's mansion?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"Source: Homeland Infrastructure Foundation-Level Data (HIFLD): [[1]](https://hifld-geoplatform.opendata.arcgis.com/datasets/geoplatform::governors-mansions/about)","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"dataAll = Object.assign(d3.csvParse(await FileAttachment(\"us-gov-mansions.csv\").text(), ({STATE, STATE_ABBR, NAME, ADDRESS, CITY, ZIP, SQ_FT, TOTAL_SQ_FT, LONGITUDE, LATITUDE, IN_USE, STATE_MEDIAN_RESIDENCE_PRICE_2021, STATE_MEDIAN_RESIDENCE_SIZE_2021}) => ({name: STATE_ABBR, fullname: STATE, mansion: NAME, address: ADDRESS, city: CITY, zip: ZIP, value: +SQ_FT, totalValue: +TOTAL_SQ_FT, longitude: +LONGITUDE, latitude: +LATITUDE, active: +IN_USE, state_med_price: STATE_MEDIAN_RESIDENCE_PRICE_2021, state_med_size: STATE_MEDIAN_RESIDENCE_SIZE_2021})).sort((a, b) => d3.descending(a.value, b.value)), {format: ',r', y:'label'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1277,"value":"data = dataAll.filter((d) => d.active > 0 )","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"### Wait a minute, governors have mansions?\nYes, and the mansions tend to be funded by taxes. Alabama, Michigan, New Jersey, and North Carolina maintain two residences for the governor (including beach houses). Only five states do not have them: Arizona, Idaho, Massachusetts, Vermont, and Rhode Island. So, which state claims the title of the largest official residence?","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"### The Corn Castle\nThe beautiful farming kingdom of Illinois hosts the largest governor's mansion in the United States at a bombastic 50,000 square feet. For over a century, the governor of Illinois resided in a humble shack of only 18,000 square feet. But in 1970, renovations more than doubled that size: [[2]](https://fox2now.com/news/tour-the-restoration-effort-at-the-illinois-governors-mansion/). Today, the $5.4 million Illinois Governor's Mansion is about 40% more massive than the second largest estate, which is located in Annapolis.\n","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"### Just how much real estate are we talking about here?\nLet's plot the mansions on the same \"parcel\" of land for a more intuitive look at their size. Here, it seems that the smallest mansion, Delaware, could provide a bathroom the size of a multi-family inside the sprawling residence in Springfield, Illinois. \n

For reference, the White House is about 55,000 square feet.

","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":715,"value":"### The American Palace\nNow, imagine a neighborhood where these mansions are built next to one another. The combined square footage of this very exclusive boulevard is just shy of Versailles [[3]](https://en.wikipedia.org/wiki/Palace_of_Versailles)! In other words, taxpayers across America maintain real estate that rivals (in size) one of the largest palaces in the world.","pinned":false,"hidden":false,"mode":"md"},{"id":571,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1363,"value":"### How do governor's mansions compare to average American homes?\nThe absurdity of governor's living in taxpaid estates is best understood on a state-by-state basis, where the average home size varies. So, just how much bigger is the governor's mansion than the average household in your state and the nation?","pinned":false,"hidden":false,"mode":"md"},{"id":1367,"value":"viewof selectedState = Inputs.select(stateList, {value: \"Illinois\", label: \"Select a state\"});","pinned":false,"hidden":false,"mode":"ojs"},{"id":1836,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"#### bar-chart","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, barChartWidth - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([barChartHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0, ${barChartHeight - margin.bottom})`)\n .call(d3.axisBottom(x).tickFormat(i => data[i].name).tickSizeOuter(0))\n .attr(\"font-size\", \"9px\")\n .selectAll(\"text\")\n .attr(\"y\", 7)\n .attr(\"x\", 6)\n .attr(\"dy\", \".35em\")\n .attr(\"transform\", \"rotate(40)\")\n .style(\"text-anchor\", \"start\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).ticks(null, data.format).tickSize(0))\n .attr(\"font-size\", \"11px\")\n .attr(\"font-family\", \"Roboto Condensed\")\n .select(\".domain\").remove()","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"barChartHeight = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1112,"value":"barChartWidth = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"margin = ({top: 90, right: 50, bottom: 90, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"#### plan-view","pinned":false,"hidden":false,"mode":"md"},{"id":1200,"value":"planWidth = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"planHeight = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"planX = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, planWidth - margin.right])\n .padding(0.1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"planY = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.value)]).nice()\n .range([planHeight - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"#### pillar","pinned":false,"hidden":false,"mode":"md"},{"id":578,"value":"totalSqFt = d3.sum(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1147,"value":"barHeight = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"groupData = {\n const percent = d3.scaleLinear()\n .domain([0, totalSqFt])\n .range([0, 100])\n let cumulative = 0\n const _data = data.map(d => {\n cumulative += d.value\n return {\n value: d.value,\n cumulative: cumulative - d.value,\n fullname: d.fullname,\n name: d.name,\n percent: percent(d.value)\n }\n }).filter(d => d.value > 0)\n return _data\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"#### map","pinned":false,"hidden":false,"mode":"md"},{"id":799,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":823,"value":"us = d3.json('https://raw.githubusercontent.com/zlonko/bored-ers/main/usa-states/us-states-topo.json')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1702,"value":"#### compare","pinned":false,"hidden":false,"mode":"md"},{"id":1375,"value":"stateList = _.sortBy(_.keys(_.countBy(data, (d) => d.fullname)),_.identity);","pinned":false,"hidden":false,"mode":"ojs"},{"id":1432,"value":"dataState = data.filter((d) => d.fullname == selectedState)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1180,"value":"#### tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"tooltip = d3\n .select('body')\n .append('div')\n .style('position', 'absolute')\n .style('z-index', '999')\n .style('visibility', 'hidden')\n .style('padding', '10px')\n .style('background', 'rgba(25,25,25,0.7)')\n .style('color', '#fff')\n .style(\"font-family\",\"Roboto\")\n .style(\"font-weight\",\"400\")\n .style(\"font-size\",\"14px\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":1315,"value":"#### style","pinned":false,"hidden":false,"mode":"md"},{"id":1318,"value":"color = [{\n activePrimary: \"slateblue\",\n activeSecondary: \"#ccc\",\n inactivePrimary: \"grey\",\n inactiveSecondary: \"#ccc\",\n}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1161,"value":"#### d3","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1517,"value":"html ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"style = html ``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}