@andyreagan/hedotools 7.1.0 → 7.2.0

package/README.md

@@ -90,49 +90,59 @@ hedotools.shifter
 See the [d3-shifterator README](https://github.com/andyreagan/d3-shifterator)
 for the full shifter API and a [live Observable example](https://observablehq.com/@andyreagan/d3-shifterator-v4).
 
+Each module is an **invoked singleton** on the `hedotools` namespace (like
+`hedotools.shifter`) — use it directly, don't call it as a factory:
+
 ### barchart
 
 ```js
-var bc = hedotools.barchart();
-bc.setfigure(d3.select("#barchart"));
-bc.setdata(data, geodata); // data: per-state values; geodata: geojson w/ properties.name
-bc._figheight(400);
-bc.plot();
+hedotools.barchart.setfigure(d3.select("#barchart"));
+hedotools.barchart.setdata(data, geodata); // data: per-state values; geodata: geojson w/ properties.name
+hedotools.barchart._figheight(400);
+hedotools.barchart.plot();
 ```
 
 ### map
 
 ```js
-var m = hedotools.map();
-m.setfigure(d3.select("#map"));
-m.setdata(geoJson);        // us-states topojson
-m.plot();
+hedotools.map.setfigure(d3.select("#map"));
+hedotools.map.setdata(geoJson);        // us-states topojson
+hedotools.map.plot();
 ```
 
 ### lens
 
 ```js
-var l = hedotools.lens();
-l.setfigure(d3.select("#lens"));
-l.setdata(lens);           // array of word-happiness scores
-l.plot();
+hedotools.lens.setfigure(d3.select("#lens"));
+hedotools.lens.setdata(lens);          // array of word-happiness scores
+hedotools.lens.plot();
 ```
 
+The lens uses `hedotools.urllib` (bundled) to persist its range in the URL, and
+its brush-move callback recomputes state happiness via `hedotools.computeHapps`
+(also bundled) before redrawing the map/shift. Load the full bundle, or the
+individual sources with `urllib` and `computeHapps` before `lens`.
+
 ### sankey
 
 ```js
-var s = hedotools.sankey();
-s.setfigure(d3.select("#sankey"));
-s.setdata(oldlist, newlist, stateNames); // two happiness vectors + names
-s.plot();
+hedotools.sankey.setfigure(d3.select("#sankey"));
+hedotools.sankey.setdata(oldlist, newlist, stateNames); // two happiness vectors + names
+hedotools.sankey.plot();
 ```
 
-> **Note:** unlike the shifter, the four dashboard modules were written for the
+`hedotools.nonsankey.js` is an alternate implementation (the cities-page
+variant) that **also** defines `hedotools.sankey` — load it *instead of*
+`hedotools.sankey.js`, never alongside. It ships as a loose file and is not in
+the default bundle.
+
+> **Note:** unlike the shifter, the dashboard modules were written for the
 > hedonometer.org pages and read page-level globals (e.g. `allData`, `lens`,
 > `words`, `shiftRef`/`shiftComp`, and the url encoders) in their interaction
 > handlers, where hovering/clicking drives a linked shift. They render
-> standalone from `setdata(...).plot()`, but the hover→shift wiring expects
-> those globals to be present. See `tests/browser/` for working fixtures.
+> standalone from `setdata(...).plot()`, but the hover→shift wiring (and
+> barchart's mousedown click-to-open) expects those globals to be present. See
+> `tests/browser/` for working fixtures.
 
 ## Developing
 

package/bundle.sh

@@ -22,9 +22,13 @@ here="$(cd "$(dirname "$0")" && pwd)"
 cd "$here"
 mkdir -p dist
 
+# hedotools.nonsankey.js is deliberately NOT bundled: it is an alternate that
+# also defines `hedotools.sankey` (the cities-page variant), so it is loaded
+# INSTEAD of hedotools.sankey.js, never alongside it. It ships as a loose file.
 cat \
   js/hedotools.init.v4.js \
   js/hedotools.urllib.js \
+  js/hedotools.computeHapps.js \
   js/hedotools.barchart.js \
   js/hedotools.lens.js \
   js/hedotools.map.js \

package/dist/hedotools-bundle.js

@@ -3134,6 +3134,24 @@ hedotools.urllib = {
 
 
 
+hedotools.computeHapps = function() {
+    var go = function () {
+	for (var j=0; j<52; j++) {
+	    // compute total frequency
+	    var N = 0.0;
+	    for (var i=0; i<allData[j].freq.length; i++) {
+		N += parseFloat(allData[j].freq[i]);
+	    }
+	    var happs = 0.0;
+	    for (var i=0; i<allData[j].freq.length; i++) {
+		happs += parseFloat(allData[j].freq[i])*parseFloat(lens[i]);
+	    }
+	    allData[j].avhapps = happs/N;
+	}
+    }
+    var opublic = { go: go, };
+    return opublic;
+}();
 hedotools.barchartoncall = function() {
     var test = function(d,i) {
 	// console.log(i);
@@ -3160,6 +3178,16 @@ hedotools.barchartoncall = function() {
     return opublic;
 }();
 
+// mousedown ("click-to-open") hook: an empty stub by default; the host page
+// overrides hedotools.barchartonclick.test to open the linked shift/modal.
+hedotools.barchartonclick = function() {
+    var test = function(event,d) {
+    }
+    var opublic = { test: test,
+		  };
+    return opublic;
+}();
+
 // make the plot
 hedotools.barchart = function() {
     var figure;
@@ -3407,6 +3435,9 @@ hedotools.barchart = function() {
 	    .on('mouseout', function(event,d){
 		var rectSelection = d3.select(this).style('opacity','1.0').style('stroke','rgb(100,100,100)').style('stroke-width','1.0');
 		// var rectSelection = d3.select(this).style({opacity:'0.7'});
+	    })
+	    .on('mousedown', function(event,d){
+		hedotools.barchartonclick.test(d,d[0]);
 	    });
 
 	axes.selectAll("text.statetext")
@@ -3420,6 +3451,9 @@ hedotools.barchart = function() {
             .text(function(d,i) { return (i+1)+". "+d[2]; })
 	    .on('mouseover', function(event,d){
 		hedotools.barchartoncall.test(d,d[0]);
+	    })
+	    .on('mousedown', function(event,d){
+		hedotools.barchartonclick.test(d,d[0]);
 	    });
 
 	// d3.select(window).on("resize.shiftplot",resizeshift);
@@ -3470,7 +3504,7 @@ hedotools.barchart = function() {
 		    plot: plot, };
 
     return opublic;
-};
+}();
 
 
 
@@ -3827,7 +3861,7 @@ hedotools.lens = function() {
 		  };
 
     return opublic;
-};
+}();
 hedotools.map = function() {
 
     var figure;
@@ -4382,7 +4416,7 @@ hedotools.map = function() {
 
     return opublic;
 
-};
+}();
 
 
 
@@ -4935,7 +4969,7 @@ hedotools.sankey = function() {
     };
 
     return opublic;
-};
+}();
 
 
 

package/dist/hedotools.js

@@ -253,6 +253,24 @@ hedotools.urllib = {
 
 
 
+hedotools.computeHapps = function() {
+    var go = function () {
+	for (var j=0; j<52; j++) {
+	    // compute total frequency
+	    var N = 0.0;
+	    for (var i=0; i<allData[j].freq.length; i++) {
+		N += parseFloat(allData[j].freq[i]);
+	    }
+	    var happs = 0.0;
+	    for (var i=0; i<allData[j].freq.length; i++) {
+		happs += parseFloat(allData[j].freq[i])*parseFloat(lens[i]);
+	    }
+	    allData[j].avhapps = happs/N;
+	}
+    }
+    var opublic = { go: go, };
+    return opublic;
+}();
 hedotools.barchartoncall = function() {
     var test = function(d,i) {
 	// console.log(i);
@@ -279,6 +297,16 @@ hedotools.barchartoncall = function() {
     return opublic;
 }();
 
+// mousedown ("click-to-open") hook: an empty stub by default; the host page
+// overrides hedotools.barchartonclick.test to open the linked shift/modal.
+hedotools.barchartonclick = function() {
+    var test = function(event,d) {
+    }
+    var opublic = { test: test,
+		  };
+    return opublic;
+}();
+
 // make the plot
 hedotools.barchart = function() {
     var figure;
@@ -526,6 +554,9 @@ hedotools.barchart = function() {
 	    .on('mouseout', function(event,d){
 		var rectSelection = d3.select(this).style('opacity','1.0').style('stroke','rgb(100,100,100)').style('stroke-width','1.0');
 		// var rectSelection = d3.select(this).style({opacity:'0.7'});
+	    })
+	    .on('mousedown', function(event,d){
+		hedotools.barchartonclick.test(d,d[0]);
 	    });
 
 	axes.selectAll("text.statetext")
@@ -539,6 +570,9 @@ hedotools.barchart = function() {
             .text(function(d,i) { return (i+1)+". "+d[2]; })
 	    .on('mouseover', function(event,d){
 		hedotools.barchartoncall.test(d,d[0]);
+	    })
+	    .on('mousedown', function(event,d){
+		hedotools.barchartonclick.test(d,d[0]);
 	    });
 
 	// d3.select(window).on("resize.shiftplot",resizeshift);
@@ -589,7 +623,7 @@ hedotools.barchart = function() {
 		    plot: plot, };
 
     return opublic;
-};
+}();
 
 
 
@@ -946,7 +980,7 @@ hedotools.lens = function() {
 		  };
 
     return opublic;
-};
+}();
 hedotools.map = function() {
 
     var figure;
@@ -1501,7 +1535,7 @@ hedotools.map = function() {
 
     return opublic;
 
-};
+}();
 
 
 
@@ -2054,7 +2088,7 @@ hedotools.sankey = function() {
     };
 
     return opublic;
-};
+}();
 
 
 

package/js/hedotools.barchart.js

@@ -24,6 +24,16 @@ hedotools.barchartoncall = function() {
     return opublic;
 }();
 
+// mousedown ("click-to-open") hook: an empty stub by default; the host page
+// overrides hedotools.barchartonclick.test to open the linked shift/modal.
+hedotools.barchartonclick = function() {
+    var test = function(event,d) {
+    }
+    var opublic = { test: test,
+		  };
+    return opublic;
+}();
+
 // make the plot
 hedotools.barchart = function() {
     var figure;
@@ -271,6 +281,9 @@ hedotools.barchart = function() {
 	    .on('mouseout', function(event,d){
 		var rectSelection = d3.select(this).style('opacity','1.0').style('stroke','rgb(100,100,100)').style('stroke-width','1.0');
 		// var rectSelection = d3.select(this).style({opacity:'0.7'});
+	    })
+	    .on('mousedown', function(event,d){
+		hedotools.barchartonclick.test(d,d[0]);
 	    });
 
 	axes.selectAll("text.statetext")
@@ -284,6 +297,9 @@ hedotools.barchart = function() {
             .text(function(d,i) { return (i+1)+". "+d[2]; })
 	    .on('mouseover', function(event,d){
 		hedotools.barchartoncall.test(d,d[0]);
+	    })
+	    .on('mousedown', function(event,d){
+		hedotools.barchartonclick.test(d,d[0]);
 	    });
 
 	// d3.select(window).on("resize.shiftplot",resizeshift);
@@ -334,7 +350,7 @@ hedotools.barchart = function() {
 		    plot: plot, };
 
     return opublic;
-};
+}();
 
 
 

package/js/hedotools.computeHapps.js

@@ -0,0 +1,18 @@
+hedotools.computeHapps = function() {
+    var go = function () {
+	for (var j=0; j<52; j++) {
+	    // compute total frequency
+	    var N = 0.0;
+	    for (var i=0; i<allData[j].freq.length; i++) {
+		N += parseFloat(allData[j].freq[i]);
+	    }
+	    var happs = 0.0;
+	    for (var i=0; i<allData[j].freq.length; i++) {
+		happs += parseFloat(allData[j].freq[i])*parseFloat(lens[i]);
+	    }
+	    allData[j].avhapps = happs/N;
+	}
+    }
+    var opublic = { go: go, };
+    return opublic;
+}();

package/js/hedotools.lens.js

@@ -345,4 +345,4 @@ hedotools.lens = function() {
 		  };
 
     return opublic;
-};
+}();

package/js/hedotools.map.js

@@ -552,7 +552,7 @@ hedotools.map = function() {
 
     return opublic;
 
-};
+}();
 
 
 

package/js/hedotools.nonsankey.js

@@ -0,0 +1,580 @@
+hedotools.sankeyoncall = function() { 
+    var test = function(i,data) {
+	console.log("set in module");
+
+	console.log(allDataOld);
+	
+	var shiftObj = hedotools.shifter.shift(allDataOld[data[i].index].freq,allData[data[i].index].freq,lens,words);
+
+	shiftObj.setfigure(d3.select('#shift01')).setText("Why "+data[i].name+" has become "+((allDataOld[data[i].index].avhapps < allData[data[i].index].avhapps) ? "happier" : "less happy")+":").plot();
+
+
+    }
+    var opublic = { test: test, };
+    return opublic;
+}();
+
+hedotools.sankey = function() { 
+
+    var popuptimer;
+
+    var figure;
+
+    var setfigure = function(_) {
+	console.log("setting figure");
+	figure = _;
+	// grabwidth();
+	return hedotools.sankey;
+    }
+
+    var oldlist;
+    var newlist;
+    var stateNames;
+
+    var oldindices;
+    var newindices;
+    var data;
+
+    var setdata = function(a,b,c) {
+	oldlist = a;
+	newlist = b;
+	stateNames = c;
+	if ( stateNames[50] === "District of Columbia" ) {
+	    stateNames[50] = "DC";
+	}
+
+	// do the sorting
+	oldindices = Array(oldlist.length);
+	for (var i = 0; i < oldlist.length; i++) { oldindices[i] = i; }
+
+	// sort by abs magnitude
+	// oldindices.sort(function(a,b) { return Math.abs(data[a]) < Math.abs(data[b]) ? 1 : Math.abs(data[a]) > Math.abs(data[b]) ? -1 : 0; });
+
+	// sort by magnitude, parity preserving
+	oldindices.sort(function(a,b) { return oldlist[a] < oldlist[b] ? 1 : oldlist[a] > oldlist[b] ? -1 : 0; });
+
+	// do the sorting on new data
+	newindices = Array(newlist.length);
+	for (var i = 0; i < newlist.length; i++) { newindices[i] = i; }
+
+	newindices.sort(function(a,b) { return newlist[a] < newlist[b] ? 1 : newlist[a] > newlist[b] ? -1 : 0; });
+
+	data = Array(oldlist.length);
+	for (var i=0; i<data.length; i++) {
+	    data[i] = {
+		"name": stateNames[i],
+		"index": i,
+		"oldindex": oldindices.indexOf(i),
+		"newindex": newindices.indexOf(i),
+		"change": newlist[i]-oldlist[i],
+		"oldhapps": oldlist[i],
+		"newhapps": newlist[i],
+	    };
+	}
+
+	// console.log(data);
+	// tmpglob = data;
+
+	return hedotools.sankey;
+    }
+
+    // initialize everything so other function in this module have access
+    var margin;
+    var axeslabelmargin;
+    var figwidth;
+    var aspectRatio;
+    var figheight;
+    var width;
+    var height;
+    var figcenter;
+    var leftOffsetStatic;
+
+    var canvas;
+    var x;
+    var y;
+    var axes;
+
+    var oldstateselection;
+    var newstateselction;
+    var path;
+    var sankeydata;
+    var pathwidth;
+    var pathselection;
+
+    var listlabels;
+    var extraSideWidth = [0,0];
+
+    var useTip = false;
+    var tip;
+
+    var minwidth = 450;
+
+    // make the plot
+    var plot = function() {
+	margin = {top: 0, right: 0, bottom: 0, left: 0};
+	axeslabelmargin = {top: 0, right: 0+extraSideWidth[0], bottom: 0, left: 0+extraSideWidth[1]};
+	figwidth = parseInt(figure.style('width')) - margin.left - margin.right;
+	if (figwidth<minwidth) {
+	    console.log("width is too small...");
+	    d3.selectAll(".reftimelabel,.comptimelabel,.reftimelabelbottom,.comptimelabelbottom").remove();
+	    figure.append("text").text("Unfortunately, this visualization will look terrible on your device. If you're on a phone, try rotating and refreshing, or looking from a desktop. Thanks :)");
+	    return hedotools.sankey;
+	}
+	aspectRatio = 1.8+3.4*(oldlist.length-51)/(304-51);
+	figheight = parseInt(figure.style('width'))*aspectRatio - margin.top - margin.bottom;
+	// console.log("figheight is "+figheight);
+	// figheight = 4576; // for the city sankey this seems good
+	width = figwidth-axeslabelmargin.left-axeslabelmargin.right;
+	height = figheight-axeslabelmargin.top-axeslabelmargin.bottom;
+	figcenter = width/2;
+	leftOffsetStatic = axeslabelmargin.left;
+
+	var hovergroup = figure.append("div").attr("class", "hoverinfogroup")
+	    // .style("transform", "translate("+(x+hoverboxxoffset+axeslabelmargin.left)+","+(d3.min([d3.max([0,y-hoverboxheight/2-hoverboxyoffset]),height-hoverboxheight]))+")")
+	    .style("position", "absolute")
+	    .style("top", "100px")
+	    .style("left", "100px")
+	    .style("visibility", "hidden");
+
+	function hidehover() {
+	    console.log("hiding hover");
+	    hovergroup.style("visibility", "hidden");
+	}
+
+	// remove an old figure if it exists
+	figure.select(".canvas").remove();
+
+	canvas = figure.append("svg")
+	    .attr("width",figwidth)
+	    .attr("height",figheight)
+	    .attr("class","canvas")
+
+	// x scale, maps all the data to
+	x = d3.scaleLinear()
+	    .domain([0,1])
+	    .range([5,width-10]);
+
+	// linear scale function
+	y =  d3.scaleLinear()
+	    .domain([newlist.length,1])
+	    .range([height-20, 0]);
+
+	// create the axes themselves
+	axes = canvas.append("g")
+	    .attr("transform", "translate(" + (axeslabelmargin.left) + "," +
+		  (axeslabelmargin.top) + ")")
+	    .attr("width", width)
+	    .attr("height", height)
+	    .attr("class", "main");
+
+	// if (useTip) {
+	//     console.log("setting tip");
+	//     tip = d3.tip().attr('class', 'd3-tip').html(function(d) { return d; });
+	//     axes.call(tip);
+	// }
+
+	oldstateselection = axes.selectAll("text.statetext.old")
+	    .data(data)
+	    .enter()
+	    .append("text")
+	    .attr("class", function(d,i) { return d.name+" statetext"; })
+	    .attr("x",20)
+	    .style("text-anchor", "start")
+	    .attr("y",function(d,i) { return y(d.oldindex+1)+11; } )
+            .text(function(d,i) { return (d.oldindex+1)+". "+d.name; })
+	    .on("mouseover", function(event, d) {
+		var i = d.index;
+		var hoverboxheight = 90;
+		var hoverboxwidth = 200;
+		var hoverboxyoffset = 0;
+		var hoverboxxoffset = 0;
+
+		var x = d3.pointer(event, this)[0];
+		var y = d3.pointer(event, this)[1];
+
+                var hoverboxheightguess = 190;
+		if (refcity.length > 0) {
+		    hoverboxheightguess = 270;
+		}
+		if ((y+hoverboxheightguess)>height) { y-=(y+hoverboxheightguess-height); }
+
+		    hovergroup.style("position", "absolute")
+			.style("top", y+"px")
+			.style("left", x+"px")
+			.style("visibility", "visible");
+
+		    hovergroup.selectAll("p,h3,button,br").remove();
+
+		    hovergroup.append("h3")
+			.attr("class","cityname")
+			.text(d.name);
+
+		    hovergroup.append("p")
+			.attr("class","refhapps")
+		    	.text(reftimeseldecoder().cached+" Happiness: "+parseFloat(d.oldhapps).toFixed(2));
+
+		    hovergroup.append("p")
+			.attr("class","refrank")
+		    	.text(reftimeseldecoder().cached+" Rank: "+(d.oldindex+1));
+
+		    hovergroup.append("p")
+			.attr("class","comphapps")
+		    	.text(comptimeseldecoder().cached+" Happiness: "+parseFloat(d.newhapps).toFixed(2));
+
+		    hovergroup.append("p")
+			.attr("class","comprank")
+		    	.text(comptimeseldecoder().cached+" Rank: "+(d.newindex+1));
+
+		    var popupshift = function(refyear,refname,compyear,compname) {
+			refshifttimeencoder.varval(refyear);
+			refshiftcityencoder.varval(refname);
+			compshifttimeencoder.varval(compyear);
+			compshiftcityencoder.varval(compname);
+			// write a function to call on the load
+			drawShift = function() {
+			    hedotools.shifter._refF(refF);
+			    hedotools.shifter._compF(compF);
+			    hedotools.shifter.stop();
+			    hedotools.shifter.shifter();
+			    hedotools.shifter.setText("Why "+compname+" in "+compyear+" is "+( ( hedotools.shifter._compH() > hedotools.shifter._refH() ) ? "happier" : "less happy" )+" than "+refname+" in "+refyear+":").plot();
+			    $('#myModal').modal('show');
+			}
+			// load both of the files
+			var csvLoadsRemaining = 2;
+			var reffile = "https://hedonometer.org/data/cities/word-vectors/"+refyear+"/"+refname+".csv";
+			if (parseInt(refyear) < 2014) reffile+=".new"
+			var compfile = "https://hedonometer.org/data/cities/word-vectors/"+compyear+"/"+compname+".csv";
+			if (parseInt(compyear) < 2014) compfile+=".new"
+			console.log(reffile);
+			console.log(compfile);
+			var refF;
+			var compF;
+			d3.text(reffile).then(function(text) {
+			    refF = text.split(",");
+			    console.log(refF);
+			    if (!--csvLoadsRemaining) drawShift();
+			});
+			d3.text(compfile).then(function(text) {
+			    compF = text.split(",");
+			    console.log(compF);
+			    if (!--csvLoadsRemaining) drawShift();
+			});
+		    }
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-sm btn-primary")
+		    	.text("Shift city vs previous year")
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    popupshift(reftimeseldecoder().cached,d.name,comptimeseldecoder().cached,d.name);
+			});
+
+		    hovergroup.append("br");
+		    hovergroup.append("br");
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-sm btn-primary")
+		    	.text("Shift city in "+reftimeseldecoder().cached+" vs sum "+reftimeseldecoder().cached)
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    popupshift(reftimeseldecoder().cached,"US",reftimeseldecoder().cached,d.name);
+			});
+
+		    hovergroup.append("br");
+		    hovergroup.append("br");
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-sm btn-primary")
+		    	.text("Shift city in "+comptimeseldecoder().cached+" vs sum "+comptimeseldecoder().cached)
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    popupshift(comptimeseldecoder().cached,"US",comptimeseldecoder().cached,d.name);
+			});
+
+		    hovergroup.append("br");
+		    hovergroup.append("br");
+
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-xs btn-primary")
+		    	.text("Select as reference for city-city comparison")
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    refcity = d.name;
+			});
+
+		    if (refcity.length > 0) {
+			hovergroup.append("br");
+			hovergroup.append("br");
+			hovergroup.append("button")
+			    .attr("class","btn btn-xs btn-primary")
+		    	    .text("Compare against "+refcity+" in "+comptimeseldecoder().cached)
+			    .on("click", function() {
+				console.log(d);
+				console.log(i);
+				popupshift(comptimeseldecoder().cached,refcity,comptimeseldecoder().cached,d.name);
+			    });
+			hovergroup.append("br");
+			hovergroup.append("br");
+			hovergroup.append("button")
+			    .attr("class","btn btn-xs btn-primary")
+		    	    .text("Compare against "+refcity+" in "+reftimeseldecoder().cached)
+			    .on("click", function() {
+				console.log(d);
+				console.log(i);
+				popupshift(reftimeseldecoder().cached,refcity,reftimeseldecoder().cached,d.name);
+			    });
+		    }
+
+		clearTimeout(popuptimer);
+
+		popuptimer = setTimeout(hidehover,3000);
+	    })
+	    .on("mouseout", function(event, d) {
+		clearTimeout(popuptimer);
+
+		popuptimer = setTimeout(hidehover,3000);
+	    });
+
+	newstateselection = axes.selectAll("text.statetext.new")
+	    .data(data)
+	    .enter()
+	    .append("text")
+	    .attr("class", function(d,i) { return d.name+" statetext"; })
+	    .attr("x",300)
+	    .style("text-anchor", "start")
+	    .attr("y",function(d,i) { return y(d.newindex+1)+11; } )
+            .text(function(d,i) { return (d.newindex+1)+". "+d.name; })
+	    .on("mouseover", function(event, d) {
+		    var i = d.index;
+		    var hoverboxheight = 90;
+		    var hoverboxwidth = 200;
+		    var hoverboxyoffset = 0;
+		    var hoverboxxoffset = 0;
+
+		    var x = d3.pointer(event, this)[0];
+		    var y = d3.pointer(event, this)[1];
+
+                var hoverboxheightguess = 190;
+		if (refcity.length > 0) {
+		    hoverboxheightguess = 270;
+		}
+		if ((y+hoverboxheightguess)>height) { y-=(y+hoverboxheightguess-height); }
+
+		    hovergroup.style("position", "absolute")
+			.style("top", y+"px")
+			.style("left", x+"px")
+			.style("visibility", "visible");
+
+		    hovergroup.selectAll("p,h3,button,br").remove();
+
+		    hovergroup.append("h3")
+			.attr("class","cityname")
+			.text(d.name);
+
+		    hovergroup.append("p")
+			.attr("class","refhapps")
+		    	.text(reftimeseldecoder().cached+" Happiness: "+parseFloat(d.oldhapps).toFixed(2));
+
+		    hovergroup.append("p")
+			.attr("class","refrank")
+		    	.text(reftimeseldecoder().cached+" Rank: "+(d.oldindex+1));
+
+		    hovergroup.append("p")
+			.attr("class","comphapps")
+		    	.text(comptimeseldecoder().cached+" Happiness: "+parseFloat(d.newhapps).toFixed(2));
+
+		    hovergroup.append("p")
+			.attr("class","comprank")
+		    	.text(comptimeseldecoder().cached+" Rank: "+(d.newindex+1));
+
+		    var popupshift = function(refyear,refname,compyear,compname) {
+			refshifttimeencoder.varval(refyear);
+			refshiftcityencoder.varval(refname);
+			compshifttimeencoder.varval(compyear);
+			compshiftcityencoder.varval(compname);
+			// write a function to call on the load
+			drawShift = function() {
+			    hedotools.shifter._refF(refF);
+			    hedotools.shifter._compF(compF);
+			    hedotools.shifter.stop();
+			    hedotools.shifter.shifter();
+			    hedotools.shifter.setText("Why "+compname+" in "+compyear+" is "+( ( hedotools.shifter._compH() > hedotools.shifter._refH() ) ? "happier" : "less happy" )+" than "+refname+" in "+refyear+":").plot();
+			    $('#myModal').modal('show');
+			}
+			// load both of the files
+			var csvLoadsRemaining = 2;
+			var reffile = "https://hedonometer.org/data/cities/word-vectors/"+refyear+"/"+refname+".csv";
+			if (parseInt(refyear) < 2014) reffile+=".new"
+			var compfile = "https://hedonometer.org/data/cities/word-vectors/"+compyear+"/"+compname+".csv";
+			if (parseInt(compyear) < 2014) compfile+=".new"
+			console.log(reffile);
+			console.log(compfile);
+			var refF;
+			var compF;
+			d3.text(reffile).then(function(text) {
+			    refF = text.split(",");
+			    console.log(refF);
+			    if (!--csvLoadsRemaining) drawShift();
+			});
+			d3.text(compfile).then(function(text) {
+			    compF = text.split(",");
+			    console.log(compF);
+			    if (!--csvLoadsRemaining) drawShift();
+			});
+		    }
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-sm btn-primary")
+		    	.text("Shift city vs previous year")
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    popupshift(reftimeseldecoder().cached,d.name,comptimeseldecoder().cached,d.name);
+			});
+
+		    hovergroup.append("br");
+		    hovergroup.append("br");
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-sm btn-primary")
+		    	.text("Shift city in "+reftimeseldecoder().cached+" vs sum "+reftimeseldecoder().cached)
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    popupshift(reftimeseldecoder().cached,"US",reftimeseldecoder().cached,d.name);
+			});
+
+		    hovergroup.append("br");
+		    hovergroup.append("br");
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-sm btn-primary")
+		    	.text("Shift city in "+comptimeseldecoder().cached+" vs sum "+comptimeseldecoder().cached)
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    popupshift(comptimeseldecoder().cached,"US",comptimeseldecoder().cached,d.name);
+			});
+
+		    hovergroup.append("br");
+		    hovergroup.append("br");
+
+
+		    hovergroup.append("button")
+			.attr("class","btn btn-xs btn-primary")
+		    	.text("Select as reference for city-city comparison")
+			.on("click", function() {
+			    console.log(d);
+			    console.log(i);
+			    refcity = d.name;
+			});
+
+		    if (refcity.length > 0) {
+			hovergroup.append("br");
+			hovergroup.append("br");
+			hovergroup.append("button")
+			    .attr("class","btn btn-xs btn-primary")
+		    	    .text("Compare against "+refcity+" in "+comptimeseldecoder().cached)
+			    .on("click", function() {
+				console.log(d);
+				console.log(i);
+				popupshift(comptimeseldecoder().cached,refcity,comptimeseldecoder().cached,d.name);
+			    });
+			hovergroup.append("br");
+			hovergroup.append("br");
+			hovergroup.append("button")
+			    .attr("class","btn btn-xs btn-primary")
+		    	    .text("Compare against "+refcity+" in "+reftimeseldecoder().cached)
+			    .on("click", function() {
+				console.log(d);
+				console.log(i);
+				popupshift(reftimeseldecoder().cached,refcity,reftimeseldecoder().cached,d.name);
+			    });
+		    }
+
+		clearTimeout(popuptimer);
+
+		popuptimer = setTimeout(hidehover,3000);
+	    })
+	    .on("mouseout", function(event, d) {
+		clearTimeout(popuptimer);
+
+		popuptimer = setTimeout(hidehover,3000);
+	    });
+
+	return hedotools.sankey;
+    };
+
+    var replot = function() {
+	// assuming that the data has been updated
+	// console.log(oldstateselection);
+	// console.log(newstateselection);
+
+	console.log(data);
+	
+	oldstateselection.data(data)
+	    .transition()
+	    .duration(3000)
+            .text(function(d,i) { return (d.oldindex+1)+". "+d.name; })
+	    .attr("y",function(d,i) { return y(d.oldindex+1)+11; } );
+
+    	newstateselection.data(data)
+	    .transition()
+	    .duration(3000)
+            .text(function(d,i) { return (d.newindex+1)+". "+d.name; })
+    	    .attr("y",function(d,i) { return y(d.newindex+1)+11; } );
+
+	return hedotools.sankey;
+    };
+
+    // need functions to access updated properties
+    var GETdata = function() {
+	return data;
+    };
+
+    var GETnewindices = function() {
+	return newindices;
+    };
+
+    var setTitles = function(titles) {
+	listlabels = titles;
+	return hedotools.sankey;
+    };
+
+    var setSideWidth = function(listTwoByOne) {
+	extraSideWidth = listTwoByOne;
+	return hedotools.sankey;
+    };
+
+    var setTipOn = function() {
+	useTip = true;
+	return hedotools.sankey;
+    };
+
+    var opublic = {
+	plot: plot,
+	setfigure: setfigure,
+	setdata: setdata,
+	data: GETdata,
+	newindices: GETnewindices,
+	replot: replot,
+	setTitles: setTitles,
+	setSideWidth: setSideWidth,
+	setTipOn: setTipOn,
+    };
+
+    return opublic;
+
+}();
+
+
+
+
+
+
+

package/js/hedotools.sankey.js

@@ -544,7 +544,7 @@ hedotools.sankey = function() {
     };
 
     return opublic;
-};
+}();
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@andyreagan/hedotools",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "A collection of D3.js tools in use at hedonometer.org: word shifts (via @andyreagan/d3-shifterator), choropleth maps, sankey diagrams, a frequency lens, and bar charts. Version tracks the supported D3 major version (7.x = D3 v7).",
   "author": "Andy Reagan",
   "license": "BSD-2-Clause",