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; }