diff --git a/.gitignore b/.gitignore index 0aedb6a9..e8e419d0 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,6 @@ scratch # data for the database scripts/data/ pyenv38/ + +# stray sqlite fallback (real DB is postgres) +db.sqlite3 diff --git a/hedonometer/migrations/0002_auto_20200413_1227.py b/hedonometer/migrations/0002_auto_20200413_1227.py index 7d109c17..cb1cc891 100644 --- a/hedonometer/migrations/0002_auto_20200413_1227.py +++ b/hedonometer/migrations/0002_auto_20200413_1227.py @@ -16,7 +16,12 @@ class Migration(migrations.Migration): migrations.AddField( model_name='embeddable', name='author', - field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, to='twython_django.TwitterProfile'), + # Originally a FK to twython_django.TwitterProfile; that app is no + # longer installed, this field is removed in migration 0010, and the + # Embeddable model is deleted in 0011 -- so the target is irrelevant + # to the final schema. Repointed to 'self' so a fresh `migrate` + # (new dev env / CI) can replay without the defunct twython-django. + field=models.ForeignKey(null=True, on_delete=django.db.models.deletion.CASCADE, to='hedonometer.Embeddable'), ), migrations.AddField( model_name='band', diff --git a/hedonometer/static/hedonometer/js/books-on-load-harry.js b/hedonometer/static/hedonometer/js/books-on-load-harry.js index d26e43ee..c7595435 100644 --- a/hedonometer/static/hedonometer/js/books-on-load-harry.js +++ b/hedonometer/static/hedonometer/js/books-on-load-harry.js @@ -40,7 +40,7 @@ function initializePlot() { book = bookDecoder().cached; // console.log("not a classic"); // hit the random api - d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&title__exact="+book,function(data) { + d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&title__exact="+book).then(function(data) { var result = data.objects[0]; console.log(result); lang = result.language; @@ -71,7 +71,7 @@ function initializePlot() { function loadCsv() { var csvLoadsRemaining = 4; var bookfile = "https://hedonometer.org/data/bookdata/timeseries/"+bookref+".csv"; - d3.text(bookfile, function (text) { + d3.text(bookfile).then(function (text) { var tmpminwin = 10; fulltimeseries = text.split(",").map(parseFloat); begtimeseries = fulltimeseries.slice(0,tmpminwin/2+1); @@ -79,7 +79,7 @@ function loadCsv() { timeseries = fulltimeseries.slice(tmpminwin/2,fulltimeseries.length-tmpminwin/2); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/bookdata/labMT/labMTscores-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/bookdata/labMT/labMTscores-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -93,7 +93,7 @@ function loadCsv() { hedotools.shifter._lens(lens); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwords-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwords-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); var words = tmp; var len = words.length - 1; @@ -105,7 +105,7 @@ function loadCsv() { hedotools.shifter._words(words); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwordsEn-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwordsEn-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); var words_en = tmp; var len = words_en.length - 1; @@ -189,7 +189,7 @@ var loadwordshiftdata = function() { var spinner = new Spinner(opts).spin(target); var bookfile = "https://hedonometer.org/data/bookdata/word-vectors/"+bookref+".csv"; - d3.text(bookfile, function (text) { + d3.text(bookfile).then(function (text) { tmp = text.split("\n"); // build the full data, terrible @@ -400,7 +400,7 @@ var substringMatcher = function(apik) { // } // } // if (matches.length === 0) { matches.push({ value: "book not indexed" }); } - d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&"+apik.toLowerCase()+"__icontains="+q,function(data) { + d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&"+apik.toLowerCase()+"__icontains="+q).then(function(data) { var result = data.objects; // console.log(result); var newresult = []; @@ -424,7 +424,7 @@ $(document).ready(function() { // window.location.replace("/books.html?book=random"); // but here, it's easier to make that API hit now and send the page // directly: - d3.json("https://hedonometer.org/api/v1/randombook/?format=json",function(data) { + d3.json("https://hedonometer.org/api/v1/randombook/?format=json").then(function(data) { var result = data.objects[0]; window.location.replace("/books/"+result.title+"/"); }) diff --git a/hedonometer/static/hedonometer/js/books-on-load.js b/hedonometer/static/hedonometer/js/books-on-load.js index 392f36e1..cff32525 100644 --- a/hedonometer/static/hedonometer/js/books-on-load.js +++ b/hedonometer/static/hedonometer/js/books-on-load.js @@ -38,7 +38,7 @@ function initializePlot() { book = bookDecoder().cached; // hit the random api if (book === 'random') { - d3.json("https://hedonometer.org/api/v1/randombook/?format=json",function(data) { + d3.json("https://hedonometer.org/api/v1/randombook/?format=json").then(function(data) { var result = data.objects[0]; // console.log(result); lang = result.language; @@ -63,7 +63,7 @@ function initializePlot() { }) } else { - d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&title__exact="+book,function(data) { + d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&title__exact="+book).then(function(data) { var result = data.objects[0]; console.log(result); lang = result.language; @@ -91,7 +91,7 @@ function initializePlot() { function loadCsv() { var csvLoadsRemaining = 4; var bookfile = "https://hedonometer.org/data/bookdata/processed/"+book+".csv"; - d3.text(bookfile, function (text) { + d3.text(bookfile).then(function (text) { tmp = text.split("\n"); // kill extra rows var len = tmp.length - 1; @@ -112,7 +112,7 @@ function loadCsv() { //console.log(d3.sum(allDataRaw[0])); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/bookdata/labMT/labMTscores-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/bookdata/labMT/labMTscores-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -126,7 +126,7 @@ function loadCsv() { hedotools.shifter._lens(lens); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwords-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwords-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -138,7 +138,7 @@ function loadCsv() { hedotools.shifter._words(words); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwordsEn-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/bookdata/labMT/labMTwordsEn-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); words_en = tmp; var len = words_en.length - 1; @@ -259,7 +259,7 @@ var substringMatcher = function(apik) { // } // } // if (matches.length === 0) { matches.push({ value: "book not indexed" }); } - d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&"+apik.toLowerCase()+"__icontains="+q,function(data) { + d3.json("https://hedonometer.org/api/v1/gutenberg/?format=json&"+apik.toLowerCase()+"__icontains="+q).then(function(data) { var result = data.objects; // console.log(result); var newresult = []; diff --git a/hedonometer/static/hedonometer/js/books/books-on-load-v3.js b/hedonometer/static/hedonometer/js/books/books-on-load-v3.js index fdd7df9b..ebdfd1dc 100644 --- a/hedonometer/static/hedonometer/js/books/books-on-load-v3.js +++ b/hedonometer/static/hedonometer/js/books/books-on-load-v3.js @@ -30,7 +30,7 @@ function commaSeparateNumber(val){ var my_shifter; function initializePlot() { - my_shifter = hedotools.shifter(); + my_shifter = hedotools.shifter; loadCsv(); } @@ -44,7 +44,7 @@ function loadCsv() { --csvLoadsRemaining; } else { - d3.text("http://hedonometer.org/data/bookdata/labMT/labMTwordsEn-"+bookinfo.lang+".csv", function (text) { + d3.text("http://hedonometer.org/data/bookdata/labMT/labMTwordsEn-"+bookinfo.lang+".csv").then(function (text) { var tmp = text.split("\n"); words_en = tmp; var len = words_en.length - 1; @@ -57,16 +57,7 @@ function loadCsv() { if (!--csvLoadsRemaining) initializePlotPlot(); }); } - d3.text(bookfile, function (error,text) { - if (error) { - missing_file = true; - console.log("file is missing"); - bookinfo.avhapps = "N/A"; - bookinfo.len = "N/A"; - cat_card(bookinfo); - d3.select("#booktitle").append("h4").html("** book file not available"); - return; - } + d3.text(bookfile).then(function (text) { tmp = text.split("\n"); // kill extra rows var len = tmp.length - 1; @@ -86,8 +77,16 @@ function loadCsv() { if (bookinfo.length < 10000) { alert("There are too few words in this book for the hedonometer to accurately generate a timeseries. Currently we need at least 10000 words, and this book has "+bookinfo.length+"."); } //console.log(d3.sum(allDataRaw[0])); if (!--csvLoadsRemaining) initializePlotPlot(); + }).catch(function (error) { + missing_file = true; + console.log("file is missing"); + bookinfo.avhapps = "N/A"; + bookinfo.len = "N/A"; + cat_card(bookinfo); + d3.select("#booktitle").append("h4").html("** book file not available"); + return; }); - d3.text("http://hedonometer.org/data/bookdata/labMT/labMTscores-"+bookinfo.lang+".csv", function (text) { + d3.text("http://hedonometer.org/data/bookdata/labMT/labMTscores-"+bookinfo.lang+".csv").then(function (text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -101,7 +100,7 @@ function loadCsv() { my_shifter._lens(lens); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("http://hedonometer.org/data/bookdata/labMT/labMTwords-"+bookinfo.lang+".csv", function (text) { + d3.text("http://hedonometer.org/data/bookdata/labMT/labMTwords-"+bookinfo.lang+".csv").then(function (text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -251,7 +250,7 @@ var substringMatcher = function(apik1,apik2) { // } // } // if (matches.length === 0) { matches.push({ value: "book not indexed" }); } - d3.json(query_string+q,function(data) { + d3.json(query_string+q).then(function(data) { var result = data.objects; console.log(result); var newresult = []; @@ -282,7 +281,7 @@ $(document).ready(function() { window.location.replace("/books/v3/"+(Math.floor((Math.random() * 51249) + 1)).toFixed(0)+"/"); } else { - d3.text("/static/hedonometer/gut_ids.txt", function (text) { + d3.text("/static/hedonometer/gut_ids.txt").then(function (text) { var tmp = text.split("\n"); var rand_ind = Math.floor((Math.random() * tmp.length)); window.location.replace("/books/v3/"+tmp[rand_ind]+"/"); diff --git a/hedonometer/static/hedonometer/js/books/drawBookTimeseries-v3.js b/hedonometer/static/hedonometer/js/books/drawBookTimeseries-v3.js index 2a7b5502..147c2444 100644 --- a/hedonometer/static/hedonometer/js/books/drawBookTimeseries-v3.js +++ b/hedonometer/static/hedonometer/js/books/drawBookTimeseries-v3.js @@ -34,7 +34,7 @@ function drawBookTimeseries(figure,data) { //console.log(data.length); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) // map from the start of the timeseries point to the max .domain([-minWindows/2,data.length+minWindows/2-1]) @@ -46,7 +46,7 @@ function drawBookTimeseries(figure,data) { // (lens); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([d3.min(data),d3.max(data)]) .range([height-10, 10]); @@ -65,27 +65,24 @@ function drawBookTimeseries(figure,data) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(5) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(5); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -107,11 +104,11 @@ function drawBookTimeseries(figure,data) { // axes = axes.append("g") // .attr("clip-path","url(#clip)"); - var line = d3.svg.line() + var line = d3.line() .x(function(d,i) { return x(i); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); var mainline = axes.append("path") .datum(data) @@ -121,11 +118,11 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var beglineline = d3.svg.line() + var beglineline = d3.line() .x(function(d,i) { return x(i-minWindows/2); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); begtimeseries.push(data[0]); @@ -138,11 +135,11 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var endlineline = d3.svg.line() + var endlineline = d3.line() .x(function(d,i) { return x(i+data.length-1); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); endtimeseries.unshift(data[data.length-1]); @@ -155,7 +152,7 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var area = d3.svg.area() + var area = d3.area() .x(function(d,i) { return x(i); }) .y0(height-1) .y1(function(d) { return y(d); }); @@ -170,7 +167,7 @@ function drawBookTimeseries(figure,data) { drawRefArea = function drawRefArea(extent) { - var refarea = d3.svg.area() + var refarea = d3.area() .x(function(d,i) { return x(extent[0]+i-minWindows/2); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -191,7 +188,7 @@ function drawBookTimeseries(figure,data) { drawCompArea = function drawCompArea(extent) { - var comparea = d3.svg.area() + var comparea = d3.area() .x(function(d,i) { return x(extent[0]+i-minWindows/2-1); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -213,10 +210,10 @@ function drawBookTimeseries(figure,data) { // console.log(d3.mean(data)); var avhapps = d3.mean(data); - var linearline = d3.svg.line() + var linearline = d3.line() .x(function(d,i) { if (i===0) { return x(d.index); } else { return x(d.index)+3 } }) .y(function(d) { return y(d.value); }) - .interpolate("linear"); + .curve(d3.curveLinear); var averageline = axes.append("path") .datum([ @@ -233,20 +230,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var averagetext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Average"); var averagetext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(avhapps.toFixed(2)); // console.log(d3.min(data)); @@ -285,20 +280,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Least Happy"); var mintext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(minhapps.toFixed(2)); var maxcircle = axes.append("circle") @@ -323,20 +316,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps), - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Happiest"); var maxtext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps)+15, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)+15) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(maxhapps.toFixed(2)); d3.select(window).on("resize.booktimeseries",resize); diff --git a/hedonometer/static/hedonometer/js/books/drawBookTimeseries.js b/hedonometer/static/hedonometer/js/books/drawBookTimeseries.js index 2a7b5502..147c2444 100644 --- a/hedonometer/static/hedonometer/js/books/drawBookTimeseries.js +++ b/hedonometer/static/hedonometer/js/books/drawBookTimeseries.js @@ -34,7 +34,7 @@ function drawBookTimeseries(figure,data) { //console.log(data.length); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) // map from the start of the timeseries point to the max .domain([-minWindows/2,data.length+minWindows/2-1]) @@ -46,7 +46,7 @@ function drawBookTimeseries(figure,data) { // (lens); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([d3.min(data),d3.max(data)]) .range([height-10, 10]); @@ -65,27 +65,24 @@ function drawBookTimeseries(figure,data) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(5) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(5); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -107,11 +104,11 @@ function drawBookTimeseries(figure,data) { // axes = axes.append("g") // .attr("clip-path","url(#clip)"); - var line = d3.svg.line() + var line = d3.line() .x(function(d,i) { return x(i); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); var mainline = axes.append("path") .datum(data) @@ -121,11 +118,11 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var beglineline = d3.svg.line() + var beglineline = d3.line() .x(function(d,i) { return x(i-minWindows/2); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); begtimeseries.push(data[0]); @@ -138,11 +135,11 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var endlineline = d3.svg.line() + var endlineline = d3.line() .x(function(d,i) { return x(i+data.length-1); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); endtimeseries.unshift(data[data.length-1]); @@ -155,7 +152,7 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var area = d3.svg.area() + var area = d3.area() .x(function(d,i) { return x(i); }) .y0(height-1) .y1(function(d) { return y(d); }); @@ -170,7 +167,7 @@ function drawBookTimeseries(figure,data) { drawRefArea = function drawRefArea(extent) { - var refarea = d3.svg.area() + var refarea = d3.area() .x(function(d,i) { return x(extent[0]+i-minWindows/2); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -191,7 +188,7 @@ function drawBookTimeseries(figure,data) { drawCompArea = function drawCompArea(extent) { - var comparea = d3.svg.area() + var comparea = d3.area() .x(function(d,i) { return x(extent[0]+i-minWindows/2-1); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -213,10 +210,10 @@ function drawBookTimeseries(figure,data) { // console.log(d3.mean(data)); var avhapps = d3.mean(data); - var linearline = d3.svg.line() + var linearline = d3.line() .x(function(d,i) { if (i===0) { return x(d.index); } else { return x(d.index)+3 } }) .y(function(d) { return y(d.value); }) - .interpolate("linear"); + .curve(d3.curveLinear); var averageline = axes.append("path") .datum([ @@ -233,20 +230,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var averagetext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Average"); var averagetext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(avhapps.toFixed(2)); // console.log(d3.min(data)); @@ -285,20 +280,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Least Happy"); var mintext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(minhapps.toFixed(2)); var maxcircle = axes.append("circle") @@ -323,20 +316,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps), - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Happiest"); var maxtext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps)+15, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)+15) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(maxhapps.toFixed(2)); d3.select(window).on("resize.booktimeseries",resize); diff --git a/hedonometer/static/hedonometer/js/books/drawLens-chapters.js b/hedonometer/static/hedonometer/js/books/drawLens-chapters.js index 112b46b3..9fc5e556 100644 --- a/hedonometer/static/hedonometer/js/books/drawLens-chapters.js +++ b/hedonometer/static/hedonometer/js/books/drawLens-chapters.js @@ -24,20 +24,22 @@ // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([1.00,9.00]) .range([0,width]); - // use d3.layout http://bl.ocks.org/mbostock/3048450 - var data = d3.layout.histogram() - .bins(x.ticks(65)) + // use d3.bin (v7 replacement for d3.layout.histogram); bins are arrays with + // .x0/.x1 (edges) and .length (count) instead of v3's .x/.dx/.y + var data = d3.bin() + .domain(x.domain()) + .thresholds(x.ticks(65)) (lens); // linear scale function - var y = d3.scale.linear() - .domain([0,d3.max(data,function(d) { return d.y; } )]) - .range([height, 0]); + var y = d3.scaleLinear() + .domain([0,d3.max(data,function(d) { return d.length; } )]) + .range([height, 0]); // create the axes themselves var axes = canvas.append("g") @@ -52,27 +54,24 @@ .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FFFFF0"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -81,8 +80,8 @@ .call(yAxis); var xAxis = create_xAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "x axis ") @@ -90,7 +89,7 @@ .attr("transform", "translate(0," + (height) + ")") .call(xAxis); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // create the clip boundary var clip = axes.append("svg:clipPath") @@ -131,18 +130,18 @@ .enter() .append("g") .attr("class","distrect") - .attr("fill",function(d,i) { if (d.x > lensMean) {return "#D3D3D3";} else { return "#D3D3D3";}}) - .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); + .attr("fill",function(d,i) { if (d.x0 > lensMean) {return "#D3D3D3";} else { return "#D3D3D3";}}) + .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); var mainrect = bar.append("rect") .attr("x", 1) - .attr("width", x(data[0].dx+1)-2 ) - .attr("height", function(d) { return height - y(d.y); }); + .attr("width", x(data[0].x1-data[0].x0+1)-2 ) + .attr("height", function(d) { return height - y(d.length); }); - var line = d3.svg.line() - .x(function(d,i) { return x(d.x); }) - .y(function(d) { return y(d.y); }) - .interpolate("linear"); + var line = d3.line() + .x(function(d,i) { return x(d.x0); }) + .y(function(d) { return y(d.length); }) + .curve(d3.curveLinear); var mainline = axes.append("path") .datum(data) @@ -154,34 +153,28 @@ //console.log(x(d3.min(lens))); - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([1,9]) .range([figwidth*.125,width+figwidth*.125]); - var brush = d3.svg.brush() - .x(brushX) - .extent(lensExtent) - .on("brushend",brushended); + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[figwidth*.125, 15], [width+figwidth*.125, height+15]]) + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","lensbrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height) - .attr("y",15) - .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.95}) - .attr("fill", "#FCFCFC"); + .call(brush); + gBrush.call(brush.move, lensExtent.map(brushX)); //console.log(lensExtent); lensencoder = d3.urllib.encoder().varname("lens"); //.varval(lensExtent); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0; + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert); // round to nearest tenth (set 4 to 10) // round to nearest quarter @@ -208,8 +201,7 @@ } d3.select(this).transition() - .call(brush.extent(lensExtent)) - .call(brush.event); + .call(brush.move, lensExtent.map(brushX)); lensencoder.varval(lensExtent); } @@ -233,20 +225,19 @@ //xAxisHandle.call(xAxis); canvas.select(".x.axis").call(xAxis); - canvas.selectAll(".distrect").attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); + canvas.selectAll(".distrect").attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); // xlabel.attr("x",(leftOffsetStatic+width/2)); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".lensbrush") //.transition() - .call(brush.extent(lensExtent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 15], [leftOffsetStatic+width, height+15]]); + d3.select(".lensbrush") + .call(brush) + .call(brush.move, lensExtent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/books/drawLens-v3.js b/hedonometer/static/hedonometer/js/books/drawLens-v3.js index e76d1a8c..4e190fac 100644 --- a/hedonometer/static/hedonometer/js/books/drawLens-v3.js +++ b/hedonometer/static/hedonometer/js/books/drawLens-v3.js @@ -1,10 +1,11 @@ -function drawLens(figure,lens) { + function drawLens(figure,lens) { /* takes a d3 selection and draws the lens distribution on slide of the stop-window -reload data csv's -cut out stops words (0 the frequencies) -call shift on these frequency vectors */ + var margin = {top: 0, right: 0, bottom: 0, left: 0}, figwidth = parseInt(d3.select('#lens01').style('width')) - margin.left - margin.right, figheight = 150 - margin.top - margin.bottom, @@ -23,20 +24,22 @@ function drawLens(figure,lens) { // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([1.00,9.00]) .range([0,width]); - // use d3.layout http://bl.ocks.org/mbostock/3048450 - var data = d3.layout.histogram() - .bins(x.ticks(65)) + // use d3.bin (v7 replacement for d3.layout.histogram); bins are arrays with + // .x0/.x1 (edges) and .length (count) instead of v3's .x/.dx/.y + var data = d3.bin() + .domain(x.domain()) + .thresholds(x.ticks(65)) (lens); // linear scale function - var y = d3.scale.linear() - .domain([0,d3.max(data,function(d) { return d.y; } )]) - .range([height, 0]); + var y = d3.scaleLinear() + .domain([0,d3.max(data,function(d) { return d.length; } )]) + .range([height, 0]); // create the axes themselves var axes = canvas.append("g") @@ -51,27 +54,24 @@ function drawLens(figure,lens) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FFFFF0"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -80,8 +80,8 @@ function drawLens(figure,lens) { .call(yAxis); var xAxis = create_xAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "x axis ") @@ -89,7 +89,7 @@ function drawLens(figure,lens) { .attr("transform", "translate(0," + (height) + ")") .call(xAxis); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // create the clip boundary var clip = axes.append("svg:clipPath") @@ -130,18 +130,18 @@ function drawLens(figure,lens) { .enter() .append("g") .attr("class","distrect") - .attr("fill",function(d,i) { if (d.x > lensMean) {return "#D3D3D3";} else { return "#D3D3D3";}}) - .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); + .attr("fill",function(d,i) { if (d.x0 > lensMean) {return "#D3D3D3";} else { return "#D3D3D3";}}) + .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); var mainrect = bar.append("rect") .attr("x", 1) - .attr("width", x(data[0].dx+1)-2 ) - .attr("height", function(d) { return height - y(d.y); }); + .attr("width", x(data[0].x1-data[0].x0+1)-2 ) + .attr("height", function(d) { return height - y(d.length); }); - var line = d3.svg.line() - .x(function(d,i) { return x(d.x); }) - .y(function(d) { return y(d.y); }) - .interpolate("linear"); + var line = d3.line() + .x(function(d,i) { return x(d.x0); }) + .y(function(d) { return y(d.length); }) + .curve(d3.curveLinear); var mainline = axes.append("path") .datum(data) @@ -153,34 +153,28 @@ function drawLens(figure,lens) { //console.log(x(d3.min(lens))); - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([1,9]) .range([figwidth*.125,width+figwidth*.125]); - var brush = d3.svg.brush() - .x(brushX) - .extent(lensExtent) - .on("brushend",brushended); + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[figwidth*.125, 15], [width+figwidth*.125, height+15]]) + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","lensbrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height) - .attr("y",15) - .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.95}) - .attr("fill", "#FCFCFC"); + .call(brush); + gBrush.call(brush.move, lensExtent.map(brushX)); //console.log(lensExtent); lensencoder = d3.urllib.encoder().varname("lens"); //.varval(lensExtent); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0; + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert); // round to nearest tenth (set 4 to 10) // round to nearest quarter @@ -200,16 +194,14 @@ function drawLens(figure,lens) { my_shifter.shifter(); var happysad = my_shifter._compH() > my_shifter._refH() ? "happier" : "less happy"; var shifttext = ["Why comparison section is "+happysad+" than reference section:","Reference section's happiness: "+my_shifter._refH().toFixed(2),"Comparison section's happiness: "+my_shifter._compH().toFixed(2)] - my_shifter.setText(shifttext); - my_shifter.plot(); + my_shifter.setText(shifttext).plot(); // set the lens extent in the browser, if it didn't already exist // break down the current window.location } d3.select(this).transition() - .call(brush.extent(lensExtent)) - .call(brush.event); + .call(brush.move, lensExtent.map(brushX)); lensencoder.varval(lensExtent); } @@ -233,20 +225,19 @@ function drawLens(figure,lens) { //xAxisHandle.call(xAxis); canvas.select(".x.axis").call(xAxis); - canvas.selectAll(".distrect").attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); + canvas.selectAll(".distrect").attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); // xlabel.attr("x",(leftOffsetStatic+width/2)); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".lensbrush") //.transition() - .call(brush.extent(lensExtent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 15], [leftOffsetStatic+width, height+15]]); + d3.select(".lensbrush") + .call(brush) + .call(brush.move, lensExtent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/books/selectChapter-v3.js b/hedonometer/static/hedonometer/js/books/selectChapter-v3.js index 1f4bae8d..26b729af 100644 --- a/hedonometer/static/hedonometer/js/books/selectChapter-v3.js +++ b/hedonometer/static/hedonometer/js/books/selectChapter-v3.js @@ -23,7 +23,7 @@ function selectChapter(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); @@ -34,7 +34,7 @@ function selectChapter(figure,numSections) { // (lens); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -51,22 +51,19 @@ function selectChapter(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // draw the axes // var yAxis = create_yAxis() @@ -80,8 +77,8 @@ function selectChapter(figure,numSections) { // .call(yAxis); var xAxis = create_xAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); var xAxisHandle = axes.append("g") .attr("class", "x axis ") @@ -89,7 +86,7 @@ function selectChapter(figure,numSections) { .attr("transform", "translate(0," + (height) + ")") .call(xAxis); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // create the clip boundary var clip = axes.append("svg:clipPath") @@ -123,7 +120,7 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,allDataRaw.length]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -136,31 +133,26 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(compFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 0], [width+axeslabelmargin.left, height]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","bottombrush") - .call(brush) - .call(brush.event); + .call(brush); + // position the brush at the initial (data-unit) comparison extent + gBrush.call(brush.move, compFextent.map(brushX)); - - - gBrush.selectAll("rect") - .attr("height",height) - .attr("y",0) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".comparea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".comparea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins drawCompArea(extent1); @@ -169,10 +161,10 @@ function selectChapter(figure,numSections) { compFencoder = d3.urllib.encoder().varname("compExtent"); //.varval(compFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0 .map(Math.round); // should round it to bins + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // should round it to bins //d3.selectAll("text.complabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); @@ -221,8 +213,7 @@ function selectChapter(figure,numSections) { } d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } d3.select(window).on("resize.selectbottom",resizebottom); @@ -244,16 +235,15 @@ function selectChapter(figure,numSections) { xlabel.attr("x",(leftOffsetStatic+width/2)); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".bottombrush") //.transition() - .call(brush.extent(compFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 0], [leftOffsetStatic+width, height]]); + d3.select(".bottombrush") + .call(brush) + .call(brush.move, compFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/books/selectChapter.js b/hedonometer/static/hedonometer/js/books/selectChapter.js index 24daa7d6..13811864 100644 --- a/hedonometer/static/hedonometer/js/books/selectChapter.js +++ b/hedonometer/static/hedonometer/js/books/selectChapter.js @@ -23,7 +23,7 @@ function selectChapter(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); @@ -34,7 +34,7 @@ function selectChapter(figure,numSections) { // (lens); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -51,22 +51,19 @@ function selectChapter(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // draw the axes // var yAxis = create_yAxis() @@ -80,8 +77,8 @@ function selectChapter(figure,numSections) { // .call(yAxis); var xAxis = create_xAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); var xAxisHandle = axes.append("g") .attr("class", "x axis ") @@ -89,7 +86,7 @@ function selectChapter(figure,numSections) { .attr("transform", "translate(0," + (height) + ")") .call(xAxis); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // create the clip boundary var clip = axes.append("svg:clipPath") @@ -123,7 +120,7 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,allDataRaw.length]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -136,31 +133,26 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(compFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 0], [width+axeslabelmargin.left, height]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","bottombrush") - .call(brush) - .call(brush.event); + .call(brush); + // position the brush at the initial (data-unit) comparison extent + gBrush.call(brush.move, compFextent.map(brushX)); - - - gBrush.selectAll("rect") - .attr("height",height) - .attr("y",0) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".comparea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".comparea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins drawCompArea(extent1); @@ -169,10 +161,10 @@ function selectChapter(figure,numSections) { compFencoder = d3.urllib.encoder().varname("compExtent"); //.varval(compFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0 .map(Math.round); // should round it to bins + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // should round it to bins //d3.selectAll("text.complabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); @@ -221,8 +213,7 @@ function selectChapter(figure,numSections) { } d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } d3.select(window).on("resize.selectbottom",resizebottom); @@ -244,16 +235,15 @@ function selectChapter(figure,numSections) { xlabel.attr("x",(leftOffsetStatic+width/2)); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".bottombrush") //.transition() - .call(brush.extent(compFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 0], [leftOffsetStatic+width, height]]); + d3.select(".bottombrush") + .call(brush) + .call(brush.move, compFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/books/selectChapterTop-v3.js b/hedonometer/static/hedonometer/js/books/selectChapterTop-v3.js index 7ea25715..27e05554 100644 --- a/hedonometer/static/hedonometer/js/books/selectChapterTop-v3.js +++ b/hedonometer/static/hedonometer/js/books/selectChapterTop-v3.js @@ -23,13 +23,13 @@ function selectChapterTop(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -46,22 +46,19 @@ function selectChapterTop(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // create the clip boundary var clip = axes.append("svg:clipPath") @@ -74,7 +71,7 @@ function selectChapterTop(figure,numSections) { var unclipped_axes = axes; - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,allDataRaw.length]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -87,31 +84,28 @@ function selectChapterTop(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(refFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 4], [width+axeslabelmargin.left, height-2+4]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","topbrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height-2) - .attr("y",4) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + .call(brush); + // position the brush at the initial (data-unit) reference extent + gBrush.call(brush.move, refFextent.map(brushX)); + + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".refarea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".refarea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins drawRefArea(extent1); @@ -120,11 +114,11 @@ function selectChapterTop(figure,numSections) { refFencoder = d3.urllib.encoder().varname("refExtent"); //.varval(refFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins - + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // should round it to bins + //d3.selectAll("text.reflabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); if ((extent1[0] !== refFextent[0]) || (extent1[1] !== refFextent[1])) @@ -161,8 +155,7 @@ function selectChapterTop(figure,numSections) { } d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } @@ -185,12 +178,11 @@ function selectChapterTop(figure,numSections) { //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".topbrush") //.transition() - .call(brush.extent(refFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 4], [leftOffsetStatic+width, height-2+4]]); + d3.select(".topbrush") + .call(brush) + .call(brush.move, refFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/books/selectChapterTop.js b/hedonometer/static/hedonometer/js/books/selectChapterTop.js index b7835f62..42667514 100644 --- a/hedonometer/static/hedonometer/js/books/selectChapterTop.js +++ b/hedonometer/static/hedonometer/js/books/selectChapterTop.js @@ -23,13 +23,13 @@ function selectChapterTop(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -46,22 +46,19 @@ function selectChapterTop(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // create the clip boundary var clip = axes.append("svg:clipPath") @@ -74,7 +71,7 @@ function selectChapterTop(figure,numSections) { var unclipped_axes = axes; - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,allDataRaw.length]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -87,31 +84,28 @@ function selectChapterTop(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(refFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 4], [width+axeslabelmargin.left, height-2+4]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","topbrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height-2) - .attr("y",4) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + .call(brush); + // position the brush at the initial (data-unit) reference extent + gBrush.call(brush.move, refFextent.map(brushX)); + + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".refarea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".refarea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins drawRefArea(extent1); @@ -120,11 +114,11 @@ function selectChapterTop(figure,numSections) { refFencoder = d3.urllib.encoder().varname("refExtent"); //.varval(refFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins - + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // should round it to bins + //d3.selectAll("text.reflabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); if ((extent1[0] !== refFextent[0]) || (extent1[1] !== refFextent[1])) @@ -161,8 +155,7 @@ function selectChapterTop(figure,numSections) { } d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } @@ -185,12 +178,11 @@ function selectChapterTop(figure,numSections) { //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".topbrush") //.transition() - .call(brush.extent(refFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 4], [leftOffsetStatic+width, height-2+4]]); + d3.select(".topbrush") + .call(brush) + .call(brush.move, refFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/cbs-on-load.js b/hedonometer/static/hedonometer/js/cbs-on-load.js index 1823e7d6..21ceed5b 100644 --- a/hedonometer/static/hedonometer/js/cbs-on-load.js +++ b/hedonometer/static/hedonometer/js/cbs-on-load.js @@ -93,26 +93,26 @@ function sectionIndex(name) { var refcompdrops = function() { d3.select("#compSelect").selectAll("a") - .on("click", function(d,i) { - shiftComp = sectionIndex(sectionListWAllFirst[i].genre); - d3.select(".complabel").text(sectionListWAllFirst[i].genre); - compencoder.varval(sectionListWAllFirst[i].genre); + .on("click", function(event, d) { + shiftComp = sectionIndex(d.genre); + d3.select(".complabel").text(d.genre); + compencoder.varval(d.genre); if (shiftRef !== shiftComp) { drawShift(); } }); d3.select("#refSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // console.log(i); - shiftRef = sectionIndex(sectionListWAllFirst[i].genre); - d3.select(".reflabel").text(sectionListWAllFirst[i].genre); - refencoder.varval(sectionListWAllFirst[i].genre); + shiftRef = sectionIndex(d.genre); + d3.select(".reflabel").text(d.genre); + refencoder.varval(d.genre); if (shiftRef !== shiftComp) { drawShift(); } }); d3.select("#rotate") - .on("click", function(d,i) { + .on("click", function(event) { var tmp = shiftComp; shiftComp = shiftRef; shiftRef = tmp; @@ -133,7 +133,7 @@ function loadCsv() { var allLoadsRemaining = listLoadsRemaining+shiftLoadsRemaining; var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); lens = tmp.map(parseFloat); var len = lens.length - 1; @@ -144,7 +144,7 @@ function loadCsv() { hedotools.shifter._lens(lens); if (!--allLoadsRemaining) initializeBoth(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -155,11 +155,11 @@ function loadCsv() { hedotools.shifter._words(words); if (!--allLoadsRemaining) initializeBoth(); }); - d3.json("https://hedonometer.org/data/CBS/hosts.json", function(json) { + d3.json("https://hedonometer.org/data/CBS/hosts.json").then(function(json) { sectionList = json; if (!--allLoadsRemaining) initializeBoth(); }); - d3.json("https://hedonometer.org/data/CBS/all.json", function(json) { + d3.json("https://hedonometer.org/data/CBS/all.json").then(function(json) { allEntry = json; if (!--allLoadsRemaining) initializeBoth(); }); @@ -233,12 +233,12 @@ var drawShift = function() { d3.select("#embedtextarea").html(""); - d3.text(refFile,function(text) { + d3.text(refFile).then(function(text) { refF = text.split("\n"); console.log(refF); if (!--finalLoadsRemaining) drawShiftInternal(); }); - d3.text(compFile,function(text) { + d3.text(compFile).then(function(text) { compF = text.split("\n"); if (!--finalLoadsRemaining) drawShiftInternal(); }); @@ -250,7 +250,7 @@ function initializePlot() { d3.select(".reflabel").text(refdecoder().cached); d3.select(".complabel").text(compdecoder().cached); - d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(d,i) { + d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(event, d) { if (selType !== d) { selType = d; d3.select(".selbutton.one").attr("class","btn btn-default btn-xs pull-right selbutton one") diff --git a/hedonometer/static/hedonometer/js/cities-on-load.js b/hedonometer/static/hedonometer/js/cities-on-load.js index 30e55524..5c47dda5 100644 --- a/hedonometer/static/hedonometer/js/cities-on-load.js +++ b/hedonometer/static/hedonometer/js/cities-on-load.js @@ -21,7 +21,7 @@ hedotools.barchartoncall = function() { var stateSelType = true; -d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(d,i) { +d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(event, d) { if (stateSelType !== d) { stateSelType = d; d3.select(".selbutton.one").attr("class","btn btn-default btn-xs pull-right selbutton one") @@ -85,7 +85,8 @@ var timeFrameText = timeFrames; var refcompdrops = function() { d3.select("#compSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { + var i = Array.prototype.indexOf.call(document.querySelectorAll("#compSelect a"), this); shiftComp = cityIndex(cityListSortedUSFirst[i]); d3.select(".complabel").text(cityListSortedUSFirst[i]); compencoder.varval(cityListSortedUSFirst[i]); @@ -94,7 +95,8 @@ var refcompdrops = function() { } }); d3.select("#refSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { + var i = Array.prototype.indexOf.call(document.querySelectorAll("#refSelect a"), this); // console.log(i); shiftRef = cityIndex(cityListSortedUSFirst[i]); d3.select(".reflabel").text(cityListSortedUSFirst[i]); @@ -104,7 +106,7 @@ var refcompdrops = function() { } }); d3.select("#rotate") - .on("click", function(d,i) { + .on("click", function(event, d) { var tmp = shiftComp; shiftComp = shiftRef; shiftRef = tmp; @@ -121,8 +123,8 @@ var refcompdrops = function() { var timeDrop = function() { d3.select("#timeSelect").selectAll("a") - .on("click", function(d,i) { - key = i; + .on("click", function(event, d) { + key = Array.prototype.indexOf.call(document.querySelectorAll("#timeSelect a"), this); timeName = timeFrames[key]; d3.select(".timelabel").text(timeFrameText[key]); timeselencoder.varval(timeFrameText[key]); @@ -144,7 +146,7 @@ function loadCsv(time) { var allLoadsRemaining = listLoadsRemaining+shiftLoadsRemaining; var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); lens = tmp.map(parseFloat); var len = lens.length - 1; @@ -155,7 +157,7 @@ function loadCsv(time) { hedotools.shifter._lens(lens); if (!--allLoadsRemaining) initializeBoth(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -166,11 +168,11 @@ function loadCsv(time) { hedotools.shifter._words(words); if (!--allLoadsRemaining) initializeBoth(); }); - d3.text("https://hedonometer.org/data/cities/cityList_"+(timeseldecoder().cached)+"_PLOSHapps.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(timeseldecoder().cached)+"_PLOSHapps.csv").then(function(text) { cityHappsList = text.split("\n").slice(0,304).map(parseFloat); if (!--allLoadsRemaining) initializeBoth(); }); - d3.text("https://hedonometer.org/data/cities/mutualCities.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/mutualCities.csv").then(function(text) { cityList = text.split("\n").slice(0,304); classColor.domain([cityList.length,1]); if (!--allLoadsRemaining) initializeBoth(); @@ -245,12 +247,12 @@ var drawTheFreakingShift = function() { var refF; var compF; - d3.text(reffile,function(text) { + d3.text(reffile).then(function(text) { refF = text.split(","); // console.log(refF); if (!--finalLoadsRemaining) drawShift(); }); - d3.text(compfile,function(text) { + d3.text(compfile).then(function(text) { compF = text.split(","); // console.log(compF); if (!--finalLoadsRemaining) drawShift(); diff --git a/hedonometer/static/hedonometer/js/city-nonsankey-on-load.js b/hedonometer/static/hedonometer/js/city-nonsankey-on-load.js index 6963022d..2ac3a465 100644 --- a/hedonometer/static/hedonometer/js/city-nonsankey-on-load.js +++ b/hedonometer/static/hedonometer/js/city-nonsankey-on-load.js @@ -51,47 +51,47 @@ function initializePlot() { function timeDrop() { d3.select("#refSelect").selectAll("a") - .on("click", function(d,i) { - key = i; + .on("click", function(event, d) { + key = Array.prototype.indexOf.call(document.querySelectorAll("#refSelect a"), this); d3.select(".reftimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".reftimelabelbottom").html("All tweets from "+timeFrames[key]+' '); reftimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_mutualHapps.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_mutualHapps.csv").then(function(text) { ref = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); }); d3.select("#compSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // key = this.selectedIndex; - key = i; + key = Array.prototype.indexOf.call(document.querySelectorAll("#compSelect a"), this); d3.select(".comptimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".comptimelabelbottom").html("All tweets from "+timeFrames[key]+' '); comptimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_mutualHapps.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_mutualHapps.csv").then(function(text) { comp = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); }); d3.select("#refSelectBottom").selectAll("a") - .on("click", function(d,i) { - key = i; + .on("click", function(event, d) { + key = Array.prototype.indexOf.call(document.querySelectorAll("#refSelectBottom a"), this); d3.select(".reftimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".reftimelabelbottom").html("All tweets from "+timeFrames[key]+' '); reftimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_mutualHapps.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_mutualHapps.csv").then(function(text) { ref = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); }); d3.select("#compSelectBottom").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // key = this.selectedIndex; - key = i; + key = Array.prototype.indexOf.call(document.querySelectorAll("#compSelectBottom a"), this); d3.select(".comptimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".comptimelabelbottom").html("All tweets from "+timeFrames[key]+' '); comptimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_mutualHapps.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_mutualHapps.csv").then(function(text) { comp = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); @@ -100,15 +100,15 @@ function timeDrop() { function loadCsv() { var csvLoadsRemaining = 3; - d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_mutualHapps.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_mutualHapps.csv").then(function(text) { ref = text.split("\n").slice(0,304); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_mutualHapps.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_mutualHapps.csv").then(function(text) { comp = text.split("\n").slice(0,304);; if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/cities/mutualCities.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/mutualCities.csv").then(function(text) { cities = text.split("\n").slice(0,304);; if (!--csvLoadsRemaining) initializePlotPlot(); }); @@ -153,12 +153,12 @@ function initializePlotPlot() { var refF; var compF; if ( refshifttimedecoder().cached.length > 0) { - d3.text(reffile,function(text) { + d3.text(reffile).then(function(text) { refF = text.split(","); console.log(refF); if (!--popupshiftct) drawShift(); }); - d3.text(compfile,function(text) { + d3.text(compfile).then(function(text) { compF = text.split(","); console.log(compF); if (!--popupshiftct) drawShift(); @@ -168,7 +168,7 @@ function initializePlotPlot() { // set some data var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); console.log("loaded words"); //console.log(tmp[tmp.length-1]); @@ -182,7 +182,7 @@ function initializePlotPlot() { hedotools.shifter._lens(lens); if (!--popupshiftct) drawShift(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); var words = tmp; var len = words.length - 1; diff --git a/hedonometer/static/hedonometer/js/city-sankey-on-load.js b/hedonometer/static/hedonometer/js/city-sankey-on-load.js index e6f6205d..05343033 100644 --- a/hedonometer/static/hedonometer/js/city-sankey-on-load.js +++ b/hedonometer/static/hedonometer/js/city-sankey-on-load.js @@ -1,4 +1,4 @@ -hedotools.sankeyoncall = function() { +hedotools.sankeyoncall = function() { var test = function(i,data) { console.log("set on call"); } @@ -51,47 +51,47 @@ function initializePlot() { function timeDrop() { d3.select("#refSelect").selectAll("a") - .on("click", function(d,i) { - key = i; + .on("click", function(event, d) { + key = Array.prototype.indexOf.call(document.querySelectorAll("#refSelect a"), this); d3.select(".reftimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".reftimelabelbottom").html("All tweets from "+timeFrames[key]+' '); reftimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_top100Happs.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_top100Happs.csv").then(function(text) { ref = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); }); d3.select("#compSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // key = this.selectedIndex; - key = i; + key = Array.prototype.indexOf.call(document.querySelectorAll("#compSelect a"), this); d3.select(".comptimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".comptimelabelbottom").html("All tweets from "+timeFrames[key]+' '); comptimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_top100Happs.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_top100Happs.csv").then(function(text) { comp = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); }); d3.select("#refSelectBottom").selectAll("a") - .on("click", function(d,i) { - key = i; + .on("click", function(event, d) { + key = Array.prototype.indexOf.call(document.querySelectorAll("#refSelectBottom a"), this); d3.select(".reftimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".reftimelabelbottom").html("All tweets from "+timeFrames[key]+' '); reftimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_top100Happs.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_top100Happs.csv").then(function(text) { ref = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); }); d3.select("#compSelectBottom").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // key = this.selectedIndex; - key = i; + key = Array.prototype.indexOf.call(document.querySelectorAll("#compSelectBottom a"), this); d3.select(".comptimelabel").html("All tweets from "+timeFrames[key]+' '); d3.select(".comptimelabelbottom").html("All tweets from "+timeFrames[key]+' '); comptimeselencoder.varval(timeFrames[key]); - d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_top100Happs.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_top100Happs.csv").then(function(text) { comp = text.split("\n").slice(0,304); hedotools.sankey.setdata(ref,comp,cities).replot(); }); @@ -100,15 +100,15 @@ function timeDrop() { function loadCsv() { var csvLoadsRemaining = 3; - d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_top100Happs.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(reftimeseldecoder().cached)+"_top100Happs.csv").then(function(text) { ref = text.split("\n").slice(0,304); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_top100Happs.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/cityList_"+(comptimeseldecoder().cached)+"_top100Happs.csv").then(function(text) { comp = text.split("\n").slice(0,304);; if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/cities/mutualCities.csv", function(text) { + d3.text("https://hedonometer.org/data/cities/mutualCities.csv").then(function(text) { cities = text.split("\n").slice(0,304);; if (!--csvLoadsRemaining) initializePlotPlot(); }); @@ -153,12 +153,12 @@ function initializePlotPlot() { var refF; var compF; if ( refshifttimedecoder().cached.length > 0) { - d3.text(reffile,function(text) { + d3.text(reffile).then(function(text) { refF = text.split(","); console.log(refF); if (!--popupshiftct) drawShift(); }); - d3.text(compfile,function(text) { + d3.text(compfile).then(function(text) { compF = text.split(","); console.log(compF); if (!--popupshiftct) drawShift(); @@ -168,7 +168,7 @@ function initializePlotPlot() { // set some data var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); console.log("loaded words"); //console.log(tmp[tmp.length-1]); @@ -182,7 +182,7 @@ function initializePlotPlot() { hedotools.shifter._lens(lens); if (!--popupshiftct) drawShift(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); var words = tmp; var len = words.length - 1; diff --git a/hedonometer/static/hedonometer/js/drawBookTimeseries-harry.js b/hedonometer/static/hedonometer/js/drawBookTimeseries-harry.js index 4aba73b8..3ced8258 100644 --- a/hedonometer/static/hedonometer/js/drawBookTimeseries-harry.js +++ b/hedonometer/static/hedonometer/js/drawBookTimeseries-harry.js @@ -6,7 +6,7 @@ hedotools.booktimeseries = function() { -cut out stops words (0 the frequencies) -call shift on these frequency vectors */ - // some colors + // some colors // #1193c0 #759ae8 var margin = {top: 0, right: 0, bottom: 0, left: 0}; @@ -46,11 +46,11 @@ hedotools.booktimeseries = function() { // var fulltimeseries; drawRefArea = function(extent) { - var refarea = d3.svg.area() + var refarea = d3.area() .x(function(d,i) { return x(extent[0]+i); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); - + axes.selectAll(".refarea").remove(); console.log(extent); @@ -63,11 +63,11 @@ hedotools.booktimeseries = function() { } drawCompArea = function(extent) { - var comparea = d3.svg.area() + var comparea = d3.area() .x(function(d,i) { return x(extent[0]+i-1); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); - + axes.selectAll(".comparea").remove(); console.log(extent); @@ -83,23 +83,26 @@ hedotools.booktimeseries = function() { var drawAnnotations = function() { // draw all of the annotations - d3.json("/api/v1/annotation/?format=json&winner=1&book__title="+book,function(error,json) { + d3.json("/api/v1/annotation/?format=json&winner=1&book__title="+book).then(function(json) { // console.log(json); - var force = d3.layout.force() - .size([width,height]) - .charge(-40) - .linkStrength(1.0) - .linkDistance(20) - .chargeDistance(50) - .gravity(0.0) - .friction(0.8); + // nothing to draw (empty / missing data) -- bail before building the force sim + if (!json || !json.objects || json.objects.length === 0) { return; } + + // d3 v7: force layout is now d3.forceSimulation; friction(0.8) -> velocityDecay(1-0.8), + // charge/chargeDistance -> forceManyBody().strength().distanceMax(), link* -> forceLink(), + // gravity(0.0) -> omit forceCenter. nodes/links are attached below once built. + var force = d3.forceSimulation() + .velocityDecay(1-0.8) + .force("charge", d3.forceManyBody().strength(-40).distanceMax(50)) + .force("link", d3.forceLink().distance(20).strength(1.0)) + .stop(); // .linkDistance(1); // build a list of x,y for the bubbles var annotationnodes = Array(json.objects.length); var annotationlinks = Array(json.objects.length); - + for (var i=0; i // // - }); + }).catch(function(error) { console.log(error); }); } var highlightExtrema = function() { @@ -426,9 +418,9 @@ hedotools.booktimeseries = function() { .attr("cx",function(d,i) { return x(d);}) .attr("cy",function(d,i) { return y(data[d]);}) .attr("fill","#1193c0") - .attr("class","mincircle") + .attr("class","mincircle") .attr("r",4) - .on("click",function(d,i) { + .on("click",function(event,d) { console.log("click on min element number"); console.log(d); // remove them all @@ -453,9 +445,9 @@ hedotools.booktimeseries = function() { .attr("cx",function(d,i) { return x(d);}) .attr("cy",function(d,i) { return y(data[d]);}) .attr("fill","red") - .attr("class","maxcircle blink") + .attr("class","maxcircle blink") .attr("r",4) - .on("click",function(d,i) { + .on("click",function(event,d) { console.log("click on max element number"); console.log(d); // remove them all @@ -482,23 +474,18 @@ hedotools.booktimeseries = function() { var hovergroup; var hidehover = function() { - hovergroup.style({ - "visibility": "hidden", - }); + hovergroup.style("visibility", "hidden"); } var plot = function() { - hovergroup = figure.append("div").attr({ - "class": "hoverinfogroup", - // "transform": "translate("+(x+hoverboxxoffset+axeslabelmargin.left)+","+(d3.min([d3.max([0,y-hoverboxheight/2-hoverboxyoffset]),height-hoverboxheight]))+")", - }) - .style({ - "position": "absolute", - "top": "100px", - "left": "100px", - "visibility": "hidden", - }); + hovergroup = figure.append("div") + .attr("class", "hoverinfogroup") + // "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"); // remove an old figure if it exists @@ -513,21 +500,21 @@ hedotools.booktimeseries = function() { //console.log(data.length); // create the x and y axis - x = d3.scale.linear() + x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) // map from the start of the timeseries point to the max .domain([0,data.length-1]) .range([0,width]); - + // use d3.layout http://bl.ocks.org/mbostock/3048450 // data = d3.layout.histogram() // .bins(x.ticks(65)) // (lens); // linear scale function - y = d3.scale.linear() + y = d3.scaleLinear() .domain([d3.min(data),d3.max(data)]) - .range([height-50, 50]); + .range([height-50, 50]); // console.log([d3.min(data),d3.max(data)]) @@ -544,27 +531,24 @@ hedotools.booktimeseries = function() { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(5) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(5); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -586,11 +570,11 @@ hedotools.booktimeseries = function() { // axes = axes.append("g") // .attr("clip-path","url(#clip)"); - line = d3.svg.line() + line = d3.line() .x(function(d,i) { return x(i+minWindows/2); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); console.log(data.slice(minWindows/2,data.length-minWindows/2)); mainline = axes.append("path") @@ -601,11 +585,11 @@ hedotools.booktimeseries = function() { .attr("stroke-width",3) .attr("fill","none"); - beglineline = d3.svg.line() + beglineline = d3.line() .x(function(d,i) { return x(i); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); console.log(data.slice(0,minWindows/2+1)); begline = axes.append("path") @@ -617,11 +601,11 @@ hedotools.booktimeseries = function() { .attr("stroke-width",3) .attr("fill","none"); - endlineline = d3.svg.line() + endlineline = d3.line() .x(function(d,i) { return x(i+data.length-minWindows/2-1); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); // endtimeseries.unshift(data[data.length-1]); @@ -635,7 +619,7 @@ hedotools.booktimeseries = function() { .attr("stroke-width",3) .attr("fill","none"); - area = d3.svg.area() + area = d3.area() .x(function(d,i) { return x(i+minWindows/2); }) .y0(height-1) .y1(function(d) { return y(d); }); @@ -657,14 +641,14 @@ hedotools.booktimeseries = function() { // console.log(d3.mean(data)); var avhapps = d3.mean(data.slice(minWindows/2,data.length-minWindows/2)); - var linearline = d3.svg.line() + var linearline = d3.line() .x(function(d,i) { return x(d.index); }) .y(function(d) { return y(d.value); }) - .interpolate("linear"); + .curve(d3.curveLinear); var averageline = axes.append("path") .datum([ - { "index": 0, + { "index": 0, "value": avhapps, }, { "index": data.length-1, "value": avhapps, }] @@ -677,20 +661,18 @@ hedotools.booktimeseries = function() { .attr("fill","none"); var averagetext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Average"); var averagetext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(avhapps.toFixed(2)); // console.log(d3.min(data)); @@ -717,9 +699,9 @@ hedotools.booktimeseries = function() { var minline = axes.append("path") .datum([ - { "index": minhappsindex+minWindows/2, + { "index": minhappsindex+minWindows/2, "value": minhapps, }, - { "index": data.length-1, + { "index": data.length-1, "value": minhapps, }] ) .attr("class", "line") @@ -729,20 +711,18 @@ hedotools.booktimeseries = function() { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Least Happy"); var mintext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(minhapps.toFixed(2)); var maxcircle = axes.append("circle") @@ -755,9 +735,9 @@ hedotools.booktimeseries = function() { var maxline = axes.append("path") .datum([ - { "index": maxhappsindex+minWindows/2, + { "index": maxhappsindex+minWindows/2, "value": maxhapps, }, - { "index": data.length-1, + { "index": data.length-1, "value": maxhapps, }] ) .attr("class", "line") @@ -767,34 +747,31 @@ hedotools.booktimeseries = function() { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps), - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Happiest"); var maxtext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps)+15, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)+15) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(maxhapps.toFixed(2)); // d3.select(window).on("resize.booktimeseries",resize); trademark = axes.append("text") - .attr({ "x": 3, - "y": height-7, - "fill": "#606060", - // "font-weight": "bold", - "font-size": ".8em", - "text-anchor": "start", - }) + .attr("x", 3) + .attr("y", height-7) + .attr("fill", "#606060") + // .attr("font-weight", "bold") + .attr("font-size", ".8em") + .attr("text-anchor", "start") .text("visualization by @hedonometer team and @andyreagan"); - + function resize() { figwidth = parseInt(d3.select('#chapters03').style('width')) - margin.left - margin.right, width = .775*figwidth; @@ -822,8 +799,3 @@ hedotools.booktimeseries = function() { return opublic; }(); - - - - - diff --git a/hedonometer/static/hedonometer/js/drawBookTimeseries.js b/hedonometer/static/hedonometer/js/drawBookTimeseries.js index 2a7b5502..147c2444 100644 --- a/hedonometer/static/hedonometer/js/drawBookTimeseries.js +++ b/hedonometer/static/hedonometer/js/drawBookTimeseries.js @@ -34,7 +34,7 @@ function drawBookTimeseries(figure,data) { //console.log(data.length); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) // map from the start of the timeseries point to the max .domain([-minWindows/2,data.length+minWindows/2-1]) @@ -46,7 +46,7 @@ function drawBookTimeseries(figure,data) { // (lens); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([d3.min(data),d3.max(data)]) .range([height-10, 10]); @@ -65,27 +65,24 @@ function drawBookTimeseries(figure,data) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(5) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(5); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -107,11 +104,11 @@ function drawBookTimeseries(figure,data) { // axes = axes.append("g") // .attr("clip-path","url(#clip)"); - var line = d3.svg.line() + var line = d3.line() .x(function(d,i) { return x(i); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); var mainline = axes.append("path") .datum(data) @@ -121,11 +118,11 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var beglineline = d3.svg.line() + var beglineline = d3.line() .x(function(d,i) { return x(i-minWindows/2); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); begtimeseries.push(data[0]); @@ -138,11 +135,11 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var endlineline = d3.svg.line() + var endlineline = d3.line() .x(function(d,i) { return x(i+data.length-1); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); endtimeseries.unshift(data[data.length-1]); @@ -155,7 +152,7 @@ function drawBookTimeseries(figure,data) { .attr("stroke-width",3) .attr("fill","none"); - var area = d3.svg.area() + var area = d3.area() .x(function(d,i) { return x(i); }) .y0(height-1) .y1(function(d) { return y(d); }); @@ -170,7 +167,7 @@ function drawBookTimeseries(figure,data) { drawRefArea = function drawRefArea(extent) { - var refarea = d3.svg.area() + var refarea = d3.area() .x(function(d,i) { return x(extent[0]+i-minWindows/2); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -191,7 +188,7 @@ function drawBookTimeseries(figure,data) { drawCompArea = function drawCompArea(extent) { - var comparea = d3.svg.area() + var comparea = d3.area() .x(function(d,i) { return x(extent[0]+i-minWindows/2-1); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -213,10 +210,10 @@ function drawBookTimeseries(figure,data) { // console.log(d3.mean(data)); var avhapps = d3.mean(data); - var linearline = d3.svg.line() + var linearline = d3.line() .x(function(d,i) { if (i===0) { return x(d.index); } else { return x(d.index)+3 } }) .y(function(d) { return y(d.value); }) - .interpolate("linear"); + .curve(d3.curveLinear); var averageline = axes.append("path") .datum([ @@ -233,20 +230,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var averagetext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Average"); var averagetext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(avhapps.toFixed(2)); // console.log(d3.min(data)); @@ -285,20 +280,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Least Happy"); var mintext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(minhapps.toFixed(2)); var maxcircle = axes.append("circle") @@ -323,20 +316,18 @@ function drawBookTimeseries(figure,data) { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps), - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Happiest"); var maxtext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps)+15, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)+15) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(maxhapps.toFixed(2)); d3.select(window).on("resize.booktimeseries",resize); diff --git a/hedonometer/static/hedonometer/js/drawLens-chapters.js b/hedonometer/static/hedonometer/js/drawLens-chapters.js index 112b46b3..9fc5e556 100644 --- a/hedonometer/static/hedonometer/js/drawLens-chapters.js +++ b/hedonometer/static/hedonometer/js/drawLens-chapters.js @@ -24,20 +24,22 @@ // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([1.00,9.00]) .range([0,width]); - // use d3.layout http://bl.ocks.org/mbostock/3048450 - var data = d3.layout.histogram() - .bins(x.ticks(65)) + // use d3.bin (v7 replacement for d3.layout.histogram); bins are arrays with + // .x0/.x1 (edges) and .length (count) instead of v3's .x/.dx/.y + var data = d3.bin() + .domain(x.domain()) + .thresholds(x.ticks(65)) (lens); // linear scale function - var y = d3.scale.linear() - .domain([0,d3.max(data,function(d) { return d.y; } )]) - .range([height, 0]); + var y = d3.scaleLinear() + .domain([0,d3.max(data,function(d) { return d.length; } )]) + .range([height, 0]); // create the axes themselves var axes = canvas.append("g") @@ -52,27 +54,24 @@ .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FFFFF0"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -81,8 +80,8 @@ .call(yAxis); var xAxis = create_xAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "x axis ") @@ -90,7 +89,7 @@ .attr("transform", "translate(0," + (height) + ")") .call(xAxis); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // create the clip boundary var clip = axes.append("svg:clipPath") @@ -131,18 +130,18 @@ .enter() .append("g") .attr("class","distrect") - .attr("fill",function(d,i) { if (d.x > lensMean) {return "#D3D3D3";} else { return "#D3D3D3";}}) - .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); + .attr("fill",function(d,i) { if (d.x0 > lensMean) {return "#D3D3D3";} else { return "#D3D3D3";}}) + .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); var mainrect = bar.append("rect") .attr("x", 1) - .attr("width", x(data[0].dx+1)-2 ) - .attr("height", function(d) { return height - y(d.y); }); + .attr("width", x(data[0].x1-data[0].x0+1)-2 ) + .attr("height", function(d) { return height - y(d.length); }); - var line = d3.svg.line() - .x(function(d,i) { return x(d.x); }) - .y(function(d) { return y(d.y); }) - .interpolate("linear"); + var line = d3.line() + .x(function(d,i) { return x(d.x0); }) + .y(function(d) { return y(d.length); }) + .curve(d3.curveLinear); var mainline = axes.append("path") .datum(data) @@ -154,34 +153,28 @@ //console.log(x(d3.min(lens))); - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([1,9]) .range([figwidth*.125,width+figwidth*.125]); - var brush = d3.svg.brush() - .x(brushX) - .extent(lensExtent) - .on("brushend",brushended); + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[figwidth*.125, 15], [width+figwidth*.125, height+15]]) + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","lensbrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height) - .attr("y",15) - .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.95}) - .attr("fill", "#FCFCFC"); + .call(brush); + gBrush.call(brush.move, lensExtent.map(brushX)); //console.log(lensExtent); lensencoder = d3.urllib.encoder().varname("lens"); //.varval(lensExtent); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0; + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert); // round to nearest tenth (set 4 to 10) // round to nearest quarter @@ -208,8 +201,7 @@ } d3.select(this).transition() - .call(brush.extent(lensExtent)) - .call(brush.event); + .call(brush.move, lensExtent.map(brushX)); lensencoder.varval(lensExtent); } @@ -233,20 +225,19 @@ //xAxisHandle.call(xAxis); canvas.select(".x.axis").call(xAxis); - canvas.selectAll(".distrect").attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }); + canvas.selectAll(".distrect").attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); // xlabel.attr("x",(leftOffsetStatic+width/2)); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".lensbrush") //.transition() - .call(brush.extent(lensExtent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 15], [leftOffsetStatic+width, height+15]]); + d3.select(".lensbrush") + .call(brush) + .call(brush.move, lensExtent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/drawMovieTimeseries.js b/hedonometer/static/hedonometer/js/drawMovieTimeseries.js index 0c69d2d6..1de836c1 100644 --- a/hedonometer/static/hedonometer/js/drawMovieTimeseries.js +++ b/hedonometer/static/hedonometer/js/drawMovieTimeseries.js @@ -47,7 +47,7 @@ hedotools.booktimeseries = function() { // var fulltimeseries; drawRefArea = function(extent) { - var refarea = d3.svg.area() + var refarea = d3.area() .x(function(d,i) { return x(extent[0]+i); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -64,7 +64,7 @@ hedotools.booktimeseries = function() { } drawCompArea = function(extent) { - var comparea = d3.svg.area() + var comparea = d3.area() .x(function(d,i) { return x(extent[0]+i); }) .y0(height-1) .y1(function(d) { return y(d)+2; }); @@ -138,7 +138,7 @@ hedotools.booktimeseries = function() { if (show) { var moviefile = "https://hedonometer.org/data/moviedata/raw/"+movieref+".txt"; var pheight; - d3.text(moviefile, function (text) { + d3.text(moviefile).then(function (text) { // globaltext = text; words = text.match(/[\w\@\#\'\&\]\*\-\/\[\=\;]+/gi); // globalwords = words; @@ -156,7 +156,7 @@ hedotools.booktimeseries = function() { var fheight; var moviefile2 = "https://hedonometer.org/data/moviedata/rawer/"+movieref+".html.clean01"; - d3.text(moviefile2, function (text) { + d3.text(moviefile2).then(function (text) { // use this to test the total words in this different file // lwords = text.match(/[\w\@\#\'\&\]\*\-\/\[\=\;]+/gi); // globalwords2 = lwords; @@ -186,7 +186,7 @@ hedotools.booktimeseries = function() { // globalwords3 = kwords; var breakfile = "https://hedonometer.org/data/moviedata/word-vectors/"+windowDecoder().cached+"/"+movieref+"-breaks.csv"; - d3.text(breakfile, function (breaks) { + d3.text(breakfile).then(function (breaks) { // console.log("loaded movie full uncleaned text"); // console.log(breaks); dabreaks = breaks.split(",").map(parseFloat); @@ -209,19 +209,18 @@ hedotools.booktimeseries = function() { // console.log("showing line") canvas.append("line") - .attr({ - "class": "hoverline", - "x1": 0, - "y1": 0, - "x2": 0, - "y2": 0, - "stroke": "#A8A8A8", - "stroke-width": "1.5px", }); + .attr("class", "hoverline") + .attr("x1", 0) + .attr("y1", 0) + .attr("x2", 0) + .attr("y2", 0) + .attr("stroke", "#A8A8A8") + .attr("stroke-width", "1.5px"); // console.log(width); // console.log(data.length); - canvas.on("mousemove",function() { - var m = d3.mouse(this); + canvas.on("mousemove",function(event) { + var m = d3.pointer(event, this); // console.log(m); // console.log(y(m[1]/width*data.length)); // data.length @@ -264,7 +263,7 @@ hedotools.booktimeseries = function() { // console.log(perc); // console.log(point); // console.log("/api/v1/movieannotation/?format=json&position="+perc+"&movie__title="+movie); - d3.json("/api/v1/movieannotation/?format=json&position="+perc+"&movie__title="+movie,function(error,json) { + d3.json("/api/v1/movieannotation/?format=json&position="+perc+"&movie__title="+movie).then(function(json) { console.log(json); globaljson = json.objects; @@ -336,9 +335,9 @@ hedotools.booktimeseries = function() { .attr("cx",function(d,i) { return x(d);}) .attr("cy",function(d,i) { return y(data[d]);}) .attr("fill","#1193c0") - .attr("class","mincircle") + .attr("class","mincircle") .attr("r",6) - .on("click",function(d,i) { + .on("click",function(event,d) { // console.log("click on min element number"); // console.log(d); // remove them all @@ -363,9 +362,9 @@ hedotools.booktimeseries = function() { .attr("cx",function(d,i) { return x(d);}) .attr("cy",function(d,i) { return y(data[d]);}) .attr("fill","red") - .attr("class","maxcircle blink") + .attr("class","maxcircle blink") .attr("r",6) - .on("click",function(d,i) { + .on("click",function(event,d) { // console.log("click on max element number"); // console.log(d); // remove them all @@ -392,23 +391,17 @@ hedotools.booktimeseries = function() { var hovergroup; var hidehover = function() { - hovergroup.style({ - "visibility": "hidden", - }); + hovergroup.style("visibility", "hidden"); } var plot = function() { - hovergroup = figure.append("div").attr({ - "class": "hoverinfogroup", - // "transform": "translate("+(x+hoverboxxoffset+margin.left)+","+(d3.min([d3.max([0,y-hoverboxheight/2-hoverboxyoffset]),height-hoverboxheight]))+")", - }) - .style({ - "position": "absolute", - "top": "100px", - "left": "100px", - "visibility": "hidden", - }); + hovergroup = figure.append("div") + .attr("class", "hoverinfogroup") + .style("position", "absolute") + .style("top", "100px") + .style("left", "100px") + .style("visibility", "hidden"); // remove an old figure if it exists @@ -423,21 +416,21 @@ hedotools.booktimeseries = function() { //console.log(data.length); // create the x and y axis - x = d3.scale.linear() + x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) // map from the start of the timeseries point to the max .domain([0,data.length-1]) .range([0,width]); - + // use d3.layout http://bl.ocks.org/mbostock/3048450 // data = d3.layout.histogram() // .bins(x.ticks(65)) // (lens); // linear scale function - y = d3.scale.linear() + y = d3.scaleLinear() .domain([d3.min(data),d3.max(data)]) - .range([height-50, 50]); + .range([height-50, 50]); // console.log([d3.min(data),d3.max(data)]) @@ -454,27 +447,24 @@ hedotools.booktimeseries = function() { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(5) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(5); } // draw the axes var yAxis = create_yAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); axes.append("g") .attr("class", "top") @@ -496,11 +486,11 @@ hedotools.booktimeseries = function() { // axes = axes.append("g") // .attr("clip-path","url(#clip)"); - line = d3.svg.line() + line = d3.line() .x(function(d,i) { return x(i+minWindows/2); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); // console.log(data.slice(minWindows/2,data.length-minWindows/2)); mainline = axes.append("path") @@ -511,11 +501,11 @@ hedotools.booktimeseries = function() { .attr("stroke-width",3) .attr("fill","none"); - beglineline = d3.svg.line() + beglineline = d3.line() .x(function(d,i) { return x(i); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); // console.log(data.slice(0,minWindows/2+1)); begline = axes.append("path") @@ -527,11 +517,11 @@ hedotools.booktimeseries = function() { .attr("stroke-width",3) .attr("fill","none"); - endlineline = d3.svg.line() + endlineline = d3.line() .x(function(d,i) { return x(i+data.length-minWindows/2-1); }) .y(function(d) { return y(d); }) - .interpolate("cardinal"); - // .interpolate("linear"); + .curve(d3.curveCardinal); + // .curve(d3.curveLinear); // endtimeseries.unshift(data[data.length-1]); @@ -545,7 +535,7 @@ hedotools.booktimeseries = function() { .attr("stroke-width",3) .attr("fill","none"); - area = d3.svg.area() + area = d3.area() .x(function(d,i) { return x(i+minWindows/2); }) .y0(height-1) .y1(function(d) { return y(d); }); @@ -567,10 +557,10 @@ hedotools.booktimeseries = function() { // console.log(d3.mean(data)); var avhapps = d3.mean(data.slice(minWindows/2,data.length-minWindows/2)); - var linearline = d3.svg.line() + var linearline = d3.line() .x(function(d,i) { return x(d.index); }) .y(function(d) { return y(d.value); }) - .interpolate("linear"); + .curve(d3.curveLinear); var averageline = axes.append("path") .datum([ @@ -587,20 +577,18 @@ hedotools.booktimeseries = function() { .attr("fill","none"); var averagetext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Average"); var averagetext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(avhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(avhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(avhapps.toFixed(2)); // console.log(d3.min(data)); @@ -639,20 +627,18 @@ hedotools.booktimeseries = function() { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)-3, - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)-3) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Least Happy"); var mintext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(minhapps)+12, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(minhapps)+12) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(minhapps.toFixed(2)); var maxcircle = axes.append("circle") @@ -677,32 +663,29 @@ hedotools.booktimeseries = function() { .attr("fill","none"); var mintext1 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps), - "fill": "#606060", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)) + .attr("fill", "#606060") + .attr("text-anchor", "start") .text("Happiest"); var maxtext2 = axes.append("text") - .attr({ "x": width+5, - "y": y(maxhapps)+15, - "fill": "#606060", - "font-weight": "bold", - "text-anchor": "start", - }) + .attr("x", width+5) + .attr("y", y(maxhapps)+15) + .attr("fill", "#606060") + .attr("font-weight", "bold") + .attr("text-anchor", "start") .text(maxhapps.toFixed(2)); // d3.select(window).on("resize.booktimeseries",resize); trademark = axes.append("text") - .attr({ "x": 3, - "y": height-7, - "fill": "#606060", - // "font-weight": "bold", - "font-size": ".8em", - "text-anchor": "start", - }) + .attr("x", 3) + .attr("y", height-7) + .attr("fill", "#606060") + // .attr("font-weight", "bold") + .attr("font-size", ".8em") + .attr("text-anchor", "start") .text("visualization by @hedonometer team and @andyreagan"); function resize() { diff --git a/hedonometer/static/hedonometer/js/embed-on-load.js b/hedonometer/static/hedonometer/js/embed-on-load.js index 4f0b592b..ff9920e6 100644 --- a/hedonometer/static/hedonometer/js/embed-on-load.js +++ b/hedonometer/static/hedonometer/js/embed-on-load.js @@ -22,7 +22,7 @@ hedotools.loader = function() { var refFvec; var compFvec; var load = function() { - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -35,7 +35,7 @@ hedotools.loader = function() { } if (!--csvLoadsRemaining) onload(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -46,7 +46,7 @@ hedotools.loader = function() { } if (!--csvLoadsRemaining) onload(); }); - d3.text(embedDetails.compFile,function(tmp) { + d3.text(embedDetails.compFile).then(function(tmp) { if (tmp.split(',').length > 100) { compFvec = tmp.split(',').slice(0,10222); } @@ -55,7 +55,7 @@ hedotools.loader = function() { } if (!--csvLoadsRemaining) onload(); }); - d3.text(embedDetails.refFile,function(tmp2) { + d3.text(embedDetails.refFile).then(function(tmp2) { if (tmp2.split(',').length > 100) { refFvec = tmp2.split(',').slice(0,10222); } diff --git a/hedonometer/static/hedonometer/js/hedotools.nonsankey.js b/hedonometer/static/hedonometer/js/hedotools.nonsankey.js index 935632ab..2bdfabb0 100644 --- a/hedonometer/static/hedonometer/js/hedotools.nonsankey.js +++ b/hedonometer/static/hedonometer/js/hedotools.nonsankey.js @@ -129,22 +129,16 @@ hedotools.sankey = function() { figcenter = width/2; leftOffsetStatic = axeslabelmargin.left; - var hovergroup = figure.append("div").attr({ - "class": "hoverinfogroup", - // "transform": "translate("+(x+hoverboxxoffset+axeslabelmargin.left)+","+(d3.min([d3.max([0,y-hoverboxheight/2-hoverboxyoffset]),height-hoverboxheight]))+")", - }) - .style({ - "position": "absolute", - "top": "100px", - "left": "100px", - "visibility": "hidden", - }); + 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", - }); + hovergroup.style("visibility", "hidden"); } // remove an old figure if it exists @@ -155,15 +149,15 @@ hedotools.sankey = function() { .attr("height",figheight) .attr("class","canvas") - // x scale, maps all the data to - x = d3.scale.linear() + // x scale, maps all the data to + x = d3.scaleLinear() .domain([0,1]) .range([5,width-10]); // linear scale function - y = d3.scale.linear() + y = d3.scaleLinear() .domain([newlist.length,1]) - .range([height-20, 0]); + .range([height-20, 0]); // create the axes themselves axes = canvas.append("g") @@ -188,27 +182,26 @@ hedotools.sankey = function() { .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(d,i) { + .on("mouseover", function(event, d) { + var i = d.index; var hoverboxheight = 90; var hoverboxwidth = 200; var hoverboxyoffset = 0; var hoverboxxoffset = 0; - var x = d3.mouse(this)[0]; - var y = d3.mouse(this)[1]; - + 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", - "top": y+"px", - "left": x+"px", - "visibility": "visible", - }); + hovergroup.style("position", "absolute") + .style("top", y+"px") + .style("left", x+"px") + .style("visibility", "visible"); hovergroup.selectAll("p,h3,button,br").remove(); @@ -256,12 +249,12 @@ hedotools.sankey = function() { console.log(compfile); var refF; var compF; - d3.text(reffile,function(text) { + d3.text(reffile).then(function(text) { refF = text.split(","); console.log(refF); if (!--csvLoadsRemaining) drawShift(); }); - d3.text(compfile,function(text) { + d3.text(compfile).then(function(text) { compF = text.split(","); console.log(compF); if (!--csvLoadsRemaining) drawShift(); @@ -341,7 +334,7 @@ hedotools.sankey = function() { popuptimer = setTimeout(hidehover,3000); }) - .on("mouseout", function(d,i) { + .on("mouseout", function(event, d) { clearTimeout(popuptimer); popuptimer = setTimeout(hidehover,3000); @@ -356,27 +349,26 @@ hedotools.sankey = function() { .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(d,i) { + .on("mouseover", function(event, d) { + var i = d.index; var hoverboxheight = 90; var hoverboxwidth = 200; var hoverboxyoffset = 0; var hoverboxxoffset = 0; - var x = d3.mouse(this)[0]; - var y = d3.mouse(this)[1]; + 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", - "top": y+"px", - "left": x+"px", - "visibility": "visible", - }); + + hovergroup.style("position", "absolute") + .style("top", y+"px") + .style("left", x+"px") + .style("visibility", "visible"); hovergroup.selectAll("p,h3,button,br").remove(); @@ -424,12 +416,12 @@ hedotools.sankey = function() { console.log(compfile); var refF; var compF; - d3.text(reffile,function(text) { + d3.text(reffile).then(function(text) { refF = text.split(","); console.log(refF); if (!--csvLoadsRemaining) drawShift(); }); - d3.text(compfile,function(text) { + d3.text(compfile).then(function(text) { compF = text.split(","); console.log(compF); if (!--csvLoadsRemaining) drawShift(); @@ -509,7 +501,7 @@ hedotools.sankey = function() { popuptimer = setTimeout(hidehover,3000); }) - .on("mouseout", function(d,i) { + .on("mouseout", function(event, d) { clearTimeout(popuptimer); popuptimer = setTimeout(hidehover,3000); diff --git a/hedonometer/static/hedonometer/js/maps-on-load.js b/hedonometer/static/hedonometer/js/maps-on-load.js index 24736095..438df2da 100644 --- a/hedonometer/static/hedonometer/js/maps-on-load.js +++ b/hedonometer/static/hedonometer/js/maps-on-load.js @@ -35,7 +35,7 @@ var stateSelType = true; var activeHover = true; // until a selection is fixed, let this be true -d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(d,i) { +d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(event, d) { var i = d ? 1 : 0; if (stateSelType !== d) { stateSelType = d; activeHover = true; @@ -130,7 +130,7 @@ timeFrameText = ["2013","2012","2011"]; function refcompdrops() { d3.select("#compSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // console.log(i); d3.selectAll(".state").attr("stroke-width",0.7); activeHover = true; @@ -152,7 +152,7 @@ function refcompdrops() { }); d3.select("#refSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // console.log(i); d3.selectAll(".state").attr("stroke-width",0.7); activeHover = true; @@ -174,7 +174,7 @@ function refcompdrops() { }); d3.select("#rotate") - .on("click", function(d,i) { + .on("click", function(event, d) { // console.log(i); d3.selectAll(".state").attr("stroke-width",0.7); activeHover = true; @@ -197,9 +197,9 @@ function refcompdrops() { function timeDrop() { d3.select("#timeSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // key = this.selectedIndex; - key = i; + key = Array.prototype.indexOf.call(document.querySelectorAll("#timeSelect a"), this); timeName = timeFrames[key]; d3.select(".timelabel").text(timeFrameText[key]); timeselencoder.varval(timeFrameText[key]); @@ -215,12 +215,12 @@ function loadCsv(time) { console.log("loading year words and scores"); var scoresFile = "https://hedonometer.org/data/geodata/wordScores.csv"; var wordsFile = "https://hedonometer.org/data/geodata/words.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split(","); lens = tmp.map(parseFloat); if (!--csvLoadsRemaining) initializePlotPlot(lens,words); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split(","); words = tmp; if (!--csvLoadsRemaining) initializePlotPlot(lens,words); @@ -230,7 +230,7 @@ function loadCsv(time) { // load labMT files var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -243,7 +243,7 @@ function loadCsv(time) { } if (!--csvLoadsRemaining) initializePlotPlot(lens,words); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -255,13 +255,13 @@ function loadCsv(time) { if (!--csvLoadsRemaining) initializePlotPlot(lens,words); }); } - d3.json("https://hedonometer.org/data/geodata/us-states.topojson", function(data) { + d3.json("https://hedonometer.org/data/geodata/us-states.topojson").then(function(data) { geoJson = data; stateFeatures = topojson.feature(geoJson,geoJson.objects.states).features; if (!--csvLoadsRemaining) initializePlotPlot(lens,words); }); // trying to load from a new format for the more recent tweets - d3.text("https://hedonometer.org/data/geodata/wordCounts"+(time)+".csv", function(text) { + d3.text("https://hedonometer.org/data/geodata/wordCounts"+(time)+".csv").then(function(text) { // var time = "2014-08-25-week" // d3.text("https://hedonometer.org/data/geodata/combined-word-vectors/"+(time)+".csv", function(text) { tmp = text.split("\n"); diff --git a/hedonometer/static/hedonometer/js/movie-rankedlist-on-load.js b/hedonometer/static/hedonometer/js/movie-rankedlist-on-load.js index 2979ba06..4fdf28b5 100644 --- a/hedonometer/static/hedonometer/js/movie-rankedlist-on-load.js +++ b/hedonometer/static/hedonometer/js/movie-rankedlist-on-load.js @@ -93,26 +93,25 @@ function sectionIndex(name) { var refcompdrops = function() { d3.select("#compSelect").selectAll("a") - .on("click", function(d,i) { - shiftComp = sectionIndex(sectionListWAllFirst[i].title); - d3.select(".complabel").text(sectionListWAllFirst[i].title); - compencoder.varval(sectionListWAllFirst[i].title); + .on("click", function(event, d) { + shiftComp = sectionIndex(d.title); + d3.select(".complabel").text(d.title); + compencoder.varval(d.title); if (shiftRef !== shiftComp) { drawShift(); } }); d3.select("#refSelect").selectAll("a") - .on("click", function(d,i) { - // console.log(i); - shiftRef = sectionIndex(sectionListWAllFirst[i].title); - d3.select(".reflabel").text(sectionListWAllFirst[i].title); - refencoder.varval(sectionListWAllFirst[i].title); + .on("click", function(event, d) { + shiftRef = sectionIndex(d.title); + d3.select(".reflabel").text(d.title); + refencoder.varval(d.title); if (shiftRef !== shiftComp) { drawShift(); } }); d3.select("#rotate") - .on("click", function(d,i) { + .on("click", function(event) { var tmp = shiftComp; shiftComp = shiftRef; shiftRef = tmp; @@ -133,7 +132,7 @@ function loadCsv() { var allLoadsRemaining = listLoadsRemaining+shiftLoadsRemaining; var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); lens = tmp.map(parseFloat); var len = lens.length - 1; @@ -144,7 +143,7 @@ function loadCsv() { hedotools.shifter._lens(lens); if (!--allLoadsRemaining) initializeBoth(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -155,14 +154,16 @@ function loadCsv() { hedotools.shifter._words(words); if (!--allLoadsRemaining) initializeBoth(); }); - d3.json("/api/v1/moviesminimal/?format=json&length__gte=10000", function(json) { + // repointed to the absolute live API: the local dev DB has no Movie rows. + d3.json("https://hedonometer.org/api/v1/moviesminimal/?format=json&length__gte=10000").then(function(json) { sectionList = json.objects; if (!--allLoadsRemaining) initializeBoth(); }); - d3.json("/api/v1/moviesminimal/?format=json&title=all", function(json) { - allEntry = json.objects; - if (!--allLoadsRemaining) initializeBoth(); - }); + // The aggregate "all" baseline movie row no longer exists in the DB, but its + // word-vector file (full/All.csv) does. Synthesize the baseline entry; its + // happs is filled from the mean of the loaded movies in initializeList. + allEntry = [{ title: "All", filename: "All", happs: 5.89, ignorewords: "" }]; + if (!--allLoadsRemaining) initializeBoth(); }; var initializeBoth = function() { @@ -172,6 +173,8 @@ var initializeBoth = function() { var initializeList = function() { console.log("initializing list..."); + // fill the synthesized baseline happs from the mean of the loaded movies + allEntry[0].happs = d3.mean(sectionList, function(d) { return parseFloat(d.happs); }); sectionListWAllFirst = allEntry.concat(sectionList); var happslist = sectionList.map(function(d) { return parseFloat(d.happs)-parseFloat(allEntry[0].happs); }); var titlelist = sectionList.map(function(d) { return d.title; }); @@ -199,7 +202,7 @@ var ignoreWords = ["camera","cuts"]; var initializeShift = function() { hedotools.shifter.ignore(ignoreWords); hedotools.shifter.setfigure(d3.select('#shift01')); - hedotools.shifter.stoprange([3,7]); + hedotools.shifter._stoprange([3,7]); // get the indices from the url decoders shiftComp = sectionIndex(compdecoder().cached); @@ -246,12 +249,12 @@ var drawShift = function() { // I made all of this for the NYT thing? go me. // d3.select("#embedtextarea").html(""); - d3.text(refFile,function(text) { + d3.text(refFile).then(function(text) { refF = text.split(","); console.log(refF); if (!--finalLoadsRemaining) drawShiftInternal(); }); - d3.text(compFile,function(text) { + d3.text(compFile).then(function(text) { compF = text.split(","); if (!--finalLoadsRemaining) drawShiftInternal(); }); @@ -261,7 +264,7 @@ function initializePlot() { d3.select(".reflabel").text(refdecoder().cached); d3.select(".complabel").text(compdecoder().cached); - d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(d,i) { + d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(event, d) { if (selType !== d) { selType = d; d3.select(".selbutton.one").attr("class","btn btn-default btn-xs pull-right selbutton one") diff --git a/hedonometer/static/hedonometer/js/movies-on-load.js b/hedonometer/static/hedonometer/js/movies-on-load.js index d63cdd50..39c2a37f 100644 --- a/hedonometer/static/hedonometer/js/movies-on-load.js +++ b/hedonometer/static/hedonometer/js/movies-on-load.js @@ -42,7 +42,7 @@ function initializePlot() { movie = movieDecoder().cached; // console.log("not a classic"); // hit the random api - d3.json("https://hedonometer.org/api/v1/movies/?format=json&title__startswith="+movie,function(data) { + d3.json("https://hedonometer.org/api/v1/movies/?format=json&title__startswith="+movie).then(function(data) { var result = data.objects[0]; // console.log(result); lang = result.language; @@ -72,7 +72,7 @@ function initializePlot() { function loadCsv() { var csvLoadsRemaining = 4; var moviefile = "https://hedonometer.org/data/moviedata/timeseries/"+windowDecoder().cached+"/"+movieref+".csv"; - d3.text(moviefile, function (text) { + d3.text(moviefile).then(function (text) { var tmpminwin = 10; fulltimeseries = text.split(",").map(parseFloat); begtimeseries = fulltimeseries.slice(0,tmpminwin/2+1); @@ -80,7 +80,7 @@ function loadCsv() { timeseries = fulltimeseries.slice(tmpminwin/2,fulltimeseries.length-tmpminwin/2); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/moviedata/labMT/labMTscores-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/moviedata/labMT/labMTscores-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -94,7 +94,7 @@ function loadCsv() { hedotools.shifter._lens(lens); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/moviedata/labMT/labMTwords-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/moviedata/labMT/labMTwords-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); var words = tmp; var len = words.length - 1; @@ -106,7 +106,7 @@ function loadCsv() { hedotools.shifter._words(words); if (!--csvLoadsRemaining) initializePlotPlot(); }); - d3.text("https://hedonometer.org/data/moviedata/labMT/labMTwordsEn-"+lang+".csv", function (text) { + d3.text("https://hedonometer.org/data/moviedata/labMT/labMTwordsEn-"+lang+".csv").then(function (text) { var tmp = text.split("\n"); var words_en = tmp; var len = words_en.length - 1; @@ -187,7 +187,7 @@ var loadwordshiftdata = function() { var spinner = new Spinner(opts).spin(target); var moviefile = "https://hedonometer.org/data/moviedata/word-vectors/"+windowDecoder().cached+"/"+movieref+".csv"; - d3.text(moviefile, function (text) { + d3.text(moviefile).then(function (text) { tmp = text.split("\n"); // build the full data, terrible @@ -396,7 +396,7 @@ var substringMatcher = function() { return function findMatches(q,cb) { var matches, substringRegex; matches = []; - d3.json("https://hedonometer.org/api/v1/movies/?format=json&title__icontains="+q,function(data) { + d3.json("https://hedonometer.org/api/v1/movies/?format=json&title__icontains="+q).then(function(data) { var result = data.objects; var newresult = []; for (var i=0; i"); - d3.text(refFile,function(text) { + d3.text(refFile).then(function(text) { refF = text.split("\n"); console.log(refF); if (!--finalLoadsRemaining) drawShiftInternal(); }); - d3.text(compFile,function(text) { + d3.text(compFile).then(function(text) { compF = text.split("\n"); if (!--finalLoadsRemaining) drawShiftInternal(); }); @@ -250,7 +250,7 @@ function initializePlot() { d3.select(".reflabel").text(refdecoder().cached); d3.select(".complabel").text(compdecoder().cached); - d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(d,i) { + d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(event, d) { if (selType !== d) { selType = d; d3.select(".selbutton.one").attr("class","btn btn-default btn-xs pull-right selbutton one") diff --git a/hedonometer/static/hedonometer/js/outside-on-load.js b/hedonometer/static/hedonometer/js/outside-on-load.js index 24d3e640..f0eed931 100644 --- a/hedonometer/static/hedonometer/js/outside-on-load.js +++ b/hedonometer/static/hedonometer/js/outside-on-load.js @@ -103,26 +103,26 @@ function sectionIndex(name) { var refcompdrops = function() { d3.select("#compSelect").selectAll("a") - .on("click", function(d,i) { - shiftComp = sectionIndex(sectionListWAllFirst[i].title); - d3.select(".complabel").text(sectionListWAllFirst[i].title); - compencoder.varval(sectionListWAllFirst[i].title); + .on("click", function(event, d) { + shiftComp = sectionIndex(d.title); + d3.select(".complabel").text(d.title); + compencoder.varval(d.title); if (shiftRef !== shiftComp) { drawShift(); } }); d3.select("#refSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // console.log(i); - shiftRef = sectionIndex(sectionListWAllFirst[i].title); - d3.select(".reflabel").text(sectionListWAllFirst[i].title); - refencoder.varval(sectionListWAllFirst[i].title); + shiftRef = sectionIndex(d.title); + d3.select(".reflabel").text(d.title); + refencoder.varval(d.title); if (shiftRef !== shiftComp) { drawShift(); } }); d3.select("#rotate") - .on("click", function(d,i) { + .on("click", function(event) { var tmp = shiftComp; shiftComp = shiftRef; shiftRef = tmp; @@ -143,7 +143,7 @@ function loadCsv() { var allLoadsRemaining = listLoadsRemaining+shiftLoadsRemaining; var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); lens = tmp.map(parseFloat); var len = lens.length - 1; @@ -154,7 +154,7 @@ function loadCsv() { hedotools.shifter._lens(lens); if (!--allLoadsRemaining) initializeBoth(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -165,11 +165,11 @@ function loadCsv() { hedotools.shifter._words(words); if (!--allLoadsRemaining) initializeBoth(); }); - d3.json("https://hedonometer.org/data/outside/metadata.json", function(json) { + d3.json("https://hedonometer.org/data/outside/metadata.json").then(function(json) { sectionList = json; if (!--allLoadsRemaining) initializeBoth(); }); - d3.json("https://hedonometer.org/data/outside/all.json", function(json) { + d3.json("https://hedonometer.org/data/outside/all.json").then(function(json) { allEntry = json; if (!--allLoadsRemaining) initializeBoth(); }); @@ -250,12 +250,12 @@ var drawShift = function() { // d3.select("#embedtextarea").html(""); - d3.text(refFile,function(text) { + d3.text(refFile).then(function(text) { refF = text.split("\n"); console.log(refF); if (!--finalLoadsRemaining) drawShiftInternal(); }); - d3.text(compFile,function(text) { + d3.text(compFile).then(function(text) { compF = text.split("\n"); if (!--finalLoadsRemaining) drawShiftInternal(); }); @@ -267,7 +267,7 @@ function initializePlot() { d3.select(".reflabel").text(refdecoder().cached); d3.select(".complabel").text(compdecoder().cached); - d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(d,i) { + d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(event, d) { if (selType !== d) { selType = d; d3.select(".selbutton.one").attr("class","btn btn-default btn-xs pull-right selbutton one") diff --git a/hedonometer/static/hedonometer/js/sankey-on-load.js b/hedonometer/static/hedonometer/js/sankey-on-load.js index 0d7d26e6..d20cb109 100644 --- a/hedonometer/static/hedonometer/js/sankey-on-load.js +++ b/hedonometer/static/hedonometer/js/sankey-on-load.js @@ -1,5 +1,5 @@ // override the lensoncall module -hedotools.lensoncall = function() { +hedotools.lensoncall = function() { var test = function() { // reset console.log(lensExtent); @@ -80,7 +80,7 @@ var stateSelType = true; var activeHover = true; // until a selection is fixed, let this be true -d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(d,i) { +d3.selectAll(".selbutton").data([false,true]).on("mousedown",function(event, d) { var i = d ? 1 : 0; if (stateSelType !== d) { stateSelType = d; activeHover = true; @@ -170,9 +170,9 @@ timeFrameText = ["Last 90 Days","Last 30 Days","Last 7 Days"]; function timeDrop() { d3.select("#timeSelect").selectAll("a") - .on("click", function(d,i) { + .on("click", function(event, d) { // key = this.selectedIndex; - key = i; + key = Array.prototype.indexOf.call(document.querySelectorAll("#timeSelect a"), this); timeName = timeFrames[key]; d3.select(".timelabel").text(timeFrameText[key]); timeselencoder.varval(timeFrameText[key]); @@ -186,7 +186,7 @@ function loadCsv(time) { // load labMT files var scoresFile = "https://hedonometer.org/data/labMT/labMTscores-english.csv"; var wordsFile = "https://hedonometer.org/data/labMT/labMTwords-english.csv"; - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -199,7 +199,7 @@ function loadCsv(time) { } if (!--csvLoadsRemaining) initializePlotPlot(lens,words); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -210,15 +210,16 @@ function loadCsv(time) { } if (!--csvLoadsRemaining) initializePlotPlot(lens,words); }); - d3.json("https://hedonometer.org/data/geodata/us-states.topojson", function(data) { + d3.json("https://hedonometer.org/data/geodata/us-states.topojson").then(function(data) { geoJson = data; stateFeatures = topojson.feature(geoJson,geoJson.objects.states).features; if (!--csvLoadsRemaining) initializePlotPlot(lens,words); }); - // trying to load from a new format for the more recent tweets - // d3.text("https://hedonometer.org/data/geodata/wordCounts"+(time)+".csv", function(text) { - var time = "2014-08-25-week" - d3.text("https://hedonometer.org/data/geodata/combined-word-vectors/"+(time)+".csv", function(text) { + // The dated combined-word-vectors CSVs (e.g. 2014-08-25-week) are gone from the + // server (404). Repointed to the yearly state wordCounts CSVs, which exist and + // use the same 51-state comma-separated row format, so the sankey renders. + var time = "2013" + d3.text("https://hedonometer.org/data/geodata/wordCounts"+(time)+".csv").then(function(text) { tmp = text.split("\n"); allData = Array(52); for (var i=0; i<51; i++) { @@ -250,9 +251,10 @@ function initializePlotPlot(lens,words) { // randomHapps = stateHappsList.map(function(d) { return d+(Math.random()-0.5)/5; } ) - // the previous week - var time = "2014-08-18-week" - d3.text("https://hedonometer.org/data/geodata/combined-word-vectors/"+(time)+".csv", function(text) { + // the previous period (see note above: yearly wordCounts stand in for the + // removed dated combined-word-vectors data) + var time = "2012" + d3.text("https://hedonometer.org/data/geodata/wordCounts"+(time)+".csv").then(function(text) { var tmp = text.split("\n"); allDataOld = Array(52); diff --git a/hedonometer/static/hedonometer/js/selectChapter-harry.js b/hedonometer/static/hedonometer/js/selectChapter-harry.js index ee51d661..f86835b4 100644 --- a/hedonometer/static/hedonometer/js/selectChapter-harry.js +++ b/hedonometer/static/hedonometer/js/selectChapter-harry.js @@ -23,7 +23,7 @@ function selectChapter(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); @@ -34,7 +34,7 @@ function selectChapter(figure,numSections) { // (lens); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -51,26 +51,23 @@ function selectChapter(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } var xAxis = create_xAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); var xAxisHandle = axes.append("g") .attr("class", "x axis ") @@ -78,7 +75,7 @@ function selectChapter(figure,numSections) { .attr("transform", "translate(0," + (height) + ")") .call(xAxis); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // create the clip boundary var clip = axes.append("svg:clipPath") @@ -100,7 +97,7 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,fulltimeseries.length-1]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -113,11 +110,11 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(compFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 0], [width+axeslabelmargin.left, height]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); compFextentStrs = compFextent.map(function(d) { return (d/(fulltimeseries.length-1)*100).toFixed(0); }); // console.log(compFextentStrs); @@ -127,21 +124,18 @@ function selectChapter(figure,numSections) { var gBrush = canvas.append("g") .attr("class","bottombrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height) - .attr("y",0) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + .call(brush); + // position the brush at the initial (data-unit) comparison extent + gBrush.call(brush.move, compFextent.map(brushX)); + + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".comparea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".comparea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins hedotools.booktimeseries.drawCompArea(extent1); compFextentStrs = extent1.map(function(d) { return (d/(fulltimeseries.length-1)*100).toFixed(0); }); @@ -149,21 +143,21 @@ function selectChapter(figure,numSections) { d3.select("#compInput1").attr("value",compFextentStrs[0]+"%"); d3.select("#compInput2").attr("value",compFextentStrs[1]+"%"); - + d3.selectAll("text.complabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); }; compFencoder = d3.urllib.encoder().varname("compExtent"); //.varval(compFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0 .map(Math.round); // should round it to bins + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins //d3.selectAll("text.complabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); if ((extent1[0] !== compFextent[0]) || (extent1[1] !== compFextent[1])) - { + { compFextent = extent1; @@ -171,9 +165,9 @@ function selectChapter(figure,numSections) { } + // snap the brush to the rounded (data-unit) extent, in pixels d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } // d3.select(window).on("resize.selectbottom",resizebottom); @@ -199,12 +193,11 @@ function selectChapter(figure,numSections) { //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".bottombrush") //.transition() - .call(brush.extent(compFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 0], [leftOffsetStatic+width, height]]); + d3.select(".bottombrush") + .call(brush) + .call(brush.move, compFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/selectChapter.js b/hedonometer/static/hedonometer/js/selectChapter.js index 24daa7d6..13811864 100644 --- a/hedonometer/static/hedonometer/js/selectChapter.js +++ b/hedonometer/static/hedonometer/js/selectChapter.js @@ -23,7 +23,7 @@ function selectChapter(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); @@ -34,7 +34,7 @@ function selectChapter(figure,numSections) { // (lens); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -51,22 +51,19 @@ function selectChapter(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // draw the axes // var yAxis = create_yAxis() @@ -80,8 +77,8 @@ function selectChapter(figure,numSections) { // .call(yAxis); var xAxis = create_xAxis() - .innerTickSize(6) - .outerTickSize(0); + .tickSizeInner(6) + .tickSizeOuter(0); var xAxisHandle = axes.append("g") .attr("class", "x axis ") @@ -89,7 +86,7 @@ function selectChapter(figure,numSections) { .attr("transform", "translate(0," + (height) + ")") .call(xAxis); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); // create the clip boundary var clip = axes.append("svg:clipPath") @@ -123,7 +120,7 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,allDataRaw.length]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -136,31 +133,26 @@ function selectChapter(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(compFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 0], [width+axeslabelmargin.left, height]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","bottombrush") - .call(brush) - .call(brush.event); + .call(brush); + // position the brush at the initial (data-unit) comparison extent + gBrush.call(brush.move, compFextent.map(brushX)); - - - gBrush.selectAll("rect") - .attr("height",height) - .attr("y",0) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".comparea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".comparea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins drawCompArea(extent1); @@ -169,10 +161,10 @@ function selectChapter(figure,numSections) { compFencoder = d3.urllib.encoder().varname("compExtent"); //.varval(compFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0 .map(Math.round); // should round it to bins + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // should round it to bins //d3.selectAll("text.complabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); @@ -221,8 +213,7 @@ function selectChapter(figure,numSections) { } d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } d3.select(window).on("resize.selectbottom",resizebottom); @@ -244,16 +235,15 @@ function selectChapter(figure,numSections) { xlabel.attr("x",(leftOffsetStatic+width/2)); - d3.selectAll(".tick line").style({'stroke':'black'}); + d3.selectAll(".tick line").style('stroke','black'); //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".bottombrush") //.transition() - .call(brush.extent(compFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 0], [leftOffsetStatic+width, height]]); + d3.select(".bottombrush") + .call(brush) + .call(brush.move, compFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/selectChapterTop-harry.js b/hedonometer/static/hedonometer/js/selectChapterTop-harry.js index 7c91220e..457caf70 100644 --- a/hedonometer/static/hedonometer/js/selectChapterTop-harry.js +++ b/hedonometer/static/hedonometer/js/selectChapterTop-harry.js @@ -23,13 +23,13 @@ function selectChapterTop(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -46,22 +46,19 @@ function selectChapterTop(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // create the clip boundary var clip = axes.append("svg:clipPath") @@ -74,7 +71,7 @@ function selectChapterTop(figure,numSections) { var unclipped_axes = axes; - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,fulltimeseries.length-1]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -87,11 +84,11 @@ function selectChapterTop(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(refFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 4], [width+axeslabelmargin.left, height-2+4]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); refFextentStrs = refFextent.map(function(d) { return (d/(fulltimeseries.length-1)*100).toFixed(0); }); // console.log(refFextentStrs); @@ -101,23 +98,20 @@ function selectChapterTop(figure,numSections) { var gBrush = canvas.append("g") .attr("class","topbrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height-2) - .attr("y",4) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + .call(brush); + // position the brush at the initial (data-unit) reference extent + gBrush.call(brush.move, refFextent.map(brushX)); + + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".refarea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".refarea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins hedotools.booktimeseries.drawRefArea(extent1); @@ -126,30 +120,28 @@ function selectChapterTop(figure,numSections) { d3.select("#refInput1").attr("value",refFextentStrs[0]+"%"); d3.select("#refInput2").attr("value",refFextentStrs[1]+"%"); - + d3.selectAll("text.reflabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); }; refFencoder = d3.urllib.encoder().varname("refExtent"); //.varval(refFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins - + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins + //d3.selectAll("text.reflabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); if ((extent1[0] !== refFextent[0]) || (extent1[1] !== refFextent[1])) - { + { refFextent = extent1; refFencoder.varval(refFextent.map(function(d) { return (d/(fulltimeseries.length-1)).toFixed(2); })); - - + // snap the brush to the rounded (data-unit) extent, in pixels d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } } @@ -173,12 +165,11 @@ function selectChapterTop(figure,numSections) { //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".topbrush") //.transition() - .call(brush.extent(refFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 4], [leftOffsetStatic+width, height-2+4]]); + d3.select(".topbrush") + .call(brush) + .call(brush.move, refFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/selectChapterTop.js b/hedonometer/static/hedonometer/js/selectChapterTop.js index b7835f62..42667514 100644 --- a/hedonometer/static/hedonometer/js/selectChapterTop.js +++ b/hedonometer/static/hedonometer/js/selectChapterTop.js @@ -23,13 +23,13 @@ function selectChapterTop(figure,numSections) { .attr("class","canvas"); // create the x and y axis - var x = d3.scale.linear() + var x = d3.scaleLinear() //.domain([d3.min(lens),d3.max(lens)]) .domain([0,100]) .range([0,width]); // linear scale function - var y = d3.scale.linear() + var y = d3.scaleLinear() .domain([0,1]) .range([height, 0]); @@ -46,22 +46,19 @@ function selectChapterTop(figure,numSections) { .attr("width", width) .attr("height", height) .attr("class", "bg") - .style({'stroke-width':'2','stroke':'rgb(0,0,0)'}) + .style('stroke-width','2') + .style('stroke','rgb(0,0,0)') .attr("fill", "#FCFCFC"); // axes creation functions var create_xAxis = function() { - return d3.svg.axis() - .scale(x) - .ticks(9) - .orient("bottom"); } + return d3.axisBottom(x) + .ticks(9); } // axis creation function var create_yAxis = function() { - return d3.svg.axis() - .ticks(3) - .scale(y) //linear scale function - .orient("left"); } + return d3.axisLeft(y) + .ticks(3); } // create the clip boundary var clip = axes.append("svg:clipPath") @@ -74,7 +71,7 @@ function selectChapterTop(figure,numSections) { var unclipped_axes = axes; - var brushX = d3.scale.linear() + var brushX = d3.scaleLinear() .domain([0,allDataRaw.length]) .range([axeslabelmargin.left,width+axeslabelmargin.left]); @@ -87,31 +84,28 @@ function selectChapterTop(figure,numSections) { .attr("fill", "#000000") .attr("style", "text-anchor: middle;"); - var brush = d3.svg.brush() - .x(brushX) - .extent(refFextent) + // d3 v7 brushX: selection is in pixels; convert with brushX.invert. + var brush = d3.brushX() + .extent([[axeslabelmargin.left, 4], [width+axeslabelmargin.left, height-2+4]]) .on("brush",brushing) - .on("brushend",brushended); + .on("end",brushended); var gBrush = canvas.append("g") .attr("class","topbrush") - .call(brush) - .call(brush.event); - - gBrush.selectAll("rect") - .attr("height",height-2) - .attr("y",4) - // .style({'stroke-width':'2','stroke':'rgb(100,100,100)','opacity': 0.35}) - // .attr("fill", "rgb(90,90,90)") + .call(brush); + // position the brush at the initial (data-unit) reference extent + gBrush.call(brush.move, refFextent.map(brushX)); + + gBrush.selectAll(".selection") // .on("mouseout",function() { d3.selectAll(".refarea").attr("visibility","hidden"); }) .on("mouseover",function() { d3.selectAll(".refarea").attr("visibility","visible"); }); - function brushing() { - if (!d3.event.sourceEvent) return; - - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins + function brushing(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + + var extent1 = event.selection.map(brushX.invert).map(Math.round); // round to bins drawRefArea(extent1); @@ -120,11 +114,11 @@ function selectChapterTop(figure,numSections) { refFencoder = d3.urllib.encoder().varname("refExtent"); //.varval(refFextent.map(function(d) { return (d/allDataRaw.length).toFixed(2); })); - function brushended() { - if (!d3.event.sourceEvent) return; - var extent0 = brush.extent(), - extent1 = extent0.map(Math.round); // should round it to bins - + function brushended(event) { + if (!event.sourceEvent) return; + if (!event.selection) return; + var extent1 = event.selection.map(brushX.invert).map(Math.round); // should round it to bins + //d3.selectAll("text.reflabel").attr("x",brushX(d3.sum(extent1)/extent1.length)); if ((extent1[0] !== refFextent[0]) || (extent1[1] !== refFextent[1])) @@ -161,8 +155,7 @@ function selectChapterTop(figure,numSections) { } d3.select(this).transition() - .call(brush.extent(extent1)) - .call(brush.event); + .call(brush.move, extent1.map(brushX)); } @@ -185,12 +178,11 @@ function selectChapterTop(figure,numSections) { //brushX.range([figwidth*.125,width+figwidth*.125]); brushX.range([leftOffsetStatic,leftOffsetStatic+width]); - brush.x(brushX); - d3.select(".topbrush") //.transition() - .call(brush.extent(refFextent)) - .call(brush.event); + brush.extent([[leftOffsetStatic, 4], [leftOffsetStatic+width, height-2+4]]); + d3.select(".topbrush") + .call(brush) + .call(brush.move, refFextent.map(brushX)); //brushing(); - //brush.event(); } } diff --git a/hedonometer/static/hedonometer/js/shifttest-on-load.js b/hedonometer/static/hedonometer/js/shifttest-on-load.js index b68c6e96..e6221f55 100644 --- a/hedonometer/static/hedonometer/js/shifttest-on-load.js +++ b/hedonometer/static/hedonometer/js/shifttest-on-load.js @@ -20,7 +20,7 @@ hedotools.loader = function() { var refFvec; var compFvec; var load = function() { - d3.text(scoresFile, function(text) { + d3.text(scoresFile).then(function(text) { var tmp = text.split("\n"); //console.log(tmp.length); //console.log(tmp[tmp.length-1]); @@ -33,7 +33,7 @@ hedotools.loader = function() { } if (!--csvLoadsRemaining) onload(); }); - d3.text(wordsFile, function(text) { + d3.text(wordsFile).then(function(text) { var tmp = text.split("\n"); words = tmp; var len = words.length - 1; @@ -44,11 +44,11 @@ hedotools.loader = function() { } if (!--csvLoadsRemaining) onload(); }); - d3.text(embedDetails.compFile,function(tmp) { + d3.text(embedDetails.compFile).then(function(tmp) { compFvec = tmp.split('\n').slice(0,10222); if (!--csvLoadsRemaining) onload(); }); - d3.text(embedDetails.refFile,function(tmp2) { + d3.text(embedDetails.refFile).then(function(tmp2) { refFvec = tmp2.split('\n').slice(0,10222); if (!--csvLoadsRemaining) onload(); }); diff --git a/hedonometer/static/hedonometer/js/timeseries.js b/hedonometer/static/hedonometer/js/timeseries.js index 765c6b18..8c979004 100644 --- a/hedonometer/static/hedonometer/js/timeseries.js +++ b/hedonometer/static/hedonometer/js/timeseries.js @@ -303,7 +303,7 @@ var intStr0 = ["zero", "one", "two", "three"]; legendgroup.selectAll("circle") .data(weekDaysShort) .enter() - .append("circle").on("mousedown", function(d, i) { + .append("circle").on("mousedown", function(event, d) { var currRange = (x.domain()[1].getTime() - x.domain()[0].getTime()); legendDict.toggle(d, rScale(currRange)); }) @@ -321,7 +321,7 @@ var intStr0 = ["zero", "one", "two", "three"]; .append("text") .attr("x", (d, i) => 15 + legendboxwidth * i) .attr("y", 14) - .on("mousedown", function(d, i) { + .on("mousedown", function(event, d) { var currRange = (x.domain()[1].getTime() - x.domain()[0].getTime()); legendDict.toggle(d, rScale(currRange)); }) @@ -341,7 +341,7 @@ var intStr0 = ["zero", "one", "two", "three"]; .attr("height", 19) .attr("fill", "white") .attr("opacity", "0.0") - .on("mousedown", function(d, i) { + .on("mousedown", function(event, d) { var currRange = (x.domain()[1].getTime() - x.domain()[0].getTime()); legendDict.toggle(d, rScale(currRange)); }); @@ -497,7 +497,7 @@ var intStr0 = ["zero", "one", "two", "three"]; .attr("height", 19) .attr("fill", "white") .attr("opacity", "0.0") - .on("mousedown", function(d, i) { + .on("mousedown", function(event, d) { console.log([x2(d[0]), x2(d[1])]); brushgroup.call(brush.move, [x2(d[0]), x2(d[1])]) var cutoff = bigdayscale(d[1].getTime() - d[0].getTime()); @@ -555,7 +555,7 @@ var intStr0 = ["zero", "one", "two", "three"]; // .attr("visibility", "hidden"); } - function brushed() { + function brushed(event) { // console.log("brushed"); // console.log(d3.event); // console.log(d3.event.selection.map(x2.invert)); @@ -565,7 +565,7 @@ var intStr0 = ["zero", "one", "two", "three"]; // console.log(x2.domain()); // console.log(brush.extent()()); - const currRange = d3.event.selection.map(x2.invert); + const currRange = event.selection.map(x2.invert); console.log(currRange); x.domain(currRange); @@ -698,10 +698,10 @@ var intStr0 = ["zero", "one", "two", "three"]; // parseInt(d3.select("#moveshifthere").style("width")); var modalheight = 495; - d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(popdate) + "-sum.csv", function(tmp) { + d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(popdate) + "-sum.csv").then(function(tmp) { const compFvec = tmp.split(',').length > tmp.split('\n').length ? tmp.split(',') : tmp.split('\n'); - d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(d3.timeDay.offset(popdate, 0)) + "-prev7.csv", function(tmp2) { + d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(d3.timeDay.offset(popdate, 0)) + "-prev7.csv").then(function(tmp2) { const refFvec = tmp2.split(',').length > tmp2.split('\n').length ? tmp2.split(',') : tmp2.split('\n'); @@ -841,7 +841,7 @@ var intStr0 = ["zero", "one", "two", "three"]; } } - d3.csv(dataUrl + "/" + directory + "/" + shiftDir + "/" + cformat(popdate) + "-shift.csv", function(csv) { + d3.csv(dataUrl + "/" + directory + "/" + shiftDir + "/" + cformat(popdate) + "-shift.csv").then(function(csv) { var names = csv.map(function(d) { return d.word; }); @@ -857,7 +857,7 @@ var intStr0 = ["zero", "one", "two", "three"]; //var x = d3.scaleLinear().domain([-x0, x0]).range([0, 400]); //var y = d3.scaleLinear().domain(d3.range(sizes.length)).range([5, 7]); - d3.csv(dataUrl + "/" + directory + "/" + shiftDir + "/" + cformat(popdate) + "-metashift.csv", function(csv) { + d3.csv(dataUrl + "/" + directory + "/" + shiftDir + "/" + cformat(popdate) + "-metashift.csv").then(function(csv) { var havg = csv.map(function(d) { return d.refH; }); @@ -1071,7 +1071,7 @@ var intStr0 = ["zero", "one", "two", "three"]; .on('mouseover', null) .on('mouseout', function(d) { var rectSelection = d3.select(this).style( - opacity, '0.7' + "opacity", '0.7' ); }); @@ -1111,10 +1111,10 @@ var intStr0 = ["zero", "one", "two", "three"]; console.log("nextDay", update); dateencoder.varval(cformat(update)); - d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(update) + "-sum.csv", function(tmp) { + d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(update) + "-sum.csv").then(function(tmp) { const compFvec = tmp.split(',').length > tmp.split('\n').length ? tmp.split(',') : tmp.split('\n'); - d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(d3.timeDay.offset(update, 0)) + "-prev7.csv", function(tmp2) { + d3.text(dataUrl + "/" + directory + "/" + wordVecDir + "/" + cformat(d3.timeDay.offset(update, 0)) + "-prev7.csv").then(function(tmp2) { const refFvec = tmp2.split(',').length > tmp2.split('\n').length ? tmp2.split(',') : tmp2.split('\n'); @@ -1445,9 +1445,8 @@ var intStr0 = ["zero", "one", "two", "three"]; var format = d3.timeFormat("%m-%d"); - d3.json('/api/v1/events/?format=json&happs__timeseries__title=' + title, - function(err, json) { - console.log(err); + d3.json('/api/v1/events/?format=json&happs__timeseries__title=' + title) + .then(function(json) { console.log(json); bigdays = json.objects.map(function(d) { d.date = cparse(d.happs.date); diff --git a/hedonometer/templates/hedonometer/books/books.html b/hedonometer/templates/hedonometer/books/books.html index 40ac7605..dd706cc7 100644 --- a/hedonometer/templates/hedonometer/books/books.html +++ b/hedonometer/templates/hedonometer/books/books.html @@ -190,7 +190,20 @@

