2c:null 2d:["$","title",null,{"children":"NYS Office of Temporary and Disability Assistance | Center for Community Media | Observable"}] 32:T3dd0,chart = { const dimensions = { width: 450, height: 350, margins: { top: 10, right: 80, bottom: 45, 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.5); // 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("Campaign Flight") .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(4) // 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); stackedBar .on("mouseover", (e, d) => { // tooltips const tooltipContents = ` ${ 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["Traditional media"] + d.data["Social media and tech"]) ) }
${ 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"] / (d.data["Traditional media"] + d.data["Social media and tech"]) === 1 ? "100%" : d3 .format(".1%")( d.data["Social media and tech"] / (d.data["Traditional media"] + d.data["Social media and tech"]) ) .toLowerCase() }

${ d.data.time } `; tooltip.html(tooltipContents); if (window.innerWidth > 698) { tooltip .style("transform", `translate(175px,75px)`) .transition() .duration(500) .style("opacity", 0.95); } else { tooltip .style("transform", `translate(115px,175px)`) .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) + 51) .attr("y", (d) => yScale( d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) ) ) .attr("text-anchor", "middle") .attr("dx", "25") .attr("dy", "-0.5em") .html((d) => d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) === 0 ? "$0*" : `${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 campaign`; } 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, 250000]) .range(d3.schemeGreens[9]); const pctScale = d3.scaleLinear().domain([0, 10]).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() : //: 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:[] 30:{"id":"e491b0d1713006bb","slug":null,"title":"NYS Office of Temporary and Disability Assistance","thumbnail":"202e2c4cb7b1d2e39b7fa60a370f0ea5f2b578cb0818e27b2f1f386dc3cc818a","access_level":"public","create_time":"$D2023-08-04T04:50:34.677Z","update_time":"$D2023-12-22T05:17:18.764Z","view_time":null,"first_public_time":"$D2023-08-04T04:50:34.677Z","has_unpublished_edits":null,"fork":{"id":"7a666d7b13a0f1c0","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":"919cb9b550a00f42","login":"ccmnewmarkj","name":"Center for Community Media","avatar_url":"https://avatars-next.observableusercontent.com/50dcc2b89ceb03cbd960dca676a2394ec464a52bedc175f48e6c00a2ebc7801d","tier":"starter_2024"},"version":1349,"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":2,"collection":null,"type":"notebook","body":{"title":"NYS Office of Temporary and Disability Assistance","cells":[{"id":0,"value":"# NYS Office of Temporary and Disability Assistance\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 flight_dates: \"July–Sept 2018\",\n \"Traditional media\": 2549056,\n \"Social media and tech\": 593693\n },\n {\n flight_dates: \"Sept 2019\",\n \"Traditional media\": 0,\n \"Social media and tech\": 92228.36\n },\n {\n flight_dates: \"June–July 2021\",\n \"Traditional media\": 31311,\n \"Social media and tech\": 463100\n },\n {\n flight_dates: \"Oct 2021\",\n \"Traditional media\": 0,\n \"Social media and tech\": 122022\n }\n].map(({ flight_dates, ...d }) => ({ time: flight_dates, ...d })) // rename key","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"amtData = [\n {\n Category: \"Traditional media\",\n \"July–Sept 2018\": 2549056,\n \"Sept 2019\": 0,\n \"June–July 2021\": 31311,\n \"Oct 2021\": 0\n },\n {\n Category: \"Social media and tech\",\n \"July–Sept 2018\": 593693,\n \"Sept 2019\": 92228.36,\n \"June–July 2021\": 463100,\n \"Oct 2021\": 122022\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"pctData = [\n {\n Category: \"Traditional media\",\n \"July–Sept 2018\": 81.1,\n \"Sept 2019\": 0,\n \"June–July 2021\": 6.3,\n \"Oct 2021\": 0\n },\n {\n Category: \"Social media and tech\",\n \"July–Sept 2018\": 18.9,\n \"Sept 2019\": 100,\n \"June–July 2021\": 93.7,\n \"Oct 2021\": 100\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"