2c:null 2d:["$","title",null,{"children":"NYS Office of Children and Family Services | D3 Work | Observable"}] 32:T12a3,drawChart = (container) => { const width = 400; const height = 400; // draw svg container const svg = container .append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${width / 2 - 50},${height / 2 - 30})`); // radius determined by $ amt const radiusScale = d3 .scaleSqrt() .domain([0, d3.max(data, (d) => d.sum)]) // using raw data to standardize circle sizes .range([10, 100]); // draw circles const circles = svg .selectAll("circle") .data((d) => d[1]) //.data(d => {console.log(d); return d[1]}) .join("circle") .attr("r", (d) => radiusScale(d.sum)) .attr("fill", (d) => colorScale(d.chart_category)) .attr("opacity", 0.9) .attr("stroke", (d) => newShade(colorScale(d.chart_category), -50)) .attr("stroke-width", 1.25); // create div for tooltip const tooltip = container.append("div").attr("class", "tooltip"); // binding nodes to set x and y positions array.forEach((d) => { // for each campaign const simulation = d3 .forceSimulation(d[1]) .force("xPosition", d3.forceX((d) => radiusScale(d.sum)).strength(0.2)) .force("yPosition", d3.forceY((d) => radiusScale(d.sum)).strength(0.2)) .force( "collision", d3.forceCollide().radius((d) => radiusScale(d.sum) + 2) ); simulation // .nodes( // //Object.values(array.map((d) => d[1]) // array.map((d) => d[1]).map((d) => d[1]) // ) // not needed because nodes bound above in forceSimulation() .on("tick", () => { // position circles circles.attr("cx", (d) => d.x).attr("cy", (d) => d.y); // tooltip circles .on("mouseover", (e, d) => { const tooltipContent = `

${ d.chart_category === "Ad serving/targeting companies" ? "Ad serving/targeting" : d.chart_category }

${d.vendor}

Received ${d3.format("$,.2s")( d.sum )}

`; tooltip.html(tooltipContent); tooltip .style( "transform", //`translate(${e.pageX + 5}px,${e.pageY - 200}px)` `translate(${e.pageX + 5}px,${e.pageY - 100}px)` ) .style("color", newShade(colorScale(d.chart_category), 50)) .transition() .duration(500) .style("opacity", 0.9); }) .on("mouseout", () => tooltip.transition().style("opacity", 0)); // company names svg .selectAll("text") .data((d) => d[1]) .join("text") .attr("class", "company-labels") .text((d) => d.vendor .replace("Bustle Digital Group", "Bustle") .replace("New Tang Dynasty", "NTD") .replace("Programmatic Mechanics", "PM") .replace("MightyHive", "MH") .replace("OM Trade Desk", "OM") .replace("MobileFuse", "MF") .replace( "Snapchat", d.campaign_flight == "Dec '19-Jan '20" ? "SC" : "Snapchat" ) .replace( "Facebook", d.campaign_flight == "Dec '19-Jan '20" ? "FB" : "Facebook" ) ) .attr("x", (d) => d.x) .attr("y", (d) => d.y) .attr("text-anchor", "middle") .style("font-size", "0.8rem"); // campaign labels const campaignLabels = svg .append("text") .html((d) => d[0]) .attr("text-anchor", "middle") .attr("x", 50) .attr("y", -140) .style("font-size", "1rem") .style("font-weight", 500); campaignLabels .append("tspan") .attr("x", 50) .attr("dy", "1.25em") .html(function (d) { const accumulator = d[1] .map((d) => d.sum) .reduce((accumulator, currentValue) => { return currentValue + accumulator; }, 0); return `Campaign total: ${ accumulator > 1000000 ? d3.format("$,.1s")(accumulator).toLowerCase() : d3.format("$,.3s")(accumulator).toLowerCase() }`; }) .style("font-size", "0.9rem") .style("font-weight", 400) .style("fill", "#989898"); }); }); } // TY: Madeleine F.33:T1685,data = [ { campaign_flight: "Aug-Dec '22", chart_category: "Ad serving/targeting companies", vendor: "AdTheorent", sum: 37400 }, { campaign_flight: "Aug-Dec '22", chart_category: "Ad serving/targeting companies", vendor: "MightyHive", sum: 803.4399999999999 }, { campaign_flight: "Aug-Dec '22", chart_category: "Ad serving/targeting companies", vendor: "OM Trade Desk", sum: 2168.4 }, { campaign_flight: "Aug-Dec '22", chart_category: "Social media and tech", vendor: "Facebook", sum: 34539.06 }, { campaign_flight: "Aug-Dec '22", chart_category: "Social media and tech", vendor: "Google", sum: 16922.83 }, { campaign_flight: "Aug-Dec '22", chart_category: "Social media and tech", vendor: "Snapchat", sum: 31009 }, { campaign_flight: "Aug-Dec '22", chart_category: "Social media and tech", vendor: "Twitter", sum: 8351 }, { campaign_flight: "Aug-Dec '22", chart_category: "Traditional media", vendor: "Bustle Digital Group", sum: 7000 }, { campaign_flight: "Nov-Dec '21", chart_category: "Community media", vendor: "New Tang Dynasty", sum: 16000 }, { campaign_flight: "Nov-Dec '21", chart_category: "Ad serving/targeting companies", vendor: "AdTheorent", sum: 38000 }, { campaign_flight: "Nov-Dec '21", chart_category: "Ad serving/targeting companies", vendor: "HCode", sum: 14498.6 }, { campaign_flight: "Nov-Dec '21", chart_category: "Ad serving/targeting companies", vendor: "MightyHive", sum: 1904.46 }, { campaign_flight: "Nov-Dec '21", chart_category: "Ad serving/targeting companies", vendor: "Streamlyn", sum: 10000 }, { campaign_flight: "Nov-Dec '21", chart_category: "Ad serving/targeting companies", vendor: "Teads", sum: 30000 }, { campaign_flight: "Nov-Dec '21", chart_category: "Social media and tech", vendor: "Apple", sum: 1056.03 }, { campaign_flight: "Nov-Dec '21", chart_category: "Social media and tech", vendor: "Facebook", sum: 114771.74 }, { campaign_flight: "Nov-Dec '21", chart_category: "Social media and tech", vendor: "Google", sum: 255713.02000000002 }, { campaign_flight: "Nov-Dec '21", chart_category: "Social media and tech", vendor: "Reddit", sum: 3208.91 }, { campaign_flight: "Nov-Dec '21", chart_category: "Social media and tech", vendor: "Snapchat", sum: 26823.760000000002 }, { campaign_flight: "Nov-Dec '21", chart_category: "Social media and tech", vendor: "TikTok", sum: 4297.7 }, { campaign_flight: "Nov-Dec '21", chart_category: "Social media and tech", vendor: "Twitter", sum: 20191.579999999998 }, { campaign_flight: "Oct-Dec '20", chart_category: "Ad serving/targeting companies", vendor: "AdTheorent", sum: 135000 }, { campaign_flight: "Oct-Dec '20", chart_category: "Ad serving/targeting companies", vendor: "HCode", sum: 8154.04 }, { campaign_flight: "Oct-Dec '20", chart_category: "Ad serving/targeting companies", vendor: "MightyHive", sum: 3546.72 }, { campaign_flight: "Oct-Dec '20", chart_category: "Ad serving/targeting companies", vendor: "MobileFuse", sum: 12345.52 }, { campaign_flight: "Oct-Dec '20", chart_category: "Ad serving/targeting companies", vendor: "Teads", sum: 4936.22 }, { campaign_flight: "Oct-Dec '20", chart_category: "Social media and tech", vendor: "Apple", sum: 1398.06 }, { campaign_flight: "Oct-Dec '20", chart_category: "Social media and tech", vendor: "Facebook", sum: 81328.62999999999 }, { campaign_flight: "Oct-Dec '20", chart_category: "Social media and tech", vendor: "Google", sum: 127436.25 }, { campaign_flight: "Oct-Dec '20", chart_category: "Social media and tech", vendor: "Snapchat", sum: 68919.83 }, { campaign_flight: "Oct-Dec '20", chart_category: "Social media and tech", vendor: "Twitter", sum: 29712.84 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Community media", vendor: "New Tang Dynasty", sum: 1330 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Ad serving/targeting companies", vendor: "AdTheorent", sum: 38116.02 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Ad serving/targeting companies", vendor: "HCode", sum: 18255.64 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Ad serving/targeting companies", vendor: "MightyHive", sum: 1424.41 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Ad serving/targeting companies", vendor: "MobileFuse", sum: 3878.28 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Ad serving/targeting companies", vendor: "Programmatic Mechanics", sum: 23100 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Social media and tech", vendor: "Facebook", sum: 20000 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Social media and tech", vendor: "Google", sum: 47000 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Social media and tech", vendor: "Snapchat", sum: 6000 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Social media and tech", vendor: "Twitter", sum: 6486.57 }, { campaign_flight: "Dec '19-Jan '20", chart_category: "Traditional media", vendor: "TV stations", sum: 868118.33 } ]34:[] 30:{"id":"0df720081646a7ca","slug":null,"title":"NYS Office of Children and Family Services","thumbnail":"aa88680a332ad3222ca89debf9d5f7669ebdefe8b11561e120f7f978ac028098","access_level":"public","create_time":"$D2023-08-12T04:17:45.925Z","update_time":"$D2023-09-25T17:14:37.367Z","view_time":null,"first_public_time":"$D2023-08-12T04:17:45.925Z","has_unpublished_edits":null,"fork":{"id":"a9a79dc30bf81caf","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":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024"},"version":2002,"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"},{"type":"team","id":"32fb4af23ff100b0","login":"wsjeche","name":"D3 Work","avatar_url":"https://avatars-next.observableusercontent.com/08ee8f3c2a4a4a92bccc5adb2c0757e65c23cd95049f13fdf573e41c741b2726","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"NYS Office of Children and Family Services","cells":[{"id":77,"value":"# NYS Office of Children and Family Services\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":1143,"value":"chart = {\n document.head.innerHTML += style;\n const div = d3\n .create(\"div\")\n .style(\"display\", \"flex\")\n .style(\"flex-wrap\", \"wrap\")\n .style(\"justify-content\", \"center\")\n .style(\"font-family\", \"Inter\");\n\n const facet = div\n .selectAll(\"div\")\n .data(array) // sets num of divs based on keys\n .join(\"div\");\n //.style(\"border\", \"1px solid black\");\n\n facet.call(drawChart);\n //console.log();\n\n return div.node();\n}\n// Based off of https://observablehq.com/@info474/d3-small-multiples\n// Embedding font: https://talk.observablehq.com/t/controlling-size-of-embeds-excess-whitespace/7534/2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1149,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"array = d3.groups(data, (d) => d.campaign_flight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1136,"value":"style = `\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1133,"value":"colorScale = d3\n .scaleOrdinal()\n .domain([\n \"Community media\",\n \"Traditional media\",\n \"Unspecified traditional media\",\n \"Unspecified digital media\",\n \"Unspecified media placements/buys\",\n \"Social media and tech\",\n \"Ad serving/targeting companies\",\n \"Sports and live events marketing\"\n ])\n .range([\n \"#F7E987\",\n \"#4489E3\",\n \"#57C9FA\",\n \"#b298dc\",\n \"#bdbdbd\",\n \"#FF7D5E\",\n \"#FFB000\",\n \"#A8DF8E\"\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"// get darker or lighter hex color based on input color\n// https://natclark.com/tutorials/javascript-lighten-darken-hex-color/\n\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":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"