{% endblock %} {% block bottomjs %} - + + + + + + + + + + + + + + {% endblock %} diff --git a/hedonometer/templates/hedonometer/books/gutenberg.html b/hedonometer/templates/hedonometer/books/gutenberg.html index 33ba6b63..ad46a23c 100644 --- a/hedonometer/templates/hedonometer/books/gutenberg.html +++ b/hedonometer/templates/hedonometer/books/gutenberg.html @@ -186,13 +186,15 @@

Join our waitlist

{% endblock %} {% block bottomjs %} - + - - + + + + diff --git a/hedonometer/templates/hedonometer/books/harrypotter.html b/hedonometer/templates/hedonometer/books/harrypotter.html index 0478c37c..d5ee18b2 100644 --- a/hedonometer/templates/hedonometer/books/harrypotter.html +++ b/hedonometer/templates/hedonometer/books/harrypotter.html @@ -351,13 +351,15 @@ {% endblock %} {% block bottomjs %} - + - - + + + + diff --git a/hedonometer/templates/hedonometer/books/v3.html b/hedonometer/templates/hedonometer/books/v3.html index 77c67ff2..6b19570d 100644 --- a/hedonometer/templates/hedonometer/books/v3.html +++ b/hedonometer/templates/hedonometer/books/v3.html @@ -174,14 +174,16 @@

