2c:null 2d:["$","title",null,{"children":"NYS Gaming Commission | Center for Community Media | Observable"}] 32:T5662,chart = { const dimensions = { width: 750, height: 375, margins: { top: 10, right: 150, bottom: 50, left: 5 } }; // set dimensions for container within svg (minus axes) dimensions.ctrWidth = dimensions.width - dimensions.margins.right - dimensions.margins.left; dimensions.ctrHeight = dimensions.height - dimensions.margins.bottom - dimensions.margins.top * 2; const svg = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); const svgTable = d3 .create("svg") .attr("width", dimensions.width) .attr("height", dimensions.height); // Tooltip source: https://observablehq.com/@john-guerra/how-to-add-a-tooltip-in-d3 const canvas = html`

${svg.node()}

Switch to % format

`; // set up tooltip const tooltip = d3.select(canvas).select(".tooltip"); const ctr = svg .append("g") .attr( "transform", `translate(${dimensions.margins.left}, ${dimensions.margins.top})` ); const stackGenerator = d3 .stack() .keys(Object.keys(data[0]).slice(1).reverse()); const stackData = stackGenerator(data); // each series = bottom and top y-coords for each data point // 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" ]); // X-AXIS // set up x-scale const xScale = d3 .scaleBand() .domain(data.map((d) => d.time)) .range([dimensions.margins.left, dimensions.ctrWidth]) .paddingInner(0.25); // padding between bars, narrows width of bars // format x-axis const xAxis = d3.axisBottom(xScale).tickSizeOuter(0); // create function to draw axis; xScale tells D3 how to draw the axis // draw x-axis const xAxisEl = ctr .append("g") .attr("transform", `translate(50, ${dimensions.ctrHeight})`) .call(xAxis) .attr("class", "x-axis") .style("font-family", "Inter"); xAxisEl .selectAll("line") .attr("transform", `translate(0,3)`) .attr("stroke", "#909090"); xAxisEl.selectAll("text").attr("transform", `translate(0,6)`); // x-axis label xAxisEl .append("text") .attr("transform", `translate(${dimensions.ctrWidth / 2}, 50)`) .text("Fiscal Year") .attr("fill", "#9a9a9a"); // Y-AXIS // set up y-scale const yScale = d3 .scaleLinear() .domain([ 0, d3.max(stackData, (category) => { return d3.max(category, (year) => year[1]); }) ]) .rangeRound([dimensions.ctrHeight, dimensions.margins.bottom]); // format y-axis const yAxis = d3 .axisLeft(yScale) .ticks(5) // num of ticks .tickSizeOuter(0) // remove outer tick mark .tickFormat((d) => (d > 0 ? d3.format("$.0s")(d).toLowerCase() : null)) .tickSize(-dimensions.width); // draw y-axis const yAxisEl = ctr .append("g") .attr("transform", `translate(${dimensions.margins.left}, 0)`) .call(yAxis) .attr("class", "y-axis") .style("font-family", "Inter"); // y-axis gridline color yAxisEl.selectAll("line").attr("stroke", "#e8e8e8"); // darker y-axis yAxisEl .selectAll(".y-axis .tick:first-of-type line") .attr("stroke", "#949494"); // y-axis values yAxisEl .attr("text-anchor", "beginning") .selectAll("text") .attr("transform", `translate(-5,-10)`); // overall style ctr.selectAll("text").attr("font-size", "0.75rem").attr("color", "#5C5C5C"); ctr.selectAll("path").style("display", "none"); // draw bars const barGroups = ctr .append("g") .selectAll("g") .data(stackData) .join("g") .attr("fill", (d) => colorScale(d.key)) .attr("stroke", "#333333") .attr("stroke-width", "0.5") .attr("transform", `translate(50,0)`); // draw stacks const stackedBar = barGroups .selectAll("g") .data((d) => d) // for each stack/key .join("g"); stackedBar .append("rect") .attr("x", (d) => xScale(d.data.time)) .attr("y", (d) => yScale(d[1])) // end position .attr("width", xScale.bandwidth()) .attr("height", (d) => yScale(d[0]) - yScale(d[1])) .attr("fill-opacity", 1) .attr("tabindex", "0"); // add tooltips stackedBar .on("mouseover", (e, d) => { //console.log(yScale(d[0]) - yScale(d[1])); const tooltipContents = ` ${ d.data["Community media"] === +(d[1] - d[0]).toFixed(1) || d.data["Community media"] === +(d[1] - d[0]).toFixed(2) ? "▸  Community media:" : "Community media:" } ${ d.data["Community media"] === 0 ? "$0" : d3.format("$.3s")(d.data["Community media"]).toLowerCase() } / ${ d.data["Community media"] === 0 ? "0%" : d3.format(".1%")( d.data["Community media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"] + d.data["Sports and live events marketing"]) ) }
${ d.data["Traditional media"] === +(d[1] - d[0]).toFixed(1) || d.data["Traditional media"] === +(d[1] - d[0]).toFixed(2) ? "▸  Traditional media:" : "Traditional media:" } ${ d.data["Traditional media"] === 0 ? "$0" : d3.format("$.3s")(d.data["Traditional media"]).toLowerCase() } / ${ d.data["Traditional media"] === 0 ? "0%" : d3.format(".1%")( d.data["Traditional media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"] + d.data["Sports and live events marketing"]) ) }
${ d.data["Unspecified traditional media"] === +(d[1] - d[0]).toFixed(1) || d.data["Unspecified traditional media"] === +(d[1] - d[0]).toFixed(2) ? "▸  Unspecified traditional:" : "Unspecified traditional:" } ${ d.data["Unspecified traditional media"] === 0 ? "$0" : d3 .format("$.3s")(d.data["Unspecified traditional media"]) .toLowerCase() } / ${ d.data["Unspecified traditional media"] === 0 ? "0%" : d3 // #9DB2BF .format(".1%")( d.data["Unspecified traditional media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"] + d.data["Sports and live events marketing"]) ) .toLowerCase() }
${ d.data["Social media and tech"] === +(d[1] - d[0]).toFixed(1) || d.data["Social media and tech"] === +(d[1] - d[0]).toFixed(2) ? "▸  Social media:" : "Social media:" } ${ d.data["Social media and tech"] === 0 ? "$0" : d3.format("$.3s")(d.data["Social media and tech"]).toLowerCase() } / ${ d.data["Social media and tech"] === 0 ? "0%" : d3 .format(".1%")( d.data["Social media and tech"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"] + d.data["Sports and live events marketing"]) ) .toLowerCase() }
${ d.data["Ad serving/targeting companies"] === +(d[1] - d[0]).toFixed(1) || d.data["Ad serving/targeting companies"] === +(d[1] - d[0]).toFixed(2) ? "▸  Ad serving:" : "Ad serving:" } ${ d.data["Ad serving/targeting companies"] === 0 ? "$0" : d3 .format("$.3s")(d.data["Ad serving/targeting companies"]) .toLowerCase() } / ${ d.data["Ad serving/targeting companies"] === 0 ? "0%" : d3 .format(".1%")( d.data["Ad serving/targeting companies"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"] + d.data["Sports and live events marketing"]) ) .toLowerCase() }
${ d.data["Sports and live events marketing"] === +(d[1] - d[0]).toFixed(1) || d.data["Sports and live events marketing"] === +(d[1] - d[0]).toFixed(2) ? "▸  Sports and live events:" : "Sports and live events:" } ${ d.data["Sports and live events marketing"] === 0 ? "$0" : d3 .format("$.3s")(d.data["Sports and live events marketing"]) .toLowerCase() } / ${ d.data["Sports and live events marketing"] === 0 ? "0%" : d3 .format(".1%")( d.data["Sports and live events marketing"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"] + d.data["Sports and live events marketing"]) ) .toLowerCase() }

FY ${ d.data.time } `; tooltip.html(tooltipContents); if (window.innerWidth > 800) { tooltip .style( "transform", `translate(${ dimensions.width - dimensions.margins.right - 75 }px,30px)` ) .transition() .duration(500) .style("opacity", 0.95); } else { tooltip .style("transform", `translate(0,30px)`) .transition() .duration(500) .style("opacity", 0.95); } }) .on("mouseout", () => tooltip.transition().style("opacity", 0)); // total $ above each bar stack ctr .append("g") .selectAll(".bar-labels") .data(data) .join("text") .attr("class", "bar-labels") .attr("x", (d) => xScale(d.time) + 75) .attr("y", (d) => yScale( d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) ) ) .attr("text-anchor", "middle") .attr("dy", "-0.5em") .html((d) => d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) === 0 ? "$0*" : d.time === 2023 ? `${d3 .format("$.2s")( d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) ) .toLowerCase()}**` : `${d3 .format("$.3s")( d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) ) .toLowerCase()}` ) .attr("font-size", "0.8rem") .attr("font-weight", "400"); // TABLE // when first loading, hide table d3.select(canvas).select("#table-container").style("display", "none"); d3.select(canvas) .selectAll(".toggle-button") .on("click", (e) => { e.stopPropagation(); if ( e.target.innerHTML === "Chart" && document.querySelector("button").classList !== "toggle-button-selected" ) { document.querySelector("#chart-container").style.display = "block"; document .querySelector("#toggle-button-chart") .classList.toggle("toggle-button-selected"); document.querySelector("#table-container").style.display = "none"; document .querySelector("#toggle-button-table") .classList.toggle("toggle-button-selected"); } else if (e.target.innerHTML === "Table") { document.querySelector("#chart-container").style.display = "none"; document .querySelector("#toggle-button-chart") .classList.toggle("toggle-button-selected"); document.querySelector("#table-container").style.display = "block"; document .querySelector("#toggle-button-table") .classList.toggle("toggle-button-selected"); } }); let tableData; loadTable(amtData); d3.select(canvas) .selectAll(".toggle-switch") .on("click", (e) => { if (document.querySelector('input[type="checkbox"]').checked) { d3.selectAll("thead").remove(); d3.selectAll("tbody").remove(); d3.selectAll("td").remove(); loadTable(pctData); document.querySelector( ".toggle-text" ).textContent = `Numbers represent the % within the FY`; } else { d3.selectAll("thead").remove(); d3.selectAll("tbody").remove(); d3.selectAll("td").remove(); loadTable(amtData); document.querySelector( ".toggle-text" ).textContent = `Switch to % format`; } }); function loadTable(tableData) { const table = d3.select(canvas).select("#table"); const thead = table.append("thead"); thead .append("tr") .selectAll("th") .data(Object.keys(tableData[0])) .join("td") .html((d) => d) .style("font-weight", "600") .style("border-bottom", "1px solid #333") .attr("class", "variables"); // body rows const rows = table .append("tbody") .selectAll("tr") .data(tableData) .join("tr") .style("border-bottom", "0.75px solid #d1d1d1"); const amtScale = d3 .scaleLinear() .domain([0, 2500000]) .range(d3.schemeGreens[9]); const pctScale = d3.scaleLinear().domain([0, 8]).range(d3.schemeGreens[9]); // cells rows .selectAll("td") .data((d) => Object.values(d)) .join("td") .html((d) => typeof d === "number" ? d === 0 ? "-" : tableData === pctData ? `${d}%` : //: d >= 1000000 d3.format("$.3s")(d).toLowerCase() : //: d3.format("$.1")(d / 1000000) + "m" `${d}` ) .attr("class", "amounts") .style("color", "#262626") .style("background-color", function (d) { if (tableData === amtData && d > 0) { return amtScale(d); } else if (tableData === pctData && d > 0) { return pctScale(d); } }); } return canvas; }33:T98f,data = [ { fy: 2015, "Community media": 0, "Traditional media": 200000, "Unspecified traditional media": 1718542, "Social media and tech": 150000, "Ad serving/targeting companies": 39170, "Sports and live events marketing": 0 }, { fy: 2016, "Community media": 0, "Traditional media": 0, "Unspecified traditional media": 0, "Social media and tech": 0, "Ad serving/targeting companies": 0, "Sports and live events marketing": 0 }, { fy: 2017, "Community media": 1263100, "Traditional media": 2973382, "Unspecified traditional media": 19312967, "Social media and tech": 1177960, "Ad serving/targeting companies": 2536478, "Sports and live events marketing": 5548000 }, { fy: 2018, "Community media": 720193, "Traditional media": 890282.89, "Unspecified traditional media": 10963639.72, "Social media and tech": 502000, "Ad serving/targeting companies": 2201315.51, "Sports and live events marketing": 0 }, { fy: 2019, "Community media": 943032, "Traditional media": 3502914.17, "Unspecified traditional media": 24429090.26, "Social media and tech": 3378569.59, "Ad serving/targeting companies": 7620368.98, "Sports and live events marketing": 3159146 }, { fy: 2020, "Community media": 946928, "Traditional media": 2851973.2, "Unspecified traditional media": 17970313.3, "Social media and tech": 1288188.19, "Ad serving/targeting companies": 5218823.31, "Sports and live events marketing": 12169501 }, { fy: 2021, "Community media": 443696, "Traditional media": 3586960.8, "Unspecified traditional media": 25991188.8, "Social media and tech": 1391308, "Ad serving/targeting companies": 6859747.2, "Sports and live events marketing": 4394333 }, { fy: 2022, "Community media": 672477, "Traditional media": 1696036, "Unspecified traditional media": 8595523.64, "Social media and tech": 2695319.65, "Ad serving/targeting companies": 2157896.95, "Sports and live events marketing": 5247437 }, { fy: 2023, "Community media": 198879.5, "Traditional media": 159755, "Unspecified traditional media": 45000, "Social media and tech": 512000, "Ad serving/targeting companies": 64665, "Sports and live events marketing": 2739967 } ].map(({ fy, ...d }) => ({ time: fy, ...d }))34:T7f3,amtData = [ { Category: "Community media", "FY 2015": 0, "FY 2016": 0, "FY 2017": 1263100, "FY 2018": 720193, "FY 2019": 943032, "FY 2020": 946928, "FY 2021": 443696, "FY 2022": 672477, "FY 2023": 198879.5 }, { Category: "Traditional media", "FY 2015": 200000, "FY 2016": 0, "FY 2017": 2973382, "FY 2018": 890282.89, "FY 2019": 3502914.17, "FY 2020": 2851973.2, "FY 2021": 3586960.8, "FY 2022": 1696036, "FY 2023": 159755 }, { Category: "Unspecified traditional media", "FY 2015": 1718542, "FY 2016": 0, "FY 2017": 19312967, "FY 2018": 10963639.72, "FY 2019": 24429090.26, "FY 2020": 17970313.3, "FY 2021": 25991188.8, "FY 2022": 8595523.64, "FY 2023": 45000 }, { Category: "Social media and tech", "FY 2015": 150000, "FY 2016": 0, "FY 2017": 1177960, "FY 2018": 502000, "FY 2019": 3378569.59, "FY 2020": 1288188.19, "FY 2021": 1391308, "FY 2022": 2695319.65, "FY 2023": 512000 }, { Category: "Ad serving/targeting companies", "FY 2015": 39170, "FY 2016": 0, "FY 2017": 2536478, "FY 2018": 2201315.51, "FY 2019": 7620368.98, "FY 2020": 5218823.31, "FY 2021": 6859747.2, "FY 2022": 2157896.95, "FY 2023": 64665 }, { Category: "Sports and live events marketing", "FY 2015": 0, "FY 2016": 0, "FY 2017": 5548000, "FY 2018": 0, "FY 2019": 3159146, "FY 2020": 12169501, "FY 2021": 4394333, "FY 2022": 5247437, "FY 2023": 2739967 } ].map((d) => ({ ...d, Category: d.Category.replace("Community media", "Community") .replace("Traditional media", "Traditional") .replace("Unspecified traditional media", "Unspecified trad.") .replace("October-December 2020", "Oct-Dec '20") .replace("Ad serving/targeting companies", "Ad serving") .replace("Social media and tech", "Social media") .replace("Sports and live events marketing", "Sports, live events") }))35:T72c,pctData = [ { Category: "Community media", "FY 2015": 0, "FY 2016": 0, "FY 2017": 3.8, "FY 2018": 4.7, "FY 2019": 2.2, "FY 2020": 2.3, "FY 2021": 1, "FY 2022": 3.2, "FY 2023": 5.3 }, { Category: "Traditional media", "FY 2015": 9.5, "FY 2016": 0, "FY 2017": 9.1, "FY 2018": 5.8, "FY 2019": 8.1, "FY 2020": 7.1, "FY 2021": 8.4, "FY 2022": 8.1, "FY 2023": 4.3 }, { Category: "Unspecified traditional media", "FY 2015": 81.5, "FY 2016": 0, "FY 2017": 58.9, "FY 2018": 71.8, "FY 2019": 56.8, "FY 2020": 44.4, "FY 2021": 60.9, "FY 2022": 40.8, "FY 2023": 1.2 }, { Category: "Social media and tech", "FY 2015": 7.1, "FY 2016": 0, "FY 2017": 3.6, "FY 2018": 3.3, "FY 2019": 7.9, "FY 2020": 3.2, "FY 2021": 3.3, "FY 2022": 12.8, "FY 2023": 13.8 }, { Category: "Ad serving/targeting companies", "FY 2015": 1.9, "FY 2016": 0, "FY 2017": 7.7, "FY 2018": 14.4, "FY 2019": 17.7, "FY 2020": 12.9, "FY 2021": 16.1, "FY 2022": 10.2, "FY 2023": 1.7 }, { Category: "Sports and live events marketing", "FY 2015": 0, "FY 2016": 0, "FY 2017": 16.9, "FY 2018": 0, "FY 2019": 7.3, "FY 2020": 30.1, "FY 2021": 10.3, "FY 2022": 24.9, "FY 2023": 73.6 } ].map((d) => ({ ...d, Category: d.Category.replace("Community media", "Community") .replace("Traditional media", "Traditional") .replace("Unspecified traditional media", "Unspecified trad.") .replace("October-December 2020", "Oct-Dec '20") .replace("Ad serving/targeting companies", "Ad serving") .replace("Social media and tech", "Social media") .replace("Sports and live events marketing", "Sports, live events") }))36:[] 30:{"id":"89e1afb5451ab9ab","slug":null,"title":"NYS Gaming Commission","thumbnail":"e4e06dd5c3612e6a822df00315f5daf0d18a11492e812b1878780575e0b69732","access_level":"public","create_time":"$D2023-07-27T01:44:21.393Z","update_time":"$D2023-12-22T05:17:09.824Z","view_time":null,"first_public_time":"$D2023-07-27T01:44:21.393Z","has_unpublished_edits":null,"fork":true,"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":1353,"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":3,"collection":null,"type":"notebook","body":{"title":"NYS Gaming Commission","cells":[{"id":0,"value":"# NYS Gaming Commission\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":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 31:"$30:body"