Public
Edited
Apr 18, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
margin = {
return {"left": 30, "top": 30, "right": 10, "bottom": 10}
}
Insert cell
width = 1000
Insert cell
height = 550
Insert cell
innerR = 185
Insert cell
outerR = 200
Insert cell
barPlotWidth = 200
Insert cell
barPlotHeight = 320
Insert cell
rightPanelWidth = barPlotWidth + 80
Insert cell
rightPanelHeight = barPlotHeight + 100
Insert cell
timelineWidth = 500
Insert cell
timelineHeight = 30
Insert cell
Insert cell
pie = d3.pie()
.value(d => d.prob)
Insert cell
arc = d3.arc()
.innerRadius(innerR)
.outerRadius(outerR)
.padAngle(Math.PI/72/2/2)
Insert cell
arcLabels = d3.arc()
.innerRadius(innerR + 10)
.outerRadius(outerR + 10)
.padAngle(Math.PI/72/2/2)
Insert cell
xScaleTopics = d3.scaleLinear()
.domain([0,
d3.max(topic_dist.map(d => d.word_dist.map(e => e.prob)).map(d => d3.max(d)))])
.range([0, barPlotWidth])
Insert cell
yScaleTopics = d3.scaleBand()
.domain(topic_dist[0].word_dist.map(d => d.word))
.rangeRound([0, barPlotHeight])
.paddingInner(0.07)
Insert cell
xScaleCircles = d3.scaleLinear()
.domain([0, d3.max(tweets_dist.map(d => d.x))])
.range([0, innerR * 0.7])
Insert cell
yScaleCircles = d3.scaleLinear()
.domain([0, d3.max(tweets_dist.map(d => d.y))])
.range([0, -innerR * 0.7])
Insert cell
colorTopics = d3.scaleOrdinal()
.domain(topic_dist.map(d => d.label))
.range(d3.schemeTableau10)
Insert cell
colorScaleCircles = d3.scaleOrdinal()
.domain([0, 1, 2])
.range(d3.schemePastel1)
Insert cell
xScaleTimeline = d3.scaleBand()
.domain([... new Set(tweets_dist.map(d => d.week))])
.range([0, timelineWidth])
.paddingInner(0.1)
Insert cell
Insert cell
topic_dist_out_order = FileAttachment("topics_dist@2.json").json()
Insert cell
topic_dist = {
var topic_dist = topic_dist_out_order.slice()
for(let i = 0; i < topic_dist.length; i++){
console.log(i)
topic_dist[i].word_dist = topic_dist_out_order[i].word_dist.sort((a, b) => -(a.prob - b.prob))
}
return topic_dist
}
Insert cell
tweets_dist_out_order = FileAttachment("tweets_dist@2.json").json()
Insert cell
tweets_dist = tweets_dist_out_order.sort((a, b) => a.week - b.week || a.ranking - b.ranking).filter(d => d.ranking == 0)
Insert cell
data = await FileAttachment("topics_timeline (2).csv").csv()
Insert cell
data.slice(0,2)
Insert cell
function sorted_idx(arr) {
var indexed = arr.map(function(e,i){return {ind: i, val: e}});
indexed.sort(function(x, y){return x.val > y.val ? 1 : x.val == y.val ? 0 : -1});
var indices = indexed.map(function(e){return e.ind});
return indices
}
Insert cell
function prepare_data(n, d) {
var tmp = d.slice(0,n);
var out = []
for (var t=0; t<n; t++) {
out.push({"key": tmp[t].name, "values":[], "selector": tmp[t].name.replace(/[^A-Za-z0-9]/g,'').replace(/ /g,'')})
}

// calculate ranks for each week
for (var date=1; date<40; date++) {
var ranks = tmp.map(x => +x[date]); // list of all ranks

// get sorted order
var indices = sorted_idx(ranks);

// save values
for (var i = 0; i < indices.length; i++) {
out[indices[i]].values.push({"date":date, "rank":i})
}
}

return out;
}
Insert cell
topicHashtags = await FileAttachment("topics_hashtags (1).csv").csv()
Insert cell
css_style = {
// define some css commands for styling text
const styleText = `
h1, h2, h3, h4, h5, h6, p, table {
max-width: 900px;
font-family: sans-serif;
}
#CovidTopicsTimeline {
width:100%;
margin:auto;
font-family: sans-serif;
}
#CovidTopicsTimeline .controls {
width:100%;
margin:auto;
padding: 10px;
clear:both;
background-color: #d8d5d5;
height:50px;
}
#CovidTopicsTimeline .controls button{
float:center;
clear:both;
margin: 5px;
width:80px;
}

line.grid{
opacity:0.5
}

.labelContainer {
width:150px;
height:20px;
cursor:pointer;
}

.labelText {
fill:white;
font: 11px sans-serif;
font-weight:bold;
text-anchor: left;
cursor:pointer;
pointer-events:none;
}

path.line.background{
stroke: #bfbeba !important;
opacity:0.3;
}
.labelContainer.background {
opacity:0.3;
}
text.dateText{
fill:white;
font: 0.8em sans-serif;
text-anchor:middle;
pointer-events:none;
font-weight:bold;
}

#CovidTopicsTimeline p {
width:100%;
padding:1%;
max-height:70px;
min-height:70px;
overflow:hidden;
text-overflow:ellipsis;
}
p .label {
background-color:black;
color:white;
padding: 3px 5px;
font-weight: bold;
font-size: 0.9em;
}
`
const css = d3.create("style").text(styleText)
return css.node()
}
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
dataAtualFormatada = function(data){
var dia = data.getDate().toString(),
diaF = (dia.length == 1) ? '0'+dia : dia,
mes = (data.getMonth()+1).toString(), //+1 pois no getMonth Janeiro começa com zero.
mesF = (mes.length == 1) ? '0'+mes : mes,
anoF = data.getFullYear();
return diaF+"/"+mesF+"/"+anoF;
}
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