Public
Edited
Dec 9, 2023
{
//getNumInvites(tedTalkData)
// establish size of interactive visualization - adjust later
const plotWidth = 600;
const plotHeight = 400;
const plotMargin = 25;
const outerWidth = plotWidth + 2 * plotMargin;
const outerHeight = plotHeight + 2 * plotMargin;
// create SVG container for visualization
const svg = d3.create("svg")
.attr("width", outerWidth)
.attr("height", outerHeight)
// .append("g")
.attr("transform", `translate(${plotMargin}, ${plotMargin})`);
// ------------------------------
// calculating average views, total views, and number of invites per speaker
const speakerAvgViews = {};
const speakerTotalViews = {};
const speakerNumInvites = {};
tedTalkData.forEach(d => {
d.views = +d.views; // convert string values to numbers
if (!(d.main_speaker in speakerTotalViews)) {
speakerTotalViews[d.main_speaker] = d.views;
speakerNumInvites[d.main_speaker] = 1;
}
else {
speakerTotalViews[d.main_speaker] += d.views;
speakerNumInvites[d.main_speaker] += 1;
}
});
Object.keys(speakerTotalViews).forEach(d => {
speakerAvgViews[d] = speakerTotalViews[d] / speakerNumInvites[d];
});
// create new array of Objects for visualization
let visOneData = Object.keys(speakerTotalViews).map(speaker => ({
speaker,
total_views: speakerTotalViews[speaker],
average_views: speakerAvgViews[speaker],
num_invites: speakerNumInvites[speaker],
}));
// ------------------------------
// set up scales
const xScale = d3.scaleLinear()
.domain([0, d3.max(visOneData, d => d.total_views)])
.range([0, plotWidth]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(visOneData, d => d.average_views)])
.range([0, plotHeight]);
const pointScale = d3.scaleLinear()
.domain([0, d3.max(visOneData, d => d.num_invites)])
.range([1, 5]); // adjust!
// create tooltip
// const circleGroups = svgContainer.selectAll('circle')
// .data(visOneData)
// .join('g');
// creating circles for each dp
svg.selectAll("circle") // might have to change this?
.data(visOneData)
.join(
(enter) => enter.append("circle"),
(update) => update,
(exit) => exit.remove()
)
.attr("class", "speaker") // might have to change this?
.attr("r", d => pointScale(d.num_invites))
.attr("cx", d => xScale(d.total_views))
.attr("cy", d => yScale(d.average_views))
.attr("opacity", "0.7")
.attr("fill", "red");
return svg.node();
}
d3 = require('d3@7')
tedTalkData = FileAttachment("ted_main.csv").csv();
function getNumInvites(tedTalkData) {
const mainSpeakers = tedTalkData.map(d => d.main_speaker);
const speakerNumInvites = new Map(0);
// count number of times each speaker shows up in main_speaker column
mainSpeakers.forEach(d => {
// Add 1 if speaker is found in map, otherwise set count to 1
const numInvites = speakerNumInvites.has(d) ? speakerNumInvites.get(d) + 1 : 1;
speakerNumInvites.set(d, numInvites);
});
// add number of invites to tedTalkData
tedTalkData.forEach(d => {
d.num_invites = speakerNumInvites.get(d.main_speaker);
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
