2c:null 2d:["$","title",null,{"children":"NYS Department of Agriculture and Markets | D3 Work | Observable"}] 32:T64fb,chart = { const dimensions = { width: 475, height: 350, margins: { top: 10, right: 100, 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

BY: Budget year

`; // 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", "#5BC0F8", "#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.35); // 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(60, ${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("Budget 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(4) // num of ticks .tickSizeOuter(0) // remove outer tick mark .tickFormat((d) => d > 0 ? d === 3000000 ? d3.format("$.0s")(d).toLowerCase() : 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) => d === 3000000 ? `translate(-2,-10)` : `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(60,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) => { 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["Unspecified digital media"] + d.data["Unspecified media placements/buys"] + d.data["Social media and tech"] + 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" : 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["Unspecified digital media"] + d.data["Unspecified media placements/buys"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"]) ) }
${ d.data["Unspecified traditional media"] === +(d[1] - d[0]).toFixed(1) || d.data["Unspecified traditional media"] === +(d[1] - d[0]).toFixed(2) ? "▸  Unspecified traditional media:" : "Unspecified traditional media:" } ${ d.data["Unspecified traditional media"] === 0 ? "$0" : d3 .format("$.3s")(d.data["Unspecified traditional media"]) .toLowerCase() } / ${ d.data["Unspecified traditional media"] === 0 ? "0%" : d3.format(".1%")( d.data["Unspecified traditional media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Unspecified digital media"] + d.data["Unspecified media placements/buys"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"]) ) }
${ d.data["Unspecified digital media"] === +(d[1] - d[0]).toFixed(1) || d.data["Unspecified digital media"] === +(d[1] - d[0]).toFixed(2) ? "▸  Unspecified digital media:" : "Unspecified digital media:" } ${ d.data["Unspecified digital media"] === 0 ? "$0" : d3.format("$.3s")(d.data["Unspecified digital media"]).toLowerCase() } / ${ d.data["Unspecified digital media"] === 0 ? "0%" : d3.format(".1%")( d.data["Unspecified digital media"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Unspecified digital media"] + d.data["Unspecified media placements/buys"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"]) ) }
${ d.data["Unspecified media placements/buys"] === +(d[1] - d[0]).toFixed(1) || d.data["Unspecified media placements/buys"] === +(d[1] - d[0]).toFixed(2) ? "▸  Unspecified media placements:" : "Unspecified media placements:" } ${ d.data["Unspecified media placements/buys"] === 0 ? "$0" : d3 .format("$.3s")(d.data["Unspecified media placements/buys"]) .toLowerCase() } / ${ d.data["Unspecified media placements/buys"] === 0 ? "0%" : d3.format(".1%")( d.data["Unspecified media placements/buys"] / (d.data["Community media"] + d.data["Traditional media"] + d.data["Unspecified traditional media"] + d.data["Unspecified digital media"] + d.data["Unspecified media placements/buys"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"]) ) }
${ 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["Unspecified digital media"] + d.data["Unspecified media placements/buys"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"]) ) .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["Unspecified digital media"] + d.data["Unspecified media placements/buys"] + d.data["Social media and tech"] + d.data["Ad serving/targeting companies"]) ) .toLowerCase() }

FY ${ d.data.time } `; tooltip.html(tooltipContents); if (window.innerWidth > 698) { tooltip .style( "transform", `translate(${dimensions.width - dimensions.margins.right}px,65px)` ) .transition() .duration(500) .style("opacity", 0.95); } else { tooltip .style("transform", `translate(0,100px)`) .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) + 60) .attr("y", (d) => yScale( d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) ) ) .attr("text-anchor", "middle") .attr("dx", "24") .attr("dy", "-0.5em") .html((d) => d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) < 2500 ? null : `${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"); // add additional line for 2020 const barLabels = svg .append("g") .selectAll("text") .data(data) .join("text") .attr("class", "bar-labels") .attr("width", "1rem") .attr("x", (d) => xScale(d.time) + xScale.bandwidth()) .attr("y", (d) => yScale( d3.sum( Object.keys(data[0]).filter((d) => d !== "time"), (c) => d[c] ) ) ) .html(null) .attr("font-family", "Inter") .attr("font-weight", "400") .attr("font-size", "0.8rem") .attr("text-anchor", "middle"); const firstLine = barLabels .append("tspan") .attr("x", (d) => xScale(d.time) + xScale.bandwidth()) .attr("dx", "3em") .attr("dy", "-4em") .html((d) => (d.time === 2020 ? "$2.4k" : null)); const secLine = firstLine .append("tspan") .attr("x", (d) => xScale(d.time) + xScale.bandwidth()) .attr("dx", "3.25em") .attr("dy", "1.2em") .attr("fill", "#818181") .attr("font-size", "0.75rem") .html((d) => (d.time === 2020 ? "to" : null)); const thirdLine = secLine .append("tspan") .attr("x", (d) => xScale(d.time) + xScale.bandwidth()) .attr("dx", "3.25em") .attr("dy", "1.1em") .html((d) => (d.time === 2020 ? "unspecified" : null)); const fourthLine = thirdLine .append("tspan") .attr("x", (d) => xScale(d.time) + xScale.bandwidth()) .attr("dx", "3.25em") .attr("dy", "1.1em") .html((d) => (d.time === 2020 ? "traditional and" : null)); fourthLine .append("tspan") .attr("x", (d) => xScale(d.time) + xScale.bandwidth()) .attr("dx", "3.25em") .attr("dy", "1.1em") .html((d) => (d.time === 2020 ? "digital media" : null)); // 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 budget year`; } 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}%` : //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); } }); // .style("background-color", function (d) { // if (tableData === amtData && d > 0 && d < 1000000) { // if (d < 500000) { // if (d < 100000) { // return "#f8f8f8"; // lowest // } // return "#d5f3e5"; // middle // } // return "#b0e9d1"; // highest // } else if (tableData === pctData && d > 0) { // if (d < 33) { // return "#f8f8f8"; // } else if (d < 66) { // return "#d5f3e5"; // } else { // return "#b0e9d1"; // } // } // }); } return canvas; }33:T6f7,data = [ { budget_year: 2016, "Community media": 1844.86, "Traditional media": 0, "Unspecified traditional media": 0, "Unspecified digital media": 0, "Unspecified media placements/buys": 390951.13, "Social media and tech": 48194.56, "Other media placements": 0 }, { budget_year: 2017, "Community media": 1640.31, "Traditional media": 2517.57, "Unspecified traditional media": 0, "Unspecified digital media": 0, "Unspecified media placements/buys": 429684.24, "Social media and tech": 42156.14, "Other media placements": 0 }, { budget_year: 2018, "Community media": 0, "Traditional media": 0, "Unspecified traditional media": 251215.97, "Unspecified digital media": 106484.16, "Unspecified media placements/buys": 1069.92, "Social media and tech": 66572.94, "Other media placements": 4375 }, { budget_year: 2019, "Community media": 0, "Traditional media": 0, "Unspecified traditional media": 1865789.87, "Unspecified digital media": 1152998.76, "Unspecified media placements/buys": 0, "Social media and tech": 136500, "Other media placements": 56937.5 }, { budget_year: 2020, "Community media": 0, "Traditional media": 0, "Unspecified traditional media": 1531.25, "Unspecified digital media": 843.75, "Unspecified media placements/buys": 0, "Social media and tech": 0, "Other media placements": 0 } ] .map(({ budget_year, ...d }) => ({ ...d, time: budget_year })) // rename key .map((d) => { // rename key d["Ad serving/targeting companies"] = d["Other media placements"]; delete d["Other media placements"]; return d; }) .map(({ time, ...d }) => ({ time, ...d })) // reorder keys34:T45a,amtData = [ { Category: "Community media", "BY 2016": 1844.86, "BY 2017": 1640.31, "BY 2018": 0, "BY 2019": 0, "BY 2020": 0 }, { Category: "Traditional media", "BY 2016": 0, "BY 2017": 2517.57, "BY 2018": 0, "BY 2019": 0, "BY 2020": 0 }, { Category: "Unspecified traditional media", "BY 2016": 0, "BY 2017": 0, "BY 2018": 251215.97, "BY 2019": 1865789.87, "BY 2020": 1531.25 }, { Category: "Unspecified digital media", "BY 2016": 0, "BY 2017": 0, "BY 2018": 106484.16, "BY 2019": 1152998.76, "BY 2020": 843.75 }, { Category: "Unspecified media placements/buys", "BY 2016": 390951.13, "BY 2017": 429684.24, "BY 2018": 1069.92, "BY 2019": 0, "BY 2020": 0 }, { Category: "Social media and tech", "BY 2016": 48194.56, "BY 2017": 42156.14, "BY 2018": 66572.94, "BY 2019": 136500, "BY 2020": 0 }, { Category: "Ad serving/targeting companies", "BY 2016": 0, "BY 2017": 0, "BY 2018": 4375, "BY 2019": 56937.5, "BY 2020": 0 } ]35:T40e,pctData = [ { Category: "Community media", "BY 2016": 0.4, "BY 2017": 0.3, "BY 2018": 0, "BY 2019": 0, "BY 2020": 0 }, { Category: "Traditional media", "BY 2016": 0, "BY 2017": 0.5, "BY 2018": 0, "BY 2019": 0, "BY 2020": 0 }, { Category: "Unspecified traditional media", "BY 2016": 0, "BY 2017": 0, "BY 2018": 58.5, "BY 2019": 58.1, "BY 2020": 64.5 }, { Category: "Unspecified digital media", "BY 2016": 0, "BY 2017": 0, "BY 2018": 24.8, "BY 2019": 35.9, "BY 2020": 35.5 }, { Category: "Unspecified media placements/buys", "BY 2016": 88.7, "BY 2017": 90.3, "BY 2018": 0.2, "BY 2019": 0, "BY 2020": 0 }, { Category: "Social media and tech", "BY 2016": 10.9, "BY 2017": 8.9, "BY 2018": 15.5, "BY 2019": 4.2, "BY 2020": 0 }, { Category: "Ad serving/targeting companies", "BY 2016": 0, "BY 2017": 0, "BY 2018": 1, "BY 2019": 1.8, "BY 2020": 0 } ]36:[] 30:{"id":"93ef2f4fba145c59","slug":null,"title":"NYS Department of Agriculture and Markets","thumbnail":"79dea20b0d1419469643191958df9acf8f9f11d789804022d30a493459e3a0b7","access_level":"public","create_time":"$D2023-09-25T17:53:22.398Z","update_time":"$D2023-09-25T17:53:26.886Z","view_time":null,"first_public_time":"$D2023-09-25T17:53:22.398Z","has_unpublished_edits":null,"fork":{"id":"3a78bdb2c5a3069b","slug":null,"title":"NYS Department of Agriculture and Markets","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":1405,"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 Department of Agriculture and Markets","cells":[{"id":0,"value":"# NYS Department of Agriculture and Markets\n\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"