2c:null 2d:["$","title",null,{"children":"NYS Department of Agriculture and Markets | D3 Work | Observable"}] 32:T1cf4,chart = { // set dimensions const dimensions = { width: 675, height: 500 }; // 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 / 3},${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([ "#F7E987", "#4489E3", "#57C9FA", "#b298dc", "#bdbdbd", "#FF7D5E", "#FFA551", //"#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" || d.chart_category === "Traditional media" ? null : d.chart_category === "Ad serving/targeting companies" ? `${d3.format(",.1~f")(d.pct)}%` : `${d3.format(",.1~f")(d.pct)}%` ) .attr("dy", (d) => d.chart_category === "Ad serving/targeting companies" ? "0.3em" : "-0.25em" ) .style("font-size", (d) => d.chart_category === "Ad serving/targeting companies" ? "1.2rem" : "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|Unspecified digital media|Unspecified media placements\/buys|Social media and tech|Ad serving\/targeting companies|Sports and live events marketing/ ) ? d.chart_category .replace("Community media", "") .replace("Traditional media", "") .replace("Unspecified traditional media", "Unspecified traditional") .replace("Unspecified digital media", "Unspecified digital") .replace("Unspecified media placements/buys", "Unspecified buys") .replace("Social media and tech", "Social") .replace("Ad serving/targeting companies", "") .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" ? "#eeeeee" : "#333333") // "#4F4557" ); // Text: $ amts const amtLabels = catLabels .append("tspan") .attr("x", 0) .attr("dy", "2.1em") .html((d) => d.chart_category === "Community media" || d.chart_category === "Traditional media" || d.chart_category === "Ad serving/targeting companies" ? 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 === "Community media" ? "#eeeeee" : newShade(colorScale(d.chart_category), -75) //"#665970" ); /////////////// // ANNOTATIONS /////////////// // Text: Unspecified + Hispanic const unspefX = 400; const unspefY = 250; const unspefDy = "1.25em"; svg .append("text") .style("font-weight", "400") .style("font-size", "0.9em") // .html(`● 1.3% Ad serving companies ($61k)`) .style("fill", "#fe8c39") // "#FFB26B") //"#fe8c39") .attr("x", `${unspefX}`) .attr("y", `${unspefY}`) .style("font-weight", "500") // .append("tspan") .text("● 0.1% Community media ($3.5k)") .style("fill", "#eeb304") .attr("x", `${unspefX}`) .attr("dy", `${unspefDy}`) .style("font-weight", "500") // .append("tspan") .text("● 0.1% Traditional media ($2.5k)") .style("fill", "#4489E3") .attr("x", `${unspefX}`) .attr("dy", `${unspefDy}`) .style("font-weight", "500"); /////////////// // ARROW /////////////// // const points = [ // { x: 350, y: 150 }, // { x: 390, y: 125 } // ]; // const lineGen = d3 // .line() // .x((d) => d.x) // .y((d) => d.y) // .curve(d3.curveNatural); // // arrowhead // svg // .append("svg:defs") // .append("svg:marker") // .attr("id", "triangle") // .attr("refX", 6) // .attr("refY", 6) // .attr("markerWidth", 15) // .attr("markerHeight", 15) // .attr("orient", "auto") // .append("path") // .attr("d", "M 0 0 8 6 0 12 4 6") // .style("fill", "black"); // // line for arrow // svg // .append("path") // .attr("d", lineGen(points)) // .attr("marker-end", "url(#arrow)") // .attr("fill", "none") // .attr("stroke", "#777777") // .attr("marker-end", "url(#triangle)"); // //.attr("transform", `translate(50, -50)`); 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:T41b,data_raw = aq .from( [ { category: "Community media", category_total: 3485.17, pct: 0.1 }, { category: "Other media placements", category_total: 61312.5, pct: 1.3 }, { category: "Social media and tech", category_total: 293423.64, pct: 6.4 }, { category: "Traditional media", category_total: 2517.57, pct: 0.1 }, { category: "Unspecified digital media", category_total: 1260326.67, pct: 27.6 }, { category: "Unspecified media placements/buys", category_total: 821705.29, pct: 18 }, { category: "Unspecified traditional media", category_total: 2118537.09, pct: 46.4 } ].map((d) => ({ ...d, category: d.category.replace( "Other media placements", "Ad serving/targeting companies" ) })) ) .rename({ category: "chart_category", category_total: "sum" })34:[] 30:{"id":"bc96fc16331cea6e","slug":null,"title":"NYS Department of Agriculture and Markets","thumbnail":"93c187b83c834ac742e19801f0d34c04c5123a95ffec5e8498234168a22206f4","access_level":"public","create_time":"$D2023-07-11T04:42:15.434Z","update_time":"$D2023-12-22T05:15:19.092Z","view_time":null,"first_public_time":"$D2023-08-09T19:32:33.845Z","has_unpublished_edits":null,"fork":{"id":"1506a29e88114590","slug":null,"title":"NYS Gaming Commission","owner":{"id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work"}},"stars":0,"starred":false,"owner":{"type":"team","id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024"},"version":1167,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7f8a8c8d4026c16","login":"jeche","name":"Jennifer","avatar_url":"https://avatars-next.observableusercontent.com/2c99b0f3c8f49df2fdfe70a529d22c753549f920292875a89064bfb32601f46e","tier":null}],"members":[{"type":"individual","id":"c7f8a8c8d4026c16","login":"jeche","name":"Jennifer","avatar_url":"https://avatars-next.observableusercontent.com/2c99b0f3c8f49df2fdfe70a529d22c753549f920292875a89064bfb32601f46e","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 Agriculture and Markets","cells":[{"id":77,"value":"# NYS Department of Agriculture and Markets\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":1051,"value":"data = data_raw.objects()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"Inputs.table(data_raw)","pinned":true,"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"},{"id":210,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"