Published
Edited
Jan 25, 2022
1 fork
3 stars
chart = {
const svg = d3.select(DOM.svg(1000, 1000))
.style("width", "100%")
.style("height", "auto")
.style("padding", "8px")
.style("box-sizing", "border-box")
.style("font", "10px sans-serif")
.on('click',function(d, root){
tooltipcircle.style('visibility', 'hidden')
tooltip.html(``).style('visibility', 'hidden');})
sessionStorage.setItem('allbutton', 'disable');
const g = svg.append("g");
const gradient1 = g.append("g")
.selectAll('linearGradient')
.data(data.list_person.concat(data.list_object))
.enter().append('linearGradient')
.attr("id", d => "gradient1" + d.color)
.attr("spreadMethod", "reflect")
.attr('cx', width/2)
.attr('cy', height/2)
.attr('r', 600)
gradient1
.append("stop")
.attr("offset", "30%")
.attr("stop-color", "#ee2681")
gradient1
.append("stop")
.attr("offset", "70%")
.attr("stop-color", d => d.color);
gradient1.append("animate")
.attr("attributeName","x1")
.attr("values","0%;-200%")
.attr("dur","7s")
.attr("repeatCount","indefinite");
gradient1.append("animate")
.attr("attributeName","x2")
.attr("values","-100%;-300%")
.attr("dur","7s")
.attr("repeatCount","indefinite");
const gradient2 = g.append("g")
.selectAll('linearGradient')
.data(data.list_person.concat(data.list_object))
.enter().append('linearGradient')
.attr("id", d => "gradient2" + d.color)
.attr("spreadMethod", "reflect")
.attr('cx', width/2)
.attr('cy', height/2)
.attr('r', 600);
gradient2
.append("stop")
.attr("offset", "30%")
.attr("stop-color",d => d.color )
gradient2
.append("stop")
.attr("offset", "70%")
.attr("stop-color", "#ee2681")
gradient2.append("animate")
.attr("attributeName","x1")
.attr("values","0%;200%")
.attr("dur","7s")
.attr("repeatCount","indefinite");
gradient2.append("animate")
.attr("attributeName","x2")
.attr("values","100%;300%")
.attr("dur","7s")
.attr("repeatCount","indefinite");
const link = g.append("g").selectAll("path")
.data(data.links)
.enter()
.append("path")
.style("fill", "none")
.attr("link_list", d => d.link_list)
.attr("stroke-opacity", 0.0)
.attr("stroke-width", 0)
.attr("d", function(d){
var lineData = [
{
x: Math.round(d.target_x),
y: Math.round(d.target_y)
}, {
x: Math.round(d.target_x) - Math.round(d.target_x)/2,
y: Math.round(d.target_y) - Math.round(d.target_y)/2
},{
x: Math.round(d.source_x) - Math.round(d.source_x)/2,
y: Math.round(d.source_y) - Math.round(d.source_y)/2
},{
x: Math.round(d.source_x),
y: Math.round(d.source_y)
}];
return`M${lineData[0].x},${lineData[0].y}C${lineData[1].x},${lineData[1].y},${lineData[2].x},${lineData[2].y},${lineData[3].x},${lineData[3].y}`;})
.attr("id", d => "path" + d.uid)
.attr("class", d => "path" + d.uid1)
.attr("stroke", d => Math.cos(d.angle) < 0 ? `url(#gradient1${d.color})`:`url(#gradient2${d.color})`)
const node = g.append("g")
.selectAll("g")
.data(data.list_object.concat(data.list_person))
.enter().append("g")
var most_recent = ''
node.append('circle')
.attr('r', d => d.type == "object" ? 16 : 0)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('name', d=> d.name)
.attr('link_list', d=> d.link_list)
.attr('opacity', 1)
.attr("id", d => "circle" + d.uid)
.attr("class", d => "circle" + d.uid)
.style('fill', d => d.color)
.on('click', function(d,root){
if (most_recent == root.uid) {
d3.selectAll("text")
.attr("pointer-events", "all");
d3.selectAll('circle')
.style("opacity", 0.4)
d3.select('#circle' + root.uid)
.style("opacity", 1)
d3.selectAll('circle')
.on('mouseout', function(d, root){
d3.select(this)
.style("cursor", "default")
filterOut(root.uid, root.color)
})
d3.selectAll('circle')
.on('mouseover', function(d, root){
var allbutton = sessionStorage.getItem('allbutton');
if (allbutton == "enable"){
return null
}else{
filterOut(root.uid, root.color)
d3.select(this)
.style("cursor", "pointer")
tooltipcircle
.html("<link rel=preconnect href=https://fonts.gstatic.com> <link href=https://fonts.googleapis.com/css2?family=Montserrat&display=swap rel=stylesheet><div class=full-width><h1 class=h1full-width>"+ plus+"Score: 0.0</h1></div><h1 class=h1tooltipcircle>Year</h1><hr><p>" + root.year + "</p><h1 class=h1tooltipcircle>Title</h1><hr><p>" + root.name + "</p><h1 class=h1tooltipcircle>DOI</h1><hr><p>" + root.DOI + "</p><h1 class=h1tooltipcircle>Knowlage Domain</h1><p>" + root.domain + "</p><h1 class=h1tooltipcircle>Keywords</h1><p>" + root.keywords + "</p><h1 class=h1tooltipcircle>Authors</h1><p>" + root.authors + "</p>")
.style('visibility', 'visible')
filterOver(root.uid, root.color)
}})
most_recent = ''
}else{
d3.selectAll('circle')
.style("opacity", 0)
d3.select('#circle' + root.uid)
.style("opacity", 1)
d3.selectAll('#path' + root.uid)
.style("opacity", 1)
d3.selectAll('circle')
.on('mouseout', null)
d3.selectAll('circle')
.on('mouseover', null)
most_recent = root.uid
tooltipcircle.html(``)
.style('visibility', 'hidden')
d3.select(this)
.style("cursor", "pointer")
d3.selectAll("text")
.attr("pointer-events", "none");
}
})
.on('mouseover', function(d, root){
var allbutton = sessionStorage.getItem('allbutton');
if (allbutton == "enable"){
return null
} else {
tooltipcircle
.html("<link rel=preconnect href=https://fonts.gstatic.com> <link href=https://fonts.googleapis.com/css2?family=Montserrat&display=swap rel=stylesheet><div class=full-width><h1 class=h1full-width>"+ plus+"Score: 0.0</h1></div><h1 class=h1tooltipcircle>Year</h1><hr><p>" + root.year + "</p><h1 class=h1tooltipcircle>Title</h1><hr><p>" + root.name + "</p><h1 class=h1tooltipcircle>DOI</h1><hr><p>" + root.DOI + "</p><h1 class=h1tooltipcircle>Knowlage Domain</h1><p>" + root.domain + "</p><h1 class=h1tooltipcircle>Keywords</h1><p>" + root.keywords + "</p><h1 class=h1tooltipcircle>Authors</h1><p>" + root.authors + "</p>")
.style('visibility', 'visible')
filterOver(root.uid, root.color)
d3.select(this).style("cursor", "pointer")
}
})
.on('mouseout', function(d, root){
var allbutton = sessionStorage.getItem('allbutton');
if (allbutton == "enable"){
return null
} else {
filterOut(root.uid, root.color)
tooltipcircle
}}).on('mousemove', function (d) {
tooltipcircle
.style('top', d.clientY + 40 + 'px')
.style('left', d.clientX + 40+ 'px')
.style("display", "inline-block")
});
node.append("text")
.attr("dy", "0.31em")
.attr("transform", d => `
rotate(${(d.angle * 180 / Math.PI)})
translate(${d.gen_radius + d.transform_text})
${Math.cos(d.angle) < 0 ? "rotate(180)" : ""}
`)
.attr("text-anchor", d => Math.cos(d.angle) < 0 ? "end" : null)
.attr("font-size", "20")
.attr('opacity', 1)
.attr("class", d => d.id)
.text(d => d.type == "object" ? null : d.name)
.on("mouseover", function(d, root) {
var allbutton = sessionStorage.getItem('allbutton');
if (allbutton == "enable"){
filteroverwithall(root.uid, root.colour)
}
else {
filterOvername(root.uid, root.colour)
}
d3.select(this).attr("font-weight", 600)
d3.select(this).attr("font-size", 30)
d3.selectAll("#textA").attr("fill-opacity","0.6")
d3.selectAll("#textZ").attr("fill-opacity","0.6")
d3.selectAll("#rect").attr("opacity","1")
var image = "<img src="+root.url+"/>"
tooltip
.html("<h1>" + facebook + twitter + chat + person + "Relevance: 0.0 </h1><hr>" + image + "<br/><h1>" + root.name + "</h1><h2>Ph.D.</h2><h1>Value</h1><p>"+root.profile+"</p>")
.style('visibility', 'visible')})
.on('mousemove', function (d) {
tooltip
.style('top', d.clientY + 40 + 'px')
.style('left', d.clientX + 40 + 'px')
.style("display", "inline-block");
})
.on('mouseout', function (d,root) {
d3.select(this).attr("font-weight", 100)
d3.select(this).attr("font-size", 20)
var allbutton = sessionStorage.getItem('allbutton');
if (allbutton == "enable"){
filterOutwithall(root.uid, root.colour)
}
else {
filterOutname(root.uid, root.colour)
}
d3.selectAll("#textA").attr("fill-opacity","0")
d3.selectAll("#textZ").attr("fill-opacity","0")
d3.selectAll("#rect").attr("opacity","0")
});
node.append("text")
.attr("y", -1320)
.attr("x", 25)
.attr("id", "textA")
.attr("font-size", "40")
.style('fill', "#e6e6e6")
.attr("fill-opacity","0")
.text("A")
node.append("text")
.attr("y", -1320)
.attr("x", -50)
.attr("font-size", "40")
.attr("id", "textZ")
.style('fill', "#e6e6e6")
.attr("fill-opacity","0")
.text("Z")
node.append('rect')
.attr('x', 0)
.attr('y', -1300)
.attr("id", "rect")
.attr('width', 1)
.attr('height', 300)
.attr("fill", "#e6e6e6")
.attr('opacity', 0);
svg.call(d3.zoom()
.extent([[0, 0], [width, height]])
.scaleExtent([0.75, 8])
.on("zoom", zoomed));
function zoomed({transform}) {
g.attr("transform", transform);
}
d3.select('#NoOneButton').on('click', () => {
sessionStorage.setItem('allbutton', 'disable');
d3.selectAll('circle').attr("pointer-events", "all");
d3.selectAll('path')
.attr("stroke-width", 0)
.attr("stroke-opacity", 0);
d3.selectAll("text").attr("pointer-events", "all");
});
d3.select('#AllButton').on('click', () => {
sessionStorage.setItem('allbutton', 'enable');
d3.selectAll('path')
.attr("stroke-width", 3)
.attr("stroke-opacity", 1);
d3.selectAll('circle')
.style("opacity", 1)
//.attr("pointer-events", "none");
// d3.selectAll("text").attr("pointer-events", "none");
});
return svg.attr("viewBox", autoBox).node();
}
height = 500
width = 500
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.
