2c:null 2d:["$","title",null,{"children":"NYS Gaming Commission | D3 Work | Observable"}] 32:T2121,chart = { // set dimensions const dimensions = { width: 700, 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 / 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.3rem" : "1.5rem" ) .style("font-weight", (d) => d.chart_category === "Community media" ? "700" : "500" ) .style("fill", (d) => d.chart_category === "Community media" ? "#333333" : "#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") .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" ? "#eeeeee" : "#333333") // "#4F4557" ); // Text: $ amts const amtLabels = catLabels .append("tspan") .attr("x", 0) .attr("dy", "2em") .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" "0.9rem" : "0.9rem" ) .style("font-weight", "600") .style("fill", (d) => d.chart_category === "Community media" ? "#a46104" : d.chart_category === "Traditional media" ? "#191D88" : newShade(colorScale(d.chart_category), -75) ); /////////////// // ANNOTATIONS /////////////// // Text: Traditional + Hispanic const tradHispX = 150; const tradHispY = 145; svg .append("text") .style("fill", "#459bec") .style("font-size", ".9rem") .style("font-weight", "400") .attr("text-anchor", "end") // .text("8.4% of spending") .attr("x", `${tradHispX}`) .attr("y", `${tradHispY}`) // .append("tspan") .text("in traditional") .attr("x", `${tradHispX}`) .attr("dy", "1em") // .append("tspan") .text("media went to") .attr("x", `${tradHispX}`) .attr("dy", "1em") // .append("tspan") .text("Hispanic media") .attr("x", `${tradHispX}`) .attr("dy", "1em") .style("font-weight", "600") // .append("tspan") .text("including Univision") .attr("x", `${tradHispX}`) .attr("dy", "1em") .style("font-weight", "400") // .append("tspan") .text("and Telemundo") .attr("x", `${tradHispX}`) .attr("dy", "1em"); // Text: Unspecified + Hispanic const unspHispX = 475; const unspHispY = 325; svg .append("text") .style("fill", "#0fb2e8") .style("font-weight", "400") .style("font-size", "0.9em") // .text("13.2% of spending in") .attr("x", `${unspHispX}`) .attr("y", `${unspHispY}`) // .append("tspan") .text("unspecified traditional") .attr("x", `${unspHispX}`) .attr("dy", "1em") // .append("tspan") .text("media went to") .attr("x", `${unspHispX}`) .attr("dy", "1em") // .append("tspan") .text("Hispanic media") .attr("x", `${unspHispX}`) .attr("dy", "1em") .style("font-weight", "600"); // Annotation: Community media const commMediaX = 240; const commMediaY = 375; svg .append("text") .style("fill", "#eeb304") .style("font-weight", "400") .style("font-size", "1.05rem") .style("text-anchor", "end") // .text("Community media") .attr("x", `${commMediaX}`) .attr("y", `${commMediaY}`) .attr("transform", `translate(53, 18)`) // .append("tspan") .text("$5.2m") .style("font-size", "0.9rem") .style("font-weight", "600") .style("fill", "#eeb304") .attr("x", `${commMediaX}`) .attr("dy", "1.25em"); // const points = [ // { x: 335, y: 500 }, // { x: 310, y: 525 } // ]; // 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 unspecified 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(35, 20)`); 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":"1506a29e88114590","slug":null,"title":"NYS Gaming Commission","thumbnail":"7a1b7914c53e310f460fd07dffa77b364cca823a823b51105de528b0be8b792b","access_level":"public","create_time":"$D2023-07-10T19:14:43.847Z","update_time":"$D2023-09-25T17:09:50.984Z","view_time":null,"first_public_time":"$D2023-08-08T21:45:24.119Z","has_unpublished_edits":null,"fork":{"id":"15945b1f0cb82e6d","slug":null,"title":"NYS Office of Children and Family Services","owner":{"id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work"}},"stars":1,"starred":false,"owner":{"type":"team","id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024"},"version":1083,"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":4,"collection":null,"type":"notebook","body":{"title":"NYS Gaming Commission","cells":[{"id":77,"value":"# NYS Gaming Commission\nBubble chart for overall spending by category","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 = data_raw.objects()","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: \"Community media\",\n category_total: 5188305.5,\n pct: 2.6\n },\n {\n category: \"Ad serving/targeting companies\",\n category_total: 26698464.95,\n pct: 13.3\n },\n {\n category: \"Social media and tech\",\n category_total: 11095345.43,\n pct: 5.5\n },\n {\n category: \"Sports and live events marketing\",\n category_total: 33258384,\n pct: 16.5\n },\n {\n category: \"Traditional media\",\n category_total: 15861304.06,\n pct: 7.9\n },\n {\n category: \"Unspecified traditional media\",\n category_total: 109026264.72,\n pct: 54.2\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":451,"value":"Inputs.table(data_raw)","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"},{"id":210,"value":"import { aq, op } from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"