{% endblock %} {% block bottomjs %} - + - - + + + + diff --git a/hedonometer/templates/hedonometer/cbslist.html b/hedonometer/templates/hedonometer/cbslist.html index e0201c4e..33595334 100644 --- a/hedonometer/templates/hedonometer/cbslist.html +++ b/hedonometer/templates/hedonometer/cbslist.html @@ -137,13 +137,15 @@

John Tierney shares this analysis on CBS This Morning:
{% block bottomjs %} - + - - - + + + + + - + {% endblock %} diff --git a/hedonometer/templates/hedonometer/cities.html b/hedonometer/templates/hedonometer/cities.html index 24061abe..801af91e 100644 --- a/hedonometer/templates/hedonometer/cities.html +++ b/hedonometer/templates/hedonometer/cities.html @@ -125,11 +125,13 @@

Interactive Wordshift

- + - - - + + + + + diff --git a/hedonometer/templates/hedonometer/cities2.html b/hedonometer/templates/hedonometer/cities2.html index 9453c604..772c1e9f 100644 --- a/hedonometer/templates/hedonometer/cities2.html +++ b/hedonometer/templates/hedonometer/cities2.html @@ -129,14 +129,18 @@
Word Shift:
- + - - - - + + + + + + + + - + {% endblock %} diff --git a/hedonometer/templates/hedonometer/citysankey.html b/hedonometer/templates/hedonometer/citysankey.html index 9dea3aa1..489358fb 100644 --- a/hedonometer/templates/hedonometer/citysankey.html +++ b/hedonometer/templates/hedonometer/citysankey.html @@ -124,12 +124,14 @@

