iarcCauseData=tracker.iarc.causesGetAll(false)
Plotly = require("https://cdn.plot.ly/plotly-latest.min.js")
/*async function getTable(){
var a = await fetch('https://raw.githubusercontent.com/filhoalm/monoapp1/main/data_10012021.csv')
var table = await a.text()
table=table.replaceAll('\r','').split('\n').map( x => x.split(';'))
var header=table[0]
table=table.slice(1).filter(x => x.length==header.length )
var rows = []
table.forEach( x => {
var dat={}
var i=0
var h=''
for (h of header){
dat[h]=x[i]
i+=1
}
rows.push(dat)
})
return rows
}
*/
async function getTable(){
var rows = d3.csv('https://raw.githubusercontent.com/filhoalm/monoapp1/main/data2102023c.csv')
return rows
}
table = await getTable()
function getColumnUniqueValues(key){
var values = ['All']
table.forEach( x => {
var keys = Object.keys(x)
if(keys.includes(key)){
if( ! values.includes(x[key]) ){
values.push(x[key])
}
}
})
return values
}
evidences = getColumnUniqueValues('evidence')
sites = getColumnUniqueValues('cancer_site')
subtypes = getColumnUniqueValues('cancer_subtype')
organs = getColumnUniqueValues('organ')
viewof filters = Inputs.form({
selEvidence: Inputs.select(evidences, {label: "Evidence Level", id:"field"}),
selType: Inputs.select(subtypes, {label: "Cancer subtypes", id:"field"}),
selOrgan: Inputs.select(organs, {label: "Organs", id:"field"})
})
/* ************** Apparently there is no way to overwrite css to put the fields next to each other, to save vertical space ******************** */
viewof selEvidence= Inputs.select(evidences, {label: "Evidence Level", id:"field"})
viewof selSite = Inputs.select(sites, {label: "Cancer sites"})
viewof selType = Inputs.select(subtypes, {label: "Cancer subtypes"})
viewof selOrgan = Inputs.select(organs, {label: "Organs"})
function getTableFiltered(){
var filtered = table
if(selEvidence!='All'){
filtered=filtered.filter( x => x['evidence']==selEvidence )
}
if(selSite!='All'){
filtered=filtered.filter( x => x['cancer_site']==selSite )
}
if(selType!='All'){
filtered=filtered.filter( x => x['cancer_subtype']==selType )
}
if(selOrgan!='All'){
filtered=filtered.filter( x => x['organ']==selOrgan )
}
return filtered
}
function getOrderedFilteredAgentsData(){
var filtered = getTableFiltered()
var agents={}
filtered.forEach(x => {
var keys = Object.keys(agents)
if( ! keys.includes(x['agent']) ){
agents[x['agent']] = 0
}
agents[x['agent']] += 1
})
var agentsDat={'x': Object.keys(agents), 'y': Object.values(agents)}
return agentsDat
}
filtered = getOrderedFilteredAgentsData()
/* ******************** Ordering barplot data from higher to low ***************** */
function orderDict(x,y){
var tuples = [];
for (var i=0; i<x.length; i++) {
tuples.push([x[i], y[i]]);
}
tuples.sort(function(a, b) {
a = a[1];
b = b[1];
return a < b ? 1 : (a > b ? -1 : 0);
});
var objr={'x': [], 'y': []}
for (var i = 0; i < tuples.length; i++) {
var key = tuples[i][0];
var value = tuples[i][1];
objr['x'].push(key)
objr['y'].push(value)
// do something with key and value
}
return objr
}
{
var ordered=orderDict( filtered['x'], filtered['y'])
var trace = {
x: ordered['x'],
y: ordered['y'],
name: 'Agents',
marker: {color: 'rgb(26, 118, 255)'},
type: 'bar'
};
var data = [trace];
var layout = {
title: 'Agents filtered with constraints',
xaxis: {
title: 'Agents',
tickfont: {
size: 14,
color: 'rgb(107, 107, 107)'
}},
yaxis: {
title: 'Occurrences',
},
legend: {
x: 0,
y: 1.0,
bgcolor: 'rgba(255, 255, 255, 0)',
bordercolor: 'rgba(255, 255, 255, 0)'
},
barmode: 'group',
bargap: 0.15,
bargroupgap: 0.1,
width: width
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
function getOrderedFilteredAgentClassesData(){
var filtered = getTableFiltered()
var agents={}
filtered.forEach(x => {
var keys = Object.keys(agents)
if( ! keys.includes(x['class']) ){
agents[x['class']] = 0
}
agents[x['class']] += 1
})
var agentsDat={'x': Object.keys(agents), 'y': Object.values(agents)}
return agentsDat
}
filteredClass = getOrderedFilteredAgentClassesData()
{
var trace = {
values: filteredClass['y'],
labels: filteredClass['x'],
type: 'pie'
};
var data = [trace];
var layout = {
width: width,
title: 'Classes of Agents filtered with constraints'
};
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
evs=evidences.filter(x => x!='All')
viewof selEvidenceTree= Inputs.select(evs, {label: "Evidence Level", id:"field"})
function getTableFilteredTree(){
var filtered = table
filtered=filtered.filter( x => x['evidence']==selEvidenceTree )
var tree={}
filtered.forEach( x => {
var agent = x['agent_subtype']
var site = x['cancer_site']
var keys=Object.keys(tree)
keys=Object.keys(tree)
if(!keys.includes(site)){
tree[site]={}
}
keys=Object.keys(tree[site])
if(!keys.includes(agent)){
tree[site][agent]=0
}
tree[site][agent]+=1
})
var leaves=['Agents by Cancer sites']
var parents=['']
var z = [0]
var all=0
for (var site of Object.keys(tree)){
for (var agent of Object.keys(tree[site])){
parents.push(site)
leaves.push(agent)
z.push(tree[site][agent])
}
var total = d3.sum(Object.values(tree[site]))
parents.push('Agents by Cancer sites')
leaves.push(site)
z.push(total)
all+=1
}
z[0]=all
return [leaves, parents, z]
}
infomap=getTableFilteredTree()
{
var data = [{
type: "treemap",
labels: infomap[0],
parents: infomap[1],
values: infomap[2],
//textinfo: "label+value+percent parent+percent entry",
textinfo: "label+value+percent entry",
domain: {"x": [0, 0.48]},
outsidetextfont: {"size": 20, "color": "#377eb8"},
marker: {"line": {"width": 2}},
pathbar: {"visible": false}
}];
var layout = {
width: 2000,
annotations: [{
showarrow: false,
text: "Distribution of agents according to cancer site - "+selEvidenceTree,
x: 0.25,
xanchor: "center",
y: 1.1,
yanchor: "bottom"
}]}
const div = DOM.element('div');
Plotly.newPlot(div, data, layout);
return div;
}
agents = getColumnUniqueValues('agent_subtype')
agentClasses = getColumnUniqueValues('class')
viewof selAgent = Inputs.select(agents, {label: "Agents"})
viewof selAgentClass = Inputs.select(agentClasses, {label: "Classes of Agents"})
function getTableFilteredByClassAgent(){
var filtered = table
if(selEvidence!='All'){
filtered=filtered.filter( x => x['evidence']==selEvidence )
}
if(selSite!='All'){
filtered=filtered.filter( x => x['cancer_site']==selSite )
}
if(selType!='All'){
filtered=filtered.filter( x => x['cancer_subtype']==selType )
}
if(selAgent!='All'){
filtered=filtered.filter( x => x['agent_subtype']==selAgent )
}
if(selAgentClass!='All'){
filtered=filtered.filter( x => x['class']==selAgentClass )
}
if(selOrgan!='All'){
filtered=filtered.filter( x => x['organ']==selOrgan )
}
return filtered
}
tableShow = getTableFilteredByClassAgent()
Inputs.table(tableShow)
links_scraped_complete = FileAttachment("links_scraped_complete.tsv").tsv({typed: false})
function getLinksVolumeYear(){
var options_ = {'All': []}
links_scraped_complete.forEach( el => {
options_[ el['volume']+'/'+el['year']] = [el['link'], el['download_link']]
})
return options_
}
options = getLinksVolumeYear()
keys = Object.keys(options)
viewof selvolyear = Inputs.select(Object.keys(options), {label: 'Monographs by volume/year'})
selAgent
document.getElementById('info').innerHTML= selvolyear=='All' ? 'Select the volume and year!' : `Go to <a href='${options[selvolyear][0]}' target='_blank'>this page</a> or download <a href='${options[selvolyear][1]}' target='_blank' >this book</a> to see more information about this volume ${selvolyear.split('/')[0]} and year ${selvolyear.split('/')[1]}`
// links_scraped_complete = FileAttachment("links_scraped_complete.tsv").tsv()
links_scraped_complete
parsed_sentences = FileAttachment("parsed_sentences@2.json").json()
function filterSentencesDb(){
var txt=""
for(var k of Object.keys(parsed_sentences)){
for (var s of parsed_sentences[k]){
var page = s['page']
s=s['sentence']
if( k.replace('_','/')==selvolyear || ( selAgent!='All' && s.toLowerCase().indexOf(selAgent.toLowerCase())!=-1) ){
txt+=`<li> <b>${k.replace('_','/')}, page ${page}</b> ${s} </li>`
}
}
}
document.getElementById('sentences').innerHTML = txt=='' ? 'No sentences found' : txt
}
filterSentencesDb()
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.
