Public
Edited
Apr 25, 2023
c[0]
c[1]
data_fraction_github = fetch(gh_path+pol_button_fraction+"/"+speech_button_fraction+"/analysis/visuals/"+list_of_visualizations[type_button_fraction]+".json").then((response) => response.json())
data_legend = [
{title: "No/Low", x: 2, y: 0.25},
{title: "Moderate", x: 2, y: 0.65},
{title: "High/Severe", x:2, y: 0.9}
]
viewof pol_button_fraction = {
const select = politicalLeaderButton();
select.style.width = "40%";
return select;
}
// viewof speech_button_fraction = speechButton(pol_button_fraction)
viewof speech_button_fraction = {
const select = Inputs.select(new Map(speechButton(pol_button_fraction)), {value: speechButton(pol_button_fraction)[0], label: ""});
select.style.width = "40%";
select.style.paddingTop = "10px";
select.style.paddingBottom = "10px";
return select;
}
viewof type_button_fraction = {
const select = visualizationsButton();
select.style.width = "40%";
select.style.paddingBottom = "20px";
return select;
}
c = testCol()
function testCol(){
// create a container element with flexbox layout
const container = html`<div style="display: flex; flex-direction: row;"></div>`;
// create two selection inputs and append them to the container
const col1 = container.appendChild(html`<div style="width: 50%; padding-right: 10px"></div>`);
const col2 = container.appendChild(html`<div style="width: 50%; padding-left: 10px"></div>`);
const selectStep1 = politicalLeaderButton();
selectStep1.style.width = "100%";
const selectStep2 = Inputs.select(new Map(speechButton(pol_button_fraction)), {value: speechButton(pol_button_fraction)[0], label: ""});
selectStep2.style.width = "100%";
// add options to the selection inputs
col1.appendChild(selectStep1);
col2.appendChild(selectStep2);
// append the container to the DOM
return [container, selectStep1, selectStep2];
}
gh_path = "https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/pre-elections/"
function politicalLeaderButton(){
let list_of_leaders = Object.keys(gh_list_of_speeches)
return Inputs.select(list_of_leaders, {value:list_of_leaders[0], label: ""})
}
function speechButton(leader){
let list_of_speeches = Object.values(gh_list_of_speeches[leader])
return list_of_speeches
}
gh_list_of_speeches = fetch("https://raw.githubusercontent.com/Datalab-AUTH/imedd-political-speech-data-test/main/list_of_speeches_new.json").then((response) => response.json())
list_of_visualizations = Object({
// "Polarization": "polarization_sequence",
"Polarization": "polarization-definition_sequence",
// "Toxicity": "toxicity_sequence",
// "Toxicity Def": "toxicity-definition_sequence",
// "Populism": "populism_sequence",
"Populism": "populism-definition_sequence",
// "Hate Speech": "hate speech_sequence"
})
function visualizationsButton(){
return Inputs.select(Object.keys(list_of_visualizations), {value: Object.keys(list_of_visualizations), label:""})
}
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.