Interactive Wordshift

- + - - - - + + + + + + {% endblock %} diff --git a/hedonometer/templates/hedonometer/embed.html b/hedonometer/templates/hedonometer/embed.html index 1a072ded..9707b269 100644 --- a/hedonometer/templates/hedonometer/embed.html +++ b/hedonometer/templates/hedonometer/embed.html @@ -62,10 +62,12 @@ {% block bottomjs %} - + - - + + + + {% endblock %} diff --git a/hedonometer/templates/hedonometer/indexlang.html b/hedonometer/templates/hedonometer/indexlang.html index bafaeed1..0f491442 100644 --- a/hedonometer/templates/hedonometer/indexlang.html +++ b/hedonometer/templates/hedonometer/indexlang.html @@ -135,12 +135,14 @@

Embed

{% block bottomjs %} - + - + + {% endblock %} diff --git a/hedonometer/templates/hedonometer/maps.html b/hedonometer/templates/hedonometer/maps.html index b2275de2..667f2624 100644 --- a/hedonometer/templates/hedonometer/maps.html +++ b/hedonometer/templates/hedonometer/maps.html @@ -280,15 +280,19 @@
Word Shift:
- + - - - - - + + + + + + + + + - + {% endblock %} diff --git a/hedonometer/templates/hedonometer/movie.html b/hedonometer/templates/hedonometer/movie.html index ce2a41fa..92bb4826 100644 --- a/hedonometer/templates/hedonometer/movie.html +++ b/hedonometer/templates/hedonometer/movie.html @@ -277,13 +277,15 @@

