2c:null 2d:["$","title",null,{"children":"NYS Office of Temporary and Disability Assistance | Center for Community Media | Observable"}] 32:T1464,chart = { // set dimensions const dimensions = { width: 500, height: 400 }; // 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.sum)]) .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.sum) + 2) // space btwn circles ); // Draw bubbles const bubbles = bubblesSVG .selectAll("circle") .data(data) .join("circle") .attr("r", (d) => radiusScale(d.sum)) .attr("fill", (d) => colorScale(d.chart_category)) .attr("stroke", (d) => newShade(colorScale(d.chart_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.chart_category === "Community media" ? `${d3.format(",.1~f")(d.pct)}` : `${d3.format(",.1~f")(d.pct)}%` ) .attr("dy", (d) => d.chart_category === "Community media" ? "0.3em" : "-0.25em" ) .style("font-size", (d) => d.chart_category === "Community media" || d.chart_category === "Sports and live events marketing" ? "1.5rem" : "1.5rem" ) .style("font-weight", "500") .style("fill", (d) => d.chart_category === "Community media" ? "#ffffff" : "#333333" ); // Text: Category labels const catLabels = pctLabels .append("tspan") .attr("x", 0) .attr("dy", "0.75em") .text((d) => d.chart_category.match( /Community media|Traditional media|Unspecified traditional media|Social media and tech|Ad serving\/targeting companies|Sports and live events marketing/ ) ? d.chart_category .replace("Community media", "") //.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.chart_category ) .style("font-size", (d) => d.chart_category === "Community media" || d.chart_category === "Sports and live events marketing" ? "1.05rem" : "1.05rem" ) .style("font-weight", "500") .style( "fill", (d) => (d.chart_category === "Community media" ? "#333333" : "#333333") // "#4F4557" ); // Text: $ amts const amtLabels = catLabels .append("tspan") .attr("x", 0) .attr("dy", "2.1em") .html((d) => d.chart_category === "Community media" ? null : `${d3.format("$,.3s")(d.sum).toLowerCase()}` ) .style("font-size", (d) => d.chart_category === "Community media" //|| ? // d.chart_category === "Social media and tech" || // d.chart_category === "Sports and live events marketing" "1rem" : "1rem" ) .style("font-weight", "600") .style("fill", (d) => d.chart_category === "Traditional media" ? "#191D88" : newShade(colorScale(d.chart_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":"4bdc20c6f85e9bc0","slug":null,"title":"NYS Office of Temporary and Disability Assistance","thumbnail":"a862dd425f627f5f7e94e3d2146161574cfe42cba2c7d2e882f6e9484435afd4","access_level":"public","create_time":"$D2023-08-09T19:05:13.824Z","update_time":"$D2025-05-03T05:03:25.012Z","view_time":null,"first_public_time":"$D2023-08-09T19:05:13.824Z","has_unpublished_edits":null,"fork":{"id":"850304b61dcf57e0","slug":null,"title":"NYS Office of Temporary and Disability Assistance","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":1116,"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":1,"collection":null,"type":"notebook","body":{"title":"NYS Office of Temporary and Disability Assistance","cells":[{"id":77,"value":"# NYS Office of Temporary and Disability Assistance\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":true,"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":463,"value":"data_raw = aq\n .from([\n {\n category: \"Social media and tech\",\n category_total: 1271043.36,\n pct: 33\n },\n {\n category: \"Traditional media\",\n category_total: 2580367,\n pct: 67\n }\n ])\n .rename({ category: \"chart_category\", category_total: \"sum\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"data = data_raw.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"// Source: https://natclark.com/tutorials/javascript-lighten-darken-hex-color\nnewShade = (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"