Skip to content

Instantly share code, notes, and snippets.

@MNoichl

MNoichl/.block

Created October 22, 2018 11:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MNoichl/8eb4da725eb60b60620691584b17b331 to your computer and use it in GitHub Desktop.
Save MNoichl/8eb4da725eb60b60620691584b17b331 to your computer and use it in GitHub Desktop.
Download ZIP
economists' network
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html xmlns:xlink="http://www.w3.org/1999/xlink">
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
div.tooltip {
position: absolute;
text-align: left;
width: 330px;
background-color: #ffffff;
padding: 3px 12px;
font-family: serif;
border: 1px solid #bbbbbb;
box-shadow: 1px 1px 4px #bbbbbb;
font-family: EB Garamond, serif;
text-transform: capitalize;
visibility: hidden;
background: rgba(255,255,255, 0.9);
}
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.nodes circle:hover {
stroke: #ddd;
stroke-width: 1.5px;
}
a {
color: #108b99;
text-decoration: underline dotted;
}
h2 {
margin-top: 3pt;
margin-bottom: -5pt;
text-align: left;
font-family: 'Alegreya SC', serif;
font-size: 11pt;
font-weight: 300;
letter-spacing: 2.5px;
}
</style>
<body>
<svg></svg>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="index.js"></script>
</body>
Raw
index.js
var date_begin = 1800
var date_end = 1900
var cit_min=1
var cit_max=1
var radius = 15
var radius_min = 5
var margin = { top: 30, right: 30, bottom: 30, left: 30 };
width = 800 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select("svg")
.attr("width", width + margin.left + margin.right )
.attr("height", height + margin.top + margin.bottom);
// width = +svg.attr("width"),
// height = +svg.attr("height");
//var color = d3.scaleOrdinal(d3.schemeCategory20);
var searchRadius = 40;
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("visibility", "visible");
var simulation = d3.forceSimulation()
.force("link", d3.forceLink().id(function(d) { return d.id; }))
.force("charge", d3.forceManyBody().strength(-80))
.force("center", d3.forceCenter(width / 2));
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
d3.json("index.json", function(error, graph) {
if (error) throw error;
clusternum=0
for (i = 0; i < graph.nodes.length; i++) {
if (graph.nodes[i].birth < date_begin){date_begin = graph.nodes[i].birth}
if (graph.nodes[i].birth > date_end){date_end = graph.nodes[i].birth}
a = parseInt(graph.nodes[i].Z9);
if (a < cit_min){cit_min = a}
if (a > cit_max){cit_max = a}
c = parseInt(graph.nodes[i].cluster);
if (c > clusternum){clusternum = c}
console.log(clusternum)
}
var rscale = d3.scaleLinear()
.domain([cit_min,cit_max])
.range([radius_min,radius])
let color = d3.scaleOrdinal()
.domain([0,clusternum])
.range(["#2c7bb6", "#00a6ca","#00ccbc","#90eb9d","#f9d057","#f29e2e","#e76818","#d7191c"]);//"#ffff8c"
var xAxisScale1 = d3.scaleTime()
.domain([new Date(date_begin, 0, 1), new Date(date_end, 0, 1)])
.rangeRound([margin.top,height-margin.bottom]);
var xAxis1 = d3.axisLeft(xAxisScale1);
svg.append("g").call(xAxis1)
.attr("transform", "translate(80,0)")
.style("opacity", .5)
.attr("stroke-dasharray", "2,2");
var link = svg.append("g")
.attr("class", "links")
.selectAll("line")
.data(graph.links)
.enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });
//http://eloquentjavascript.net/04_data.html
var word="word"
var node = svg.append("g")
//.attr("xlink:href", function(d){return d.DOI;})
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", function(d){ return rscale(d.Z9); })//function(d) { return(d.Z9)+0; }
.attr("fill", function(d) { return color(d.cluster); })
.style("opacity",.9)
.on("mouseover", function(d) {
div.transition()
.duration(200)
.style("visibility", "visible")// '<a href="http://dx.doi.org/'+(d.DOI.replace("DOI ","") )+'" target="_blank">' +
div .html(
"<h2 >" + (d.AU) + "</h2>" + "<p>" + (d.TI) + "</p>" + "<p>" + (d.SO)+ ", "+ (d.VL)+ ", "+ (d.PG)+ ", "+ (d.PY))
.style("left", (d3.event.pageX+30) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("visibility", "hidden")
})
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended))
.on("click", click);
//node.append("title")
// .text(function(d) { return d.id; });
//d3.select('Sluga H, 1998, INQUIRY').style('fill','red');
d3.select("circle:nth-child(5)").attr("fill","#f9d057").attr("stroke-width","20px"); // <== CSS selector (DOM)
simulation
.nodes(graph.nodes)
.on("tick", ticked);
simulation.force("link")
.links(graph.links);
function ticked() {
node.each(function(d) {
d.y = d.py = margin.top+(d.PY-date_begin)*((height-margin.bottom-margin.top)/(date_end-date_begin));
});
link
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node
.attr("cx", function(d) { return d.x = Math.max(radius, Math.min((width - radius), d.x)); })
.attr("cy", function(d) { return d.y = Math.max(radius, Math.min(height - radius, d.y)); });
/*
node
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
a.removeAttribute("href"),
*/
}
});
function dragsubject() {
return simulation.find(d3.event.x - width / 2, d3.event.y - height / 2 , searchRadius);
}
/*
function mousemoved() {
var a = this.parentNode, m = d3.mouse(this), d = simulation.find(m[0] - width / 2, m[1] - height / 2, 40);
if (!d) return a.removeAttribute("title"), tooltip.style('visibility','hidden');
a.setAttribute("href", "google.com");//+ d.id
a.setAttribute("title", d.id + (d.url ? " by " + d.url : "") + (d.description ? "\n" + d.description : ""));
loadTooltipThumb(d);
}
*/
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
function click(d) {
DI = d.DI
D2 = d.D2
if ( DI != "None"){window.open('http://dx.doi.org/'+(DI), '_blank');}
else {
if ( d.D2 != "None"){window.location = 'http://dx.doi.org/'+(D2);}
else {window.location = 'https://scholar.google.com/scholar?hl=de&as_sdt=0%2C5&q='+(d.authorshort)+'+'+(d.PY)+'+'+(d.title)+'&btnG='}
}
}
Raw
index.json
{"links": [
{"source": "ranke", "target": "roscher"}
],
"nodes": [
{"id": "roscher", "AU": ["Wilhelm Roscher"], "born": 1817, "died": 1894, "cluster": 4},
{"id": "ranke", "AU": ["Leopold von Ranke"], "born": 1795, "died": 1886, "cluster": 4}
]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment