Public
Edited
Aug 31, 2022
Insert cell
md`# IBM Watson Sentence Level Analysis`
Insert cell
chart = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
const sentenceWidth = (width - margin.left - margin.right) / data.length;
const innerHeight = (height - margin.top - margin.bottom);
let chapters = svg.append('g')
.selectAll('g')
.data(data)
.join('g')
.attr('id', (d, i) => `chapter-${i}`)
.attr('transform', (d, i) => {
let x = margin.left + halfSpacing + (i * sentenceWidth);
let y = margin.top + halfSpacing;
return `translate(${x}, ${y})`;
})
chapters.append('text')
.attr('x', sentenceWidth / 2)
.attr('y', innerHeight + (margin.bottom / 2))
.style('text-anchor', 'middle')
.text((d, i) => i + 1)
chapters.selectAll('rect')
.data(d => d.sentences_tone)
.join('rect')
.attr('id', (d, i) => `sentence-${i}`)
.attr('order', d => d.toneId)
.attr('x', 0)
.attr('y', (d, i, data) => i * (innerHeight / data.length))
.attr('width', sentenceWidth - spacing)
.attr('height', (d, i, data) => (innerHeight / data.length) - spacing)
.style('fill', d => {
let t = (d.score - scoreRange[d.toneId].min) / (scoreRange[d.toneId].max - scoreRange[d.toneId].min);
return d3.rgb(colors[d.toneId](t)).hex();
});
return svg.node();
}
Insert cell
{
for(let d1 of data) {
for(let d2 of d1.sentences_tone) {
if(d2.tones.length) {
let toneId = d2.tones[0].tone_id;
let score = d2.tones[0].score;
for(let t of d2.tones) {
if(t.score > score) {
toneId = t.tone_id;
score = t.score;
}
}
d2.toneId = toneId;
d2.score = score;
} else {
d2.toneId = 'none';
d2.score = 0.5;
}
if(d2.score < scoreRange[d2.toneId].min) {
scoreRange[d2.toneId].min = d2.score;
}
if(d2.score > scoreRange[d2.toneId].max) {
scoreRange[d2.toneId].max = d2.score;
}
}
d1.sentences_tone.sort((a, b) => {
let diff = order[b.toneId] - order[a.toneId];
if(diff === 0) {
diff = a.score - b.score;
}
return diff;
});
}
}
Insert cell
data = await FileAttachment("alice-in-wonderland-TA.json").json()
Insert cell
Insert cell
Insert cell
colors = ({
sadness: d3.interpolateLab("#deebf7","#9ecae1","#3182bd"), // Blue
joy: d3.interpolateLab("#ffffc8", "#ffff92", "#ffff5a"), // Yellow
analytical: d3.interpolateLab("#efedf5","#bcbddc","#756bb1"), // Purple
tentative: d3.interpolateLab("#fee6ce","#fdae6b","#e6550d"), // Orange
fear: d3.interpolateLab("#a1d99b","#A0CE69","#C4F47F"), // Dark Green
anger: d3.interpolateLab("#fee0d2","#fc9272","#de2d26"), // Red
confident: d3.interpolateLab("#ffffc8", "#A0D568", "#ffff5a"), // Green
none: d3.interpolateLab("#eeeeee")
//"#f0f0f0","#bdbdbd","#636363" Grey
})
Insert cell
halfSpacing = spacing / 2;
Insert cell
spacing = 1;
Insert cell
height = 800;
Insert cell
margin = ({top: 10, right: 10, bottom: 50, left: 10})
Insert cell
d3 = require("d3@6")
Insert cell

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.
Learn more