<p>Notice that the code for the charts are in the cells below. You can use &#x24;{chart_name} to refer the chart you made in the dashboard. You will also need to change this cell type to html (usually it is markdown or javascript) for the dashboard.</p>

<div class="row">

<div class="column">${chord}</div>

<div class="column">${chart}</div>

.row {

display: flex;

}

.column {

flex: 50%;

}

chord = {

const width = 640;

const height = width;

const outerRadius = Math.min(width, height) * 0.5 - 30;

const innerRadius = outerRadius - 20;

const {names, colors} = data;

const sum = d3.sum(data.flat());

const tickStep = d3.tickStep(0, sum, 100);

const tickStepMajor = d3.tickStep(0, sum, 20);

const formatValue = d3.formatPrefix(",.0", tickStep);

const chord = d3.chord()

.padAngle(20 / innerRadius)

.sortSubgroups(d3.descending);

const arc = d3.arc()

.innerRadius(innerRadius)

.outerRadius(outerRadius);

const ribbon = d3.ribbon()

.radius(innerRadius);

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [-width / 2, -height / 2, width, height])

.attr("style", "max-width: 100%; height: auto; font: 10px sans-serif;");

const chords = chord(data);

const group = svg.append("g")

.selectAll()

.data(chords.groups)

.join("g");

group.append("path")

.attr("fill", d => colors[d.index])

.attr("d", arc)

.append("title")

.text(d => `${d.value.toLocaleString("en-US")} ${names[d.index]}`);

const groupTick = group.append("g")

.selectAll()

.data(d => groupTicks(d, tickStep))

.join("g")

.attr("transform", d => `rotate(${d.angle * 180 / Math.PI - 90}) translate(${outerRadius},0)`);

groupTick.append("line")

.attr("stroke", "currentColor")

.attr("x2", 6);

groupTick

.filter(d => d.value % tickStepMajor === 0)

.append("text")

.attr("x", 8)

.attr("dy", ".35em")

.attr("transform", d => d.angle > Math.PI ? "rotate(180) translate(-16)" : null)

.attr("text-anchor", d => d.angle > Math.PI ? "end" : null)

.text(d => formatValue(d.value));

svg.append("g")

.attr("fill-opacity", 0.7)

.selectAll()

.data(chords)

.join("path")

.attr("d", ribbon)

.attr("fill", d => colors[d.target.index])

.attr("stroke", "white")

.append("title")

.text(d => `${d.source.value.toLocaleString("en-US")} ${names[d.source.index]} → ${names[d.target.index]}${d.source.index !== d.target.index ? `\n${d.target.value.toLocaleString("en-US")} ${names[d.target.index]} → ${names[d.source.index]}` : ``}`);

return svg.node();

chart = {

// Declare the chart dimensions and margins.

const width = 640;

const height = 640;

const marginTop = 30;

const marginRight = 0;

const marginBottom = 30;

const marginLeft = 40;

// Declare the x (horizontal position) scale.

const x = d3.scaleBand()

.domain(d3.groupSort(data2, ([d]) => -d.frequency, (d) => d.letter)) // descending frequency

.range([marginLeft, width - marginRight])

.padding(0.1);

// Declare the y (vertical position) scale.

const y = d3.scaleLinear()

.domain([0, d3.max(data2, (d) => d.frequency)])

.range([height - marginBottom, marginTop]);

// Create the SVG container.

const svg = d3.create("svg")

.attr("width", width)

.attr("height", height)

.attr("viewBox", [0, 0, width, height])

.attr("style", "max-width: 100%; height: auto;");

// Add a rect for each bar.

svg.append("g")

.attr("fill", "steelblue")

.selectAll()

.data(data2)

.join("rect")

.attr("x", (d) => x(d.letter))

.attr("y", (d) => y(d.frequency))

.attr("height", (d) => y(0) - y(d.frequency))

.attr("width", x.bandwidth());

// Add the x-axis and label.

svg.append("g")

.attr("transform", `translate(0,${height - marginBottom})`)

.call(d3.axisBottom(x).tickSizeOuter(0));

// Add the y-axis and label, and remove the domain line.

svg.append("g")

.attr("transform", `translate(${marginLeft},0)`)

.call(d3.axisLeft(y).tickFormat((y) => (y * 100).toFixed()))

.call(g => g.select(".domain").remove())

.call(g => g.append("text")

.attr("x", -marginLeft)

.attr("y", 10)

.attr("fill", "currentColor")

.attr("text-anchor", "start")

.text("↑ Frequency (%)"));

// Return the SVG element.

return svg.node();