2c:null 2d:["$","title",null,{"children":"NYS Department of Labor | Center for Community Media | Observable"}] 32:T48c3,chart = { const dimensions = { width: 350, height: 375, margins: { top: 10, right: 75, 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", (d) => `translate(-4,-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) => { // tooltip 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%" : d.data["Community media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Ad serving/targeting companies"]) === 100 ? d3.format(".0%")( d.data["Community media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Ad serving/targeting companies"]) ) : d3.format(".1%")( d.data["Community media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Ad serving/targeting companies"]) ) }
${ 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" : d.data["Traditional media"] === 15000 ? "$15k" : d3.format("$.3s")(d.data["Traditional media"]).toLowerCase() } / ${ d.data["Traditional media"] === 0 ? "0%" : d.data["Traditional media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Ad serving/targeting companies"]) === 1 ? d3.format(".0%")( d.data["Traditional media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Ad serving/targeting companies"]) ) : d3.format(".1%")( d.data["Traditional media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Ad serving/targeting companies"]) ) }
${ 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" : d.data["Ad serving/targeting companies"] === 50000 ? "$50k" : 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["Ad serving/targeting companies"]) ) .toLowerCase() }

FY ${ d.data.time } `; tooltip.html(tooltipContents); if (window.innerWidth > 800) { tooltip .style( "transform", `translate(${dimensions.width - dimensions.margins.right}px,120px)` ) .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) + 77) .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*" : d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) === 15000 ? "$15k" : 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, 25000]) .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}%` : d3.format("$.3s")(d).toLowerCase() : `${d}` ) .attr("class", "amounts") .style("color", function (d) { if (tableData === pctData && d === 100) { return "#ffffff"; } else { return "#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:[] 30:{"id":"cfa433bf75fd71f2","slug":null,"title":"NYS Department of Labor","thumbnail":"5e5e5cfa3c62e32fdaebc6e36ecce46d30a60672737b97a4dceb13ff98788c5e","access_level":"public","create_time":"$D2023-09-10T05:08:20.677Z","update_time":"$D2023-12-22T05:17:04.453Z","view_time":null,"first_public_time":"$D2023-09-10T05:08:20.677Z","has_unpublished_edits":null,"fork":{"id":"89e1afb5451ab9ab","slug":null,"title":"NYS Gaming Commission","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":1446,"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":0,"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":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = [\n {\n fy: 2020,\n \"Community media\": 0,\n \"Traditional media\": 15000,\n \"Ad serving/targeting companies\": 0\n },\n {\n fy: 2021,\n \"Community media\": 0,\n \"Traditional media\": 0,\n \"Ad serving/targeting companies\": 0\n },\n {\n fy: 2022,\n \"Community media\": 144262.05,\n \"Traditional media\": 283826.32,\n \"Ad serving/targeting companies\": 50000\n },\n {\n fy: 2023,\n \"Community media\": 0,\n \"Traditional media\": 3750,\n \"Ad serving/targeting companies\": 0\n }\n].map(({ fy, ...d }) => ({ time: fy, ...d }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"amtData = [\n {\n Category: \"Community media\",\n \"FY 2020\": 0,\n \"FY 2021\": 0,\n \"FY 2022\": 144262.05,\n \"FY 2023\": 0\n },\n {\n Category: \"Traditional media\",\n \"FY 2020\": 15000,\n \"FY 2021\": 0,\n \"FY 2022\": 283826.32,\n \"FY 2023\": 3750\n },\n {\n Category: \"Ad serving/targeting companies\",\n \"FY 2020\": 0,\n \"FY 2021\": 0,\n \"FY 2022\": 50000,\n \"FY 2023\": 0\n }\n].map((d) => ({\n ...d,\n Category: d.Category.replace(\n \"Ad serving/targeting companies\",\n \"Ad serving/targeting\"\n )\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"pctData = [\n {\n Category: \"Community media\",\n \"FY 2020\": 0,\n \"FY 2021\": 0,\n \"FY 2022\": 30.2,\n \"FY 2023\": 0\n },\n {\n Category: \"Traditional media\",\n \"FY 2020\": 100,\n \"FY 2021\": 0,\n \"FY 2022\": 59.4,\n \"FY 2023\": 100\n },\n {\n Category: \"Ad serving/targeting companies\",\n \"FY 2020\": 0,\n \"FY 2021\": 0,\n \"FY 2022\": 10.5,\n \"FY 2023\": 0\n }\n].map((d) => ({\n ...d,\n Category: d.Category.replace(\n \"Ad serving/targeting companies\",\n \"Ad serving/targeting\"\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"