Public
Edited
Apr 18, 2023
margin = {
return {"left": 30, "top": 30, "right": 10, "bottom": 10}
}
width = 1000
height = 550
innerR = 185
outerR = 200
barPlotWidth = 200
barPlotHeight = 320
rightPanelWidth = barPlotWidth + 80
rightPanelHeight = barPlotHeight + 100
timelineWidth = 500
timelineHeight = 30
pie = d3.pie()
.value(d => d.prob)
arc = d3.arc()
.innerRadius(innerR)
.outerRadius(outerR)
.padAngle(Math.PI/72/2/2)
arcLabels = d3.arc()
.innerRadius(innerR + 10)
.outerRadius(outerR + 10)
.padAngle(Math.PI/72/2/2)
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])
yScaleTopics = d3.scaleBand()
.domain(topic_dist[0].word_dist.map(d => d.word))
.rangeRound([0, barPlotHeight])
.paddingInner(0.07)
xScaleCircles = d3.scaleLinear()
.domain([0, d3.max(tweets_dist.map(d => d.x))])
.range([0, innerR * 0.7])
yScaleCircles = d3.scaleLinear()
.domain([0, d3.max(tweets_dist.map(d => d.y))])
.range([0, -innerR * 0.7])
colorTopics = d3.scaleOrdinal()
.domain(topic_dist.map(d => d.label))
.range(d3.schemeTableau10)
colorScaleCircles = d3.scaleOrdinal()
.domain([0, 1, 2])
.range(d3.schemePastel1)
xScaleTimeline = d3.scaleBand()
.domain([... new Set(tweets_dist.map(d => d.week))])
.range([0, timelineWidth])
.paddingInner(0.1)
topic_dist_out_order = FileAttachment("topics_dist@2.json").json()
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
}
tweets_dist_out_order = FileAttachment("tweets_dist@2.json").json()
tweets_dist = tweets_dist_out_order.sort((a, b) => a.week - b.week || a.ranking - b.ranking).filter(d => d.ranking == 0)
data = await FileAttachment("topics_timeline (2).csv").csv()
data.slice(0,2)
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
}
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;
}
topicHashtags = await FileAttachment("topics_hashtags (1).csv").csv()
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()
}
d3 = require("d3@6")
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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.