Another Inlet

_.md

[ Launch Inlet ]
Gist #4469595 [ Launch Inlet ]
Gist #4466941 [ Launch Inlet ]
Gist #4461697 [ 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.5663018052813585,"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 = "#FCAE70"
clist.Alkaline_earth_metals = "#0FD3BB"
clist.Semiconductors = "#B9C5B9"
clist.Other_nonmetals = "#5EA4C7"
clist.Halogens = "#CB71FD"
clist.Other_metals = "#09C4E7"
clist.Transition_metals = "#A6BCC4"
clist.Lanthanides = "#B3B390"
clist.Actinides = "#FF7F57"
clist.vague = "#9B9B9B"

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


// 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)

/* Helper Functions */

function info_box_size(num_blocks){
 	return (base_width*num_blocks + spacing*(num_blocks-1))
}

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 get_location2(x, y){
  return get_location({group: x, row: y})
}

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

// reusable text setter
function set_text(x, y, classname, size, content){
  var ename = d3.select(classname)
  .append("text")
  .attr({"x": x, "y": y})
  .style({
    "fill": "#232323",
    "stroke-width": 0 + "px",
    "font-size": size + "em",
    "text-anchor": "right",
    "alignment-baseline": "middle",
    "font-family": "sans-serif"
  })	
  .text(content)
  return ename    	    
}

// specific text setter for info box
function set_text2(x, y, content){
  return set_text(x, y, ".group2", info_text_size, content)
}

function infoBox() {
  var x = 12;
  var y = 20;
  var data;
  var style = {
    "fill": "#232323",
    "stroke-width": 0 + "px",
    "font-size": info_text_size + "em",
    "text-anchor": "right",
    "alignment-baseline": "middle",
    "font-family": "sans-serif"
  }
  var group;
  var chart = function(g) {
    group = g;
    console.log("hi");
    var sel = group.selectAll("g")
      .data([""]);
    
    sel.enter()
      .append("g")
      .selectAll("text")
      .data(data)
      .enter()
      .append("text");
    
    sel.selectAll("text")
      .data(data)
      .style(style)
      .attr({
        x: x,
        y: function(d,i) { return (i+1) * y }
      })
      .text(function(d) { return d })
    
  }
  chart.data = function(val) {
    if(!arguments.length)
      return data;
    data = val;
    return chart;
  }
  chart.style = function(val) {
    if(!arguments.length)
      return style;
    style = val;
    return chart;
  }
  return chart;
}


/* Worker Function */

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({
            "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",
            "font-size": 1.2 + "em",
            "text-anchor": "right",
            "alignment-baseline": "middle",
            "font-family": "sans-serif"
        })	
		.text(function(d,i){return d.Symbol})

    // define the info box
    
    var info = svg.append("g").classed("group2", true)
    	.attr("transform", get_location2(6, 1))
		.append("rect")
    	.attr({
            "width": info_box_size(6),
            "height": info_box_size(2),
            "rx": rounding, "ry": rounding
        })
        .style({
            "fill": "#C9C9C9",
            "fill-opacity": 0.224,
            "stroke": "#000000",
            "stroke-width": border_width
        })

    // element data
    /*
    var e_name = set_text2(12, 20, "name (symbol)");
    var e_mass = set_text2(12, 20*2, "mass");
    var e_family = set_text2(12, 20*3, "family");
    var e_charge = set_text2(12, 20*4, "protons / neutrons");
    */
    blocks.on("click", function(d,i) {
      console.log(d.Name)
    })

    var ib = infoBox();
    var ibg = d3.select(".group2");
    blocks.on("mouseover", function(d,i) {
      ib.data([d.Name, d.Mass, d.named_type]);
      ib(ibg);
    })


}

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