Public
Edited
Sep 10, 2023
research_lines = d3.csv("https://raw.githubusercontent.com/ggustavo/mdcc-crawler/master/research_line.csv")
masters = d3.json("https://raw.githubusercontent.com/ggustavo/mdcc-crawler/master/masters.json")
doctors = d3.json('https://raw.githubusercontent.com/ggustavo/mdcc-crawler/master/doctors.json');
/*
valid = {
let works = doctors.works;
function compare( a, b ) {
if ( a.name < b.name ){
return -1;
}
if ( a.name > b.name ){
return 1;
}
return 0;
}
works.sort( compare );
let cCname = 0
for(let d in works){
console.log(works[d].name)
cCname++
}
console.log(cCname)
return true;
}
*/
dataset = {
const data = {
nodes:[],
links:[]
};
data.removeAcento = function removeAcento (text){
text = text.toLowerCase();
text = text.replace(new RegExp('[ÁÀÂÃ]','gi'), 'a');
text = text.replace(new RegExp('[ÉÈÊ]','gi'), 'e');
text = text.replace(new RegExp('[ÍÌÎ]','gi'), 'i');
text = text.replace(new RegExp('[ÓÒÔÕ]','gi'), 'o');
text = text.replace(new RegExp('[ÚÙÛ]','gi'), 'u');
text = text.replace(new RegExp('[Ç]','gi'), 'c');
return text.toUpperCase();
}
let map = d3.map();
data.getNode = function getNode(id){
if(id ==null)return null;
id = data.removeAcento(id);
let node = map.get(id);
if(node == null){
let research_line = null;
for (let i in research_lines){
if(research_lines[i].id == id){
research_line = research_lines[i].research_line;
break;
}
}
node = {
id:id,
isAdvisor:false,
isCoorAdvisor:false,
degree:null,
enable: true,
research_line:research_line
}
//console.log("novo " + id);
map.set(id,node);
data.nodes.push(node);
}else{
// console.log("colide " + id);
}
return node;
}
function assert(test,value){
if(test==true){
console.log("error: " + JSON.stringify(value));
return false;
}
return true;
}
function makeGraph(works){
let count = 0;
for(let d in works){
count++;
let student = data.getNode(works[d].name)
if(!assert(student==null,works[d]))continue;
student.degree = works[d].degree
let advisor = data.getNode(works[d].advisor);
if(!assert(advisor==null,works[d]))continue;
advisor.isAdvisor = true;
let linkA = {
source: advisor.id,
target: student.id,
degree: works[d].degree,
title: works[d].title,
date: works[d].date,
isAdvisor: true,
isCoorAvisor:false,
direction: true,
enable: true
}
data.links.push(linkA);
formartDate(linkA);
linkA.advisorName = advisor.id;
let cooradvisor = data.getNode(works[d].coor_advisor);
if(cooradvisor != null){
cooradvisor.isCoorAdvisor = true;
let linkC = {
source: cooradvisor.id,
target: student.id,
degree: works[d].degree,
title: works[d].title,
date: works[d].date,
isAdvisor: false,
isCoorAvisor:true,
direction: true,
enable: true
}
data.links.push(linkC);
formartDate(linkC);
linkC.advisorName = advisor.id;
linkC.coorAdvisorName = cooradvisor.id;
linkA.coorAdvisorName = cooradvisor.id;
}
}
}
makeGraph(masters.works);
makeGraph(doctors.works);
for (let i in data.nodes){
if(data.nodes[i].research_line == null ){
let id = getOrientador(data.links, data.nodes[i]) ;
// let node = data.getNode(id);
for (let j in research_lines){
if(research_lines[j].id == id){
data.nodes[i].research_line = research_lines[j].research_line;
break;
}
}
if(data.nodes[i].research_line == null ){
console.log("error RL null", data.nodes[i])
}
}
}
return data;
}
function getOrientador(links, d) { //Numero de alunos que o professor orientou ou coorientou
for (let i in links){
if(links[i].target == d.id){
return links[i].source;
}
}
//console.log("ERRO getOrientador()");
return null;
}
dataset2 = dataset.links
facts = crossfilter(dataset2)
studentnameDim = facts.dimension( d => d.source)
degreeDim = facts.dimension( d => d.degree == "master" ? "Mestrado" : "Doutorado" )
monthDim = facts.dimension( d => { return d.date.split("/")[1]
}) //25/05/2018
advisorDim = facts.dimension( d => d.source == d.advisorName ? "Orientação" : "Coorientação" )
yearDim = facts.dimension( d => d.year)
studentnameGroup = studentnameDim.group()
degreeGroup = degreeDim.group()
advisorGroup = advisorDim.group()
yearGroup = yearDim.group()
monthGroup = monthDim.group().reduceSum(function(d) {return 1;});
research_lineDim = facts.dimension( d => {
// console.log("__ "+d.target)
let node = dataset.getNode(d.target);
if(node != null){
return node.research_line
}else{
console.log("ERROR!",node)
}
return "erro2r";
})
research_lineGroup = research_lineDim.group()
function container2(id, title, id2, title2) {
return `
<div class='container'>
<div class='content'>
<div class='container'>
<div class='row'>
<div class='span12' id='${id}' style='display: table; margin-right: auto; margin-left: auto;'>
<h4>${title}</h4>
</div>
</div>
<div class='row'>
<div class='span12' id='${id2}' style='display: table; margin-right: auto; margin-left: auto;'>
<h4>${title2}</h4>
</div>
</div>
</div>
</div>
</div>`
}
function container(id, title) {
return `
<div class='container'>
<div class='content'>
<div class='container'>
<div class='row'>
<div class='span12' id='${id}' style='display: table; margin-right: auto; margin-left: auto;'>
<h4>${title}</h4>
</div>
</div>
</div>
</div>
</div>`
}
by_mes = {
/*
let view = md`${container('chart7','Número de alunos formados por MES')}`
let barChart = dc.lineChart(view.querySelector("#chart7"))
barChart.width(700)
.height(210)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.y(d3.scaleLinear().domain([(0), (86)]))
.xAxisLabel('Mês')
.yAxisLabel('Quantidade')
.dimension(monthDim)
.group(monthGroup)
//.curve(d3.curveStepBefore)
// .renderArea(true)
.brushOn(false)
.renderDataPoints(true)
.clipPadding(10)
.xAxis().tickFormat(function (d) {
if(d=="01")return "Janeiro"
if(d=="02")return "Fevereiro"
if(d=="03")return "Março"
if(d=="04")return "Abril"
if(d=="05")return "Maio"
if(d=="06")return "Junho"
if(d=="07")return "Julho"
if(d=="08")return "Agosto"
if(d=="09")return "Setembro"
if(d=="10")return "Outubro"
if(d=="11")return "Novembro"
if(d=="12")return "Dezembro"
return "ERROR";
})
barChart.margins().left = 50;
barChart.renderLabel(true)
.on('renderlet', function(chart) {
var chartBody = chart.select('g.chart-body');
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter()
.append('text')
.attr('text-anchor', 'middle')
.append('textPath')
.attr('class', 'extra-label')
.attr('xlink:href', '#extra-line')
.attr('startOffset', '50%')
.text('this is a label for the line');
});
barChart.colors(function(d){
return "#d98200";
});
dc.renderAll()
return view
*/
}
/*
by_year = {
let view = md`${container('chart1','Número de alunos formados por ano')}`
let barChart = dc.barChart(view.querySelector("#chart1"))
barChart.width(700)
.height(210)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.y(d3.scaleLinear().domain([(0), (60)]))
.brushOn(false)
.xAxisLabel('Ano')
.yAxisLabel('Quantidade de Alunos')
.dimension(yearDim)
.barPadding(0.1)
.outerPadding(0.05)
.group(yearGroup);
barChart.margins().left = 50;
barChart.renderLabel(true)
.on('renderlet', function(chart) {
var chartBody = chart.select('g.chart-body');
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter()
.append('text')
.attr('text-anchor', 'middle')
.append('textPath')
.attr('class', 'extra-label')
.attr('xlink:href', '#extra-line')
.attr('startOffset', '50%')
.text('this is a label for the line');
});
barChart.colors(function(d){
return "#003064";
});
dc.renderAll()
return view
}
*/
by_year = {
let view = md`${container2('chart11','⠀⠀Orientações e Coorientações por Ano',
'chart21',"⠀⠀Orientações e Coorientações por Mês")}`
let barChart = dc.barChart(view.querySelector("#chart11")) ;
let barChart2 = dc.lineChart(view.querySelector("#chart21")) ;
barChart.width(800)
.height(210)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.y(d3.scaleLinear().domain([(0), (80)]))
.brushOn(false)
.xAxisLabel('Ano')
.yAxisLabel('Orientações e Coorientações')
.dimension(yearDim)
.barPadding(0.1)
.outerPadding(0)
.group(yearGroup);
barChart.margins().left = 50;
barChart.renderLabel(true)
.on('renderlet', function(chart) {
var chartBody = chart.select('g.chart-body');
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter()
.append('text')
.attr('text-anchor', 'middle')
.append('textPath')
.attr('class', 'extra-label')
.attr('xlink:href', '#extra-line')
.attr('startOffset', '50%')
.text('this is a label for the line');
});
barChart.colors(function(d){
return "#003064";
});
barChart2.width(800)
.height(210)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.y(d3.scaleLinear().domain([(0), (125)]))
.xAxisLabel('Mês')
.yAxisLabel('Orientações e Coorientações')
.dimension(monthDim)
.group(monthGroup)
//.curve(d3.curveStepBefore)
// .renderArea(true)
.brushOn(false)
.renderDataPoints(true)
.clipPadding(10)
.xAxis().tickFormat(function (d) {
if(d=="01")return "Janeiro"
if(d=="02")return "Fevereiro"
if(d=="03")return "Março"
if(d=="04")return "Abril"
if(d=="05")return "Maio"
if(d=="06")return "Junho"
if(d=="07")return "Julho"
if(d=="08")return "Agosto"
if(d=="09")return "Setembro"
if(d=="10")return "Outubro"
if(d=="11")return "Novembro"
if(d=="12")return "Dezembro"
console.log(d)
return "ERROR";
})
barChart2.margins().left = 50;
barChart2.renderLabel(true)
.on('renderlet', function(chart) {
var chartBody = chart.select('g.chart-body');
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter()
.append('text')
.attr('text-anchor', 'middle')
.append('textPath')
.attr('class', 'extra-label')
.attr('xlink:href', '#extra-line')
.attr('startOffset', '50%')
.text('this is a label for the line');
});
barChart2.colors(function(d){
return "#d98200";
});
dc.renderAll()
return view
}
by_genre = {
let view2 = md`${container('chart2','Orientações e Coorientações <br> ⠀no Mestrado e Doutorado')}`
let barChart2 = dc.pieChart(view2.querySelector("#chart2"))
barChart2
.width(220)
.height(220)
.slicesCap(4)
.innerRadius(50)
.dimension(degreeDim)
.group(degreeGroup)
.legend(dc.legend())
// workaround for #703: not enough data is accessible through .label() to display percentages
.on('pretransition', function(chart) {
chart.selectAll('text.pie-slice').text(function(d) {
/*d.data.key + ' '+*/
return d.data.value +' (' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%)';
})
});
barChart2.colors(function(d){
if(d == "Mestrado" ) return "#003064";
if(d == "Doutorado") return "#d98200";
return "black";
});
dc.renderAll()
return view2
}
by_coor = {
let view2 = md`${container('chart9','Número total de Orientações <br> ⠀ ⠀ ⠀ e Coorientações')}`
let barChart2 = dc.pieChart(view2.querySelector("#chart9"))
barChart2
.width(220)
.height(220)
.slicesCap(4)
.innerRadius(50)
.dimension(advisorDim)
.group(advisorGroup)
.legend(dc.legend())
// workaround for #703: not enough data is accessible through .label() to display percentages
.on('pretransition', function(chart) {
chart.selectAll('text.pie-slice').text(function(d) {
/*d.data.key + ' '+*/
return d.data.value +' (' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%)';
})
});
barChart2.colors(function(d){
if(d == "Orientação" ) return "#589ed3";
if(d == "Coorientação") return "#4184A4";
return "black";
});
dc.renderAll()
return view2
}
by_me = {
let view3 = md`${container('chart3','Número de Orientações e Coorientações por professor')}`
let barChart3 = dc.rowChart(view3.querySelector("#chart3"))
const r_line = ["Computacao de Alto Desempenho",
"Engenharia de Software",
"Computacao Grafica",
"Banco de Dados",
"Logica e Inteligencia Artificial",
"Redes de Computadores",
"Algoritmos e Otimizacao"];
const colorArray = ["#f28e2c","#e15759","#76b7b2","#59a14f","#edc949","#af7aa1","#ff9da7"]
const colorsScale = d3.scaleOrdinal()
.domain(r_line)
.range(colorArray);
// barChart3.width(800)
// .height(600)
// .x(d3.scaleBand())
// .xUnits(dc.units.ordinal)
// .brushOn(false)
// .xAxisLabel('Orientador')
// .yAxisLabel('Quantidade de alunos')
// .ordering(function(d) { return -d.value; })
// .dimension(studentnameDim)
// .barPadding(0.1)
// .outerPadding(0.05)
// .group(studentnameGroup);
// barChart3.margins().left = 80;
barChart3
.width(800)
.height(2600)
.x(d3.scaleLinear().domain([5,15]))
.elasticX(true)
.dimension(studentnameDim)
.group(studentnameGroup)
.margins({top: 20, right: 20, bottom: 20, left: 20})
.xAxis(d3.axisTop())
.render();
barChart3.on('pretransition', function() {
barChart3.select('g.axis').attr('transform', 'translate(0,0)');
barChart3.selectAll('line.grid-line').attr('y2', barChart3.effectiveHeight());
});
barChart3.colors(function(d){
let color = "black"
let node = dataset.getNode(d)
if(node.research_line != null){
color = colorsScale(node.research_line);
}
// console.log(color)
return color;
});
dc.renderAll()
return view3
}
research_line_graph = {
let view3 = md`${container('chart4','⠀⠀Orientações e Coorientações por Linhas de Pesquisa')}`
let barChart3 = dc.rowChart(view3.querySelector("#chart4"))
const r_line = ["Computacao de Alto Desempenho",
"Engenharia de Software",
"Computacao Grafica",
"Banco de Dados",
"Logica e Inteligencia Artificial",
"Redes de Computadores",
"Algoritmos e Otimizacao"];
const colorArray = ["#f28e2c","#e15759","#76b7b2","#59a14f","#edc949","#af7aa1","#ff9da7"]
const colorsScale = d3.scaleOrdinal()
.domain(r_line)
.range(colorArray);
barChart3
.width(600) // .width(450)
.height(230)
.x(d3.scaleLinear().domain([5,15]))
.elasticX(true)
.dimension(research_lineDim)
.group(research_lineGroup)
.xAxis(d3.axisTop())
.margins({top: 20, right: 15, bottom: 15, left: 15})
.render();
barChart3.renderLabel(true)
.on('renderlet', function(chart) {
var chartBody = chart.select('g.chart-body');
var text = chartBody.selectAll('text.extra-label').data([0]);
text.enter()
.append('text')
.attr('text-anchor', 'middle')
.append('textPath')
.attr('class', 'extra-label')
.attr('xlink:href', '#extra-line')
.attr('startOffset', '50%')
.text('this is a label for the line');
});
barChart3.colors(function(d){
return colorsScale(d);
});
barChart3.on('pretransition', function() {
barChart3.select('g.axis').attr('transform', 'translate(0,0)');
barChart3.selectAll('line.grid-line').attr('y2', barChart3.effectiveHeight());
});
dc.renderAll()
return view3
}
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.
