2c:null 2d:["$","title",null,{"children":"NYS Department of Labor | Center for Community Media | Observable"}] 32:T136a,chart = { // set dimensions const dimensions = { width: 450, height: 375 }; // 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, 100]); // 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", "-0.25em") .style("font-size", (d) => d.category === "Community media" ? "1.75rem" : "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", "0.75em") .text((d) => d.category.match(/Community media|Ad serving\/targeting companies/) ? d.category //.replace("Community media", "Community") .replace("Ad serving/targeting companies", "Ad serving") : d.category ) .style("font-size", (d) => d.category === "Community media" || d.category === "Ad serving/targeting companies" ? "0.9rem" : "1.05rem" ) .style("font-weight", "500") .style("fill", (d) => d.category === "Community media" ? "#333333" : "#333333" ); // Text: $ amts const amtLabels = catLabels .append("tspan") .attr("x", 0) .attr("dy", (d) => d.category === "Community media" || d.category === "Ad serving/targeting companies" ? "2em" : "2.25em" ) .html((d) => d.category === "Community media" ? `${d3.format("$,.3s")(d.category_total).toLowerCase()}` : d.category === "Ad serving/targeting companies" ? `${d3.format("$,.2s")(d.category_total).toLowerCase()}` : `${d3.format("$,.3s")(d.category_total).toLowerCase()}` ) .style("font-size", (d) => d.category === "Community media" || d.category === "Sports and live events marketing" ? "0.8rem" : "0.8rem" ) .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:[{"id":"dd6a5c47a1382a18d172ec7292e63c30250bb3bebb4e45c07d37779bd0cb51ea705ed410d3a760b27b8f98ca2fc065ac76c074bced2c66714b19ae69dc70e3f5","href":"https://static.observableusercontent.com/files/dd6a5c47a1382a18d172ec7292e63c30250bb3bebb4e45c07d37779bd0cb51ea705ed410d3a760b27b8f98ca2fc065ac76c074bced2c66714b19ae69dc70e3f5","name":"children-bubbles.csv","type":"text/csv","lastModified":1694321856824.667,"size":2729}] 30:{"id":"748c302ba2f0cde6","slug":null,"title":"NYS Department of Labor","thumbnail":"2619828d427018344edb938f6b30a3cc497a1a6b4ad35c433fdc800c2028fdb6","access_level":"public","create_time":"$D2023-09-10T04:57:36.824Z","update_time":"$D2023-12-22T05:16:43.773Z","view_time":null,"first_public_time":"$D2023-09-10T04:57:36.824Z","has_unpublished_edits":null,"fork":{"id":"9ebfd72adf5e0670","slug":null,"title":"NYS Office of Children and Family Services","owner":{"id":"919cb9b550a00f42","login":"ccmnewmarkj","name":"Center for Community Media"}},"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":822,"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 Department of Labor","cells":[{"id":77,"value":"# NYS Department of Labor\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":463,"value":"data = [\n {\n \"category\": \"Ad serving/targeting companies\",\n \"category_total\": 50000,\n \"pct\": 10.1\n },\n {\n \"category\": \"Community media\",\n \"category_total\": 144262.05,\n \"pct\": 29\n },\n {\n \"category\": \"Traditional media\",\n \"category_total\": 302576.32,\n \"pct\": 60.9\n }\n] ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"viewof table = Inputs.table(data)","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":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"