Skip to content

Instantly share code, notes, and snippets.

@chemplexity

chemplexity/index.html

Last active June 17, 2019 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save chemplexity/3bb87f57a7fb8de27dd0 to your computer and use it in GitHub Desktop.
Save chemplexity/3bb87f57a7fb8de27dd0 to your computer and use it in GitHub Desktop.
Download ZIP
Metals in the Environment
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #eee;
stroke-width: 2.0px;
}
.link {
stroke: #3B3F41;
stroke-opacity: 0.2;
stroke-width: 2.0;
}
#chart{
width:98%;
height:98%;
}
text {
font: 12pt "Lucida Sans Unicode";
pointer-events: none;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
<div id="chart"></div>
<script>
var margin = {top: -5, right: -5, bottom: -5, left: -5};
var width = 400 - margin.left - margin.right,
height = 300- margin.top - margin.bottom,
r = 17;
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var vis = d3.select("#chart")
.append("svg:svg")
.attr("width", width)
.attr("height", height)
.append('svg:g');
vis.append('svg:rect')
.attr('width', width)
.attr('height', height)
.attr('fill', 'white');
d3.json("metals.json", function(data) {
var force = d3.layout.force()
.nodes(data.nodes)
.size([width + margin.left + margin.right, height + margin.top + margin.bottom])
.charge(-500)
.gravity(0.6)
.start();
var node = vis.selectAll(".node")
.data(data.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", function(d) {return d.size*2})
.style("fill", function(d) { return d.color})
.style("stroke", function(d) {return d3.rgb(d.color).darker(); })
.style("stroke-width", 4)
.style("opacity", 0.5)
.call(force.drag)
node.append("title")
.text(function(d) { return d.element; })
var texts = vis.selectAll("text.label")
.data(data.nodes)
.enter().append("text")
.attr("class", "label")
.attr("fill", "black")
.style("text-anchor", "middle")
.attr("dy", ".32em")
.style("font-size", function(d) { return 13})
.text(function(d) { return d.element; });
force.on("tick", function() {
node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(width - r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(height - r, d.y)); });
texts.attr("cx", function(d) { return d.x = Math.max(r, Math.min(width - r, d.x)); })
.attr("cy", function(d) { return d.y = Math.max(r, Math.min(height - r, d.y)); });
texts.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")"; });
});
})
</script>
</body>
Raw
metals.json
{"nodes": [
{
"element":"Li",
"color":"#f1c40f",
"size":5,
"weight":6.94,
"toxicity":0.70
},
{
"element":"Be",
"color":"#f1c40f",
"size":5.09,
"weight":9.012,
"toxicity":0.004
},
{
"element":"B",
"color":"#95a5a6",
"size":5.17,
"weight":10.81,
"toxicity":1.0
},
{
"element":"Mg",
"color":"#f1c40f",
"size":5.74,
"weight":24.305,
"toxicity":50.0
},
{
"element":"Al",
"color":"#95a5a6",
"size":5.86,
"weight":26.982,
"toxicity":0.2
},
{
"element":"Ca",
"color":"#f1c40f",
"size":6.42,
"weight":40.078,
"toxicity":200
},
{
"element":"V",
"color":"#e67e22",
"size":6.88,
"weight":50.942,
"toxicity":0.1
},
{
"element":"Cr",
"color":"#e67e22",
"size":6.93,
"weight":51.996,
"toxicity":0.1
},
{
"element":"Mn",
"color":"#e74c3c",
"size":7.06,
"weight":54.938,
"toxicity":0.05
},
{
"element":"Fe",
"color":"#e74c3c",
"size":7.09,
"weight":55.845,
"toxicity":0.3
},
{
"element":"Co",
"color":"#3498db",
"size":7.23,
"weight":58.933,
"toxicity":0.04
},
{
"element":"Ni",
"color":"#3498db",
"size":7.22,
"weight":58.693,
"toxicity":0.02
},
{
"element":"Cu",
"color":"#8e44ad",
"size":7.42,
"weight":63.546,
"toxicity":1.0
},
{
"element":"Zn",
"color":"#34495e",
"size":7.5,
"weight":65.38,
"toxicity":5.0
},
{
"element":"As",
"color":"#1abc9c",
"size":7.91,
"weight":74.922,
"toxicity":0.01
},
{
"element":"Se",
"color":"#1abc9c",
"size":8.09,
"weight":78.96,
"toxicity":0.05
},
{
"element":"Sr",
"color":"#f1c40f",
"size":8.46,
"weight":87.62,
"toxicity":25.0
},
{
"element":"Mo",
"color":"#e67e22",
"size":8.81,
"weight":95.96,
"toxicity":0.25
},
{
"element":"Ag",
"color":"#8e44ad",
"size":9.32,
"weight":107.87,
"toxicity":0.1
},
{
"element":"Cd",
"color":"#34495e",
"size":9.52,
"weight":112.41,
"toxicity":0.005
},
{
"element":"Sb",
"color":"#1abc9c",
"size":9.92,
"weight":121.76,
"toxicity":0.006
},
{
"element":"Ba",
"color":"#f1c40f",
"size":10.59,
"weight":137.33,
"toxicity":2.0
},
{
"element":"Pb",
"color":"#7f8c8d",
"size":13.58,
"weight":207.2,
"toxicity":0.015
}
]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment