MNoichl/.block

## .block
license: mit

## README.md

      
                Raw

        
              README.md
            
          
    Built with blockbuilder.org

  
## 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>

## 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='}
}

}

## 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}

]}
	<!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>
	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='}
	}

	}
	{"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}

	]}