2c:null 2d:["$","title",null,{"children":"NYS Board of Elections | Center for Community Media | Observable"}] 32:T14cf,chart = { // set dimensions const dimensions = { width: 400, height: 450 }; // canvas const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); const canvas = html`

${svg.node()}

`; const bubblesSVG = svg .append("g") .attr( "transform", `translate(${dimensions.width / 2},${dimensions.height / 2})` ); // color palette const colorScale = d3 .scaleOrdinal() .domain([ "Community media", "Traditional media", "Unspecified traditional media", "Unspecified digital media", "Unspecified media placements/buys", "Social media and tech", "Ad serving/targeting companies", "Sports and live events marketing" ]) .range([ "#F2BE22", "#4489E3", "#57C9FA", "#b298dc", "#bdbdbd", "#FF7D5E", "#FFB26B", "#A8DF8E" ]); // establish radius of bubbles const radiusScale = d3 .scaleSqrt() .domain([0, d3.max(data, (d) => d.category_total)]) .range([1, 125]); // bubble force const simulation = d3 .forceSimulation() .force("x", d3.forceX().strength(0.1)) .force("y", d3.forceY().strength(0.1)) .force( "collide", d3.forceCollide((d) => radiusScale(d.category_total) + 2) // space btwn circles ); // Draw bubbles const bubbles = bubblesSVG .selectAll("circle") .data(data) .join("circle") .attr("r", (d) => radiusScale(d.category_total)) .attr("fill", (d) => colorScale(d.category)) .attr("stroke", (d) => newShade(colorScale(d.category), -50)) .attr("stroke-width", "1.1"); // Text: Pct labels const pctLabels = bubblesSVG .selectAll("text") .data(data) .join("text") .attr("class", "labels") .attr("text-anchor", "middle") .text((d) => d.category === "Community media" ? `${d3.format(",.1~f")(d.pct)}%` : `${d3.format(",.1~f")(d.pct)}%` ) .attr("dy", (d) => d.category === "Community media" ? "-0.25em" : "-0.25em" ) .style("font-size", (d) => d.category === "Community media" || d.category === "Sports and live events marketing" ? "1.5rem" : "1.5rem" ) .style("font-weight", (d) => d.category === "Community media" ? "700" : "500" ) .style("fill", (d) => d.category === "Community media" ? "#333333" : "#333333" ); // Text: Category labels const catLabels = pctLabels .append("tspan") .attr("x", 0) .attr("dy", (d) => (d.category === "Community media" ? "0.65em" : "0.75em")) .text((d) => d.category.match( /Community media|Traditional media|Unspecified traditional media|Social media and tech|Ad serving\/targeting companies|Sports and live events marketing/ ) ? d.category .replace("Community media", "Comm") //.replace("Traditional media", "Traditional") .replace("Unspecified traditional media", "Unspecified traditional") .replace("Social media and tech", "Social media + tech") .replace("Ad serving/targeting companies", "Ad serving") .replace("Sports and live events marketing", "Sports + events") : d.category ) .style("font-size", (d) => d.category === "Community media" || d.category === "Sports and live events marketing" ? "1.05rem" : "1.05rem" ) .style("font-weight", "500") .style( "fill", (d) => (d.category === "Community media" ? "#333333" : "#333333") // "#4F4557" ); // Text: $ amts const amtLabels = catLabels .append("tspan") .attr("x", 0) .attr("dy", (d) => (d.category === "Community media" ? "2em" : "2.25em")) .html((d) => d.category === "Community media" ? `${d3.format("$,.3s")(d.category_total).toLowerCase()}` : `${d3.format("$,.3s")(d.category_total).toLowerCase()}` ) .style("font-size", (d) => d.category === "Community media" //|| ? "0.85rem" : "0.9rem" ) .style("font-weight", "600") .style("fill", (d) => d.category === "Community media" ? "#a46104" : d.category === "Traditional media" ? "#191D88" : newShade(colorScale(d.category), -75) ); simulation.nodes(data).on("tick", ticked); function ticked() { bubbles.attr("cx", (d) => d.x).attr("cy", (d) => d.y); pctLabels.attr("x", (d) => d.x).attr("y", (d) => d.y); catLabels.attr("x", (d) => d.x).attr("y", (d) => d.y); amtLabels.attr("x", (d) => d.x).attr("y", (d) => d.y); } return canvas; }33:[] 30:{"id":"10955be1a93e6235","slug":null,"title":"NYS Board of Elections","thumbnail":"5bea4f9740798281fc4e856fd34fa68da0f6b80b39853b8e95c8f4176983e2f4","access_level":"public","create_time":"$D2023-08-10T00:47:12.487Z","update_time":"$D2023-12-22T05:16:32.189Z","view_time":null,"first_public_time":"$D2023-08-10T00:47:12.487Z","has_unpublished_edits":null,"fork":{"id":"4accbfd71f756e9b","slug":null,"title":"NYS Board of Elections","owner":{"id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work"}},"stars":0,"starred":false,"owner":{"type":"team","id":"919cb9b550a00f42","login":"ccmnewmarkj","name":"Center for Community Media","avatar_url":"https://avatars-next.observableusercontent.com/50dcc2b89ceb03cbd960dca676a2394ec464a52bedc175f48e6c00a2ebc7801d","tier":"starter_2024"},"version":1158,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2b0e9da86447eaa","login":"ccmnewmarkj","name":"Center for Community Media","avatar_url":"https://avatars-next.observableusercontent.com/eb1346b29822015ebda1f9cf0af0356960c2e3788546b6964adf69cc834da64c","tier":null}],"members":[{"type":"team","id":"919cb9b550a00f42","login":"ccmnewmarkj","name":"Center for Community Media","avatar_url":"https://avatars-next.observableusercontent.com/50dcc2b89ceb03cbd960dca676a2394ec464a52bedc175f48e6c00a2ebc7801d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"b2b0e9da86447eaa","login":"ccmnewmarkj","name":"Center for Community Media","avatar_url":"https://avatars-next.observableusercontent.com/eb1346b29822015ebda1f9cf0af0356960c2e3788546b6964adf69cc834da64c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"NYS Board of Elections","cells":[{"id":77,"value":"# NYS Board of Elections\nMade for [Community Blindspot: Study of NYS agency advertising practices](https://abi.journalism.cuny.edu/nys-ad-spending/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"data = [\n {\n category: \"Community media\",\n category_total: 198764.85,\n pct: 5\n },\n {\n category: \"Ad serving/targeting companies\",\n category_total: 515914.35,\n pct: 12.9\n },\n {\n category: \"Social media and tech\",\n category_total: 1164223.76,\n pct: 29.1\n },\n {\n category: \"Traditional media\",\n category_total: 2128152.89,\n pct: 53.1\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"newShade = (hexColor, magnitude) => {\n hexColor = hexColor.replace(`#`, ``);\n if (hexColor.length === 6) {\n const decimalColor = parseInt(hexColor, 16);\n let r = (decimalColor >> 16) + magnitude;\n r > 255 && (r = 255);\n r < 0 && (r = 0);\n let g = (decimalColor & 0x0000ff) + magnitude;\n g > 255 && (g = 255);\n g < 0 && (g = 0);\n let b = ((decimalColor >> 8) & 0x00ff) + magnitude;\n b > 255 && (b = 255);\n b < 0 && (b = 0);\n return `#${(g | (b << 8) | (r << 16)).toString(16)}`;\n } else {\n return hexColor;\n }\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"