Another Inlet

_.md

[ Launch Inlet ]
Gist #4461508 [ Launch Inlet ]
Gist #4458395 [ Launch Inlet ]
Gist #4452401 [ Launch Inlet ]
Gist #4452384
Gist #4452367
Gist #4450163 An inlet to tributary

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"periodictabledump3.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6110825519348025,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var svg = d3.select("svg");

var clist = new Object();
clist.Hydrogen = "#EA3445"
clist.Noble_gas = "#7BC9F0"
clist.Alkali_metals = "#F88437"
clist.Alkaline_earth_metals = "#0FD3BB"
clist.Semiconductors = "#B9C5B9"
clist.Other_nonmetals = "#5EA4C7"
clist.Halogens = "#CB71FD"
clist.Other_metals = "#09C4E7"
clist.Transition_metals = "#A6BCC4"
clist.Transition_metals2 = "#C4D6BA"
clist.vague = "#9B9B9B"

var base_width = 45,
	spacing = 4,
	rounding = 5,
	border_width = 1.44 + "px",
    off_corner = -26;

// deeper element json at 
// https://gist.github.com/4356217
// traced from: http://www.pnathan.com/elements.json
// minor modifications included.

/*
d3.csv("data/periodictabledump3.csv", function(csv){
  data = csv;
  main(data);
});
*/

var data = tributary.periodictabledump3
main(data)


function coord (input){
 	return off_corner + ((base_width+spacing) * parseInt(input))
}

function get_location(d){
    var coordinates = [coord(d.group), coord(d.row)];
    return "translate(" + coordinates + ")";
}

function opacity_from_mass(m){
    var v1 = Math.log(m);
    return Math.log(v1/3) * 1.2  
}

function main(data){

	var group1 = svg.append("g").classed("group1", true)

	var blocks = group1.selectAll("g").data(data)
		.enter()
		.append("g")
		.attr("transform", function(d,i){ return get_location(d)})

	var rects = blocks.append("rect")
        .attr({
            "x": 0,
            "y": 0,
            "width": base_width,
            "height": base_width,
            "rx": rounding, 
            "ry": rounding
        })
    .style({
        "fill": function(d){ 
          	return clist[d.named_type] },
        "fill-opacity": function(d){ 
          	return opacity_from_mass(d.Mass) },
        "stroke": function(d){ 
          	return clist[d.named_type] },
        "stroke-width": border_width
    })
	
	var text_content = blocks.append("text")
		.attr({x:3, y:14})
    	.style({
            "fill": "#232323",
            "stroke-width": 0 + "px",
            "font-size": 1.2 + "em",
            "text-anchor": "right",
            "alignment-baseline": "middle",
            "font-family": "sans-serif"
        })	
		.text(function(d,i){return d.Symbol})
}

periodictabledump3.csv

style.css

/*
http://lesscss.org/ Pragmatic Theme by Dealga McArdle
After original "Dark Theme" ported to CodeMirror by Peter Kroon
*/

.cm-s-lesser-dark {
  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
  line-height: 1.26em;
 }

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #EEEEEE;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark pre { padding: 0 8px; line-height: 1.3em; }/*editable code holder*/

div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/

.cm-s-lesser-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; }
.cm-s-lesser-dark .CodeMirror-linenumber { color: #777; }

.cm-s-lesser-dark span.cm-keyword { color: DeepSkyBLue; }
.cm-s-lesser-dark span.cm-atom { color: #8CEEF7; font-weight: bold}
.cm-s-lesser-dark span.cm-number { color: Chartreuse; background: #000000;}
.cm-s-lesser-dark span.cm-def {color: #C4D8E6;}
.cm-s-lesser-dark span.cm-variable { color:#AAA; }
.cm-s-lesser-dark span.cm-variable-2 { color: #9DCFD8; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-property {color: #FFB78F;}
.cm-s-lesser-dark span.cm-operator {color: #92A75C;}
.cm-s-lesser-dark span.cm-comment { color: #b2b2b2; background: #000000;}
.cm-s-lesser-dark span.cm-string { color: Chartreuse; background: #424242;}
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse; background: #7E7E7E;}
.cm-s-lesser-dark span.cm-meta { color: #738C73; }
.cm-s-lesser-dark span.cm-error { color: #9d1e15; }
.cm-s-lesser-dark span.cm-qualifier {color: #000555; }
.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark span.cm-tag { color: #669199; }
.cm-s-lesser-dark span.cm-attribute {color: #00c;}
.cm-s-lesser-dark span.cm-header {color: #a0a;}
.cm-s-lesser-dark span.cm-quote {color: #090;}
.cm-s-lesser-dark span.cm-hr {color: #999;}
.cm-s-lesser-dark span.cm-link {color: #00c;}