vis
A home for all the visualizations probably posted on www.glfharris.com
Science Score: 18.0%
This score indicates how likely this project is to be science-related based on various indicators:
-
✓CITATION.cff file
Found CITATION.cff file -
○codemeta.json file
-
○.zenodo.json file
-
○DOI references
-
○Academic publication links
-
○Academic email domains
-
○Institutional organization owner
-
○JOSS paper metadata
-
○Scientific vocabulary similarity
Unable to calculate vocabulary similarity
Last synced: 10 months ago
·
JSON representation
·
Repository
A home for all the visualizations probably posted on www.glfharris.com
Basic Info
- Host: GitHub
- Owner: glfharris
- License: gpl-3.0
- Language: HTML
- Default Branch: master
- Size: 1.52 MB
Statistics
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
- Releases: 0
Created about 7 years ago
· Last pushed about 7 years ago
Metadata Files
Readme
License
Citation
README.md
vis
A home for all the visualizations probably posted on www.glfharris.com
Owner
- Name: George Harris
- Login: glfharris
- Kind: user
- Location: London
- Website: www.glfharris.com
- Repositories: 3
- Profile: https://github.com/glfharris
Citation (citations/bee.html)
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.axis text {
font: 10px sans-serif;
}
.cells path {
fill: none;
pointer-events: all;
}
.cells :hover circle {
fill: red;
}
</style>
<svg width="960" height="200"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var svg = d3.select("svg"),
margin = {top: 40, right: 40, bottom: 40, left: 40},
width = svg.attr("width") - margin.left - margin.right,
height = svg.attr("height") - margin.top - margin.bottom;
var formatValue = d3.format(",d");
var x = d3.scaleLog()
.rangeRound([0, width]);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("data.json", type, function(error, data) {
if (error) throw error;
var nodes = data.nodes;
console.log(nodes);
x.domain(d3.extent(nodes, function(d) { return d.year; }));
var simulation = d3.forceSimulation(nodes)
.force("x", d3.forceX(function(d) { return x(d.year); }).strength(1))
.force("y", d3.forceY(height / 2))
.force("collide", d3.forceCollide(4))
.stop();
for (var i = 0; i < 120; ++i) simulation.tick();
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(20, ".0s"));
var cell = g.append("g")
.attr("class", "cells")
.selectAll("g").data(d3.voronoi()
.extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.polygons(nodes)).enter().append("g");
cell.append("circle")
.attr("r", 3)
.attr("cx", function(d) { return d.data.x; })
.attr("cy", function(d) { return d.data.y; });
cell.append("path")
.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
cell.append("title")
.text(function(d) { return d.nodes.id + "\n" + formatValue(d.nodes.year); });
});
function type(d) {
if (!d.year) return;
d.year = +d.year;
return d;
}
</script>