Full Text

{% endblock %} {% block bottomjs %} - + - - + + + + diff --git a/hedonometer/templates/hedonometer/movielist-ranked.html b/hedonometer/templates/hedonometer/movielist-ranked.html index ca4a403e..a50d9deb 100644 --- a/hedonometer/templates/hedonometer/movielist-ranked.html +++ b/hedonometer/templates/hedonometer/movielist-ranked.html @@ -114,13 +114,15 @@
Word Shift:
{% block bottomjs %} - + - - - + + + + + - + {% endblock %} diff --git a/hedonometer/templates/hedonometer/nytlist.html b/hedonometer/templates/hedonometer/nytlist.html index 8d9c6617..6def8894 100644 --- a/hedonometer/templates/hedonometer/nytlist.html +++ b/hedonometer/templates/hedonometer/nytlist.html @@ -132,13 +132,15 @@
John Tierney shares this analysis on CBS This Morning:
{% block bottomjs %} - + - - - + + + + + - + {% endblock %} diff --git a/hedonometer/templates/hedonometer/outside.html b/hedonometer/templates/hedonometer/outside.html index 88ced78d..acce63eb 100644 --- a/hedonometer/templates/hedonometer/outside.html +++ b/hedonometer/templates/hedonometer/outside.html @@ -135,13 +135,15 @@
Word Shift:
{% block bottomjs %} - + - - - + + + + + - + {% endblock %} diff --git a/hedonometer/templates/hedonometer/outsidelist.html b/hedonometer/templates/hedonometer/outsidelist.html index 8d9c6617..6def8894 100644 --- a/hedonometer/templates/hedonometer/outsidelist.html +++ b/hedonometer/templates/hedonometer/outsidelist.html @@ -132,13 +132,15 @@
John Tierney shares this analysis on CBS This Morning:
{% block bottomjs %} - + - - - + + + + + - + {% endblock %} diff --git a/hedonometer/templates/hedonometer/shifttest.html b/hedonometer/templates/hedonometer/shifttest.html index a717941e..e1cd65b3 100644 --- a/hedonometer/templates/hedonometer/shifttest.html +++ b/hedonometer/templates/hedonometer/shifttest.html @@ -49,10 +49,11 @@ {% block bottomjs %} - + - - + + + {% endblock %} diff --git a/hedonometer/templates/hedonometer/statesankey.html b/hedonometer/templates/hedonometer/statesankey.html index 46084b6f..06301383 100644 --- a/hedonometer/templates/hedonometer/statesankey.html +++ b/hedonometer/templates/hedonometer/statesankey.html @@ -93,15 +93,19 @@

- + - - - - - + + + + + + + + - + + {% endblock %} diff --git a/hedonometer/templates/hedonometer/words_api.html b/hedonometer/templates/hedonometer/words_api.html index ccec6d01..884e6a9d 100644 --- a/hedonometer/templates/hedonometer/words_api.html +++ b/hedonometer/templates/hedonometer/words_api.html @@ -181,10 +181,10 @@

API

{% endblock %} {% block bottomjs %} - + +