<-- brushing ----------------------------------------------------------------------------------------------->

#inplace-detachment { display: none; position: absolute; transform-origin: top left; z-index : 9; // left : 0px; // top : 0px; } // var inplace_zoom_button = escalation_select_controller.append_button( // { group_id : 'inplace-zoom-table', // center : [ "inplace-zoom-radio-button", "Inplace Zoom on/off", 'album', // function( self ) { // }, // function( self ) { // self.semantics.hide(); // }, // ], // semantics: { // detachment : null, // initialize : function() { // this.detachment = d3.select( '#mybody' ) // .append('iframe') // .attr( 'id', 'inplace-detachment') // .attr("sandbox", "allow-scripts") // .attr ("width", " 750px") // .attr ("height", "1000px") // .classed('text-frame', true) // .style("border", "none") // .on('mouseout', function() { // d3.select(this) // .attr("src", null ) // .style("display", 'none') // ; // }) // ; // }, // show : function() { // this.detachment.style('display', 'block'); // }, // hide : function() { // this.detachment.style('display', 'none') // // .attr("src", null ) // ; // }, // escalate : function( v ) { // // console.log('in place escalation', d3.event.x, d3.event.y); // return; // var url = `https://fastapi.metacpan.org/v1/pod/${v.label}?content-type=text/html`; // this.detachment // .attr("src", url ) // ; // var s,h,w; // { // var y = MARGIN_Y; // not final, though // var y_unten = height - MARGIN_Y; // h = y_unten - y; // possible height // if (h > MAX_H) { // limit // h = MAX_H; // } // w = 3/4 * h; // s = 1000 / h; // 1000px vertical size from above // } // var y0 = MARGIN_Y; // assume its ok // { // if (d3.event.y > y0 + h) { // y0 = d3.event.y - h; // } else if (d3.event.y < y0) { // y0 = d3.event.y; // } // } // var x0 = d3.event.x; // { // if (x0 + w > width - MARGIN_X) { // x0 = x0 - w; // } // } // function __to_transform(s, x, y) { // return 'scale(' + (1/s) + ') translate('+ (x*s + 'px') +','+ ( y*s + 'px') +')'; // } // this.detachment // .style('display', 'block') // .style("opacity", 1) // .style ("transform", function(v,i) { // return __to_transform(400, d3.event.x, d3.event.y) // }) // .transition() // .style ("transform", function(v,i) { // return __to_transform(s, x0, y0); // }) // .duration(500) // ; // inplace_zoom_button.semantics.show(); // }, // }, // }); // inplace_zoom_button.semantics.initialize(); // inplace_zoom_button.enable(); // var circular_zoom_button = escalation_select_controller.append_button( // { group_id : 'circle-zoom-table', // center : [ "circle-zoom-radio-button", "Circular Zoom on/off", 'circle', // function( self ) { // }, // function() { // }, // ], // semantics: { // escalate : function( v ) { // console.log('circle escalation'); // }, // }, // }); // circular_zoom_button.disable(); // inplace_zoom_button.activate(); // // inplace_zoom_button.activate(); text.percentage { text-anchor : middle; font-size : 9px; fill :#b9b9b9; text-shadow : -1px -1px 1px rgba(155,155,155,.1), 1px 1px 1px rgba(0,0,0,.5); } rect.topic-square { fill : red; } circle.topic-circle { fill : blue; } //-- topic infrastructure ------------------------------------------------- var LEGEND = { 'house' : 'square', 'lake' : 'triangle', 'park' : 'circle' }; var t_richness = 0; // 0: density 1:scaled+zoomable 2:chars+assocs var TOPICS; var topics; var NR_TOPICS = 240; var nr_topics; var percentage_topics = 10; // we start with 10% var last_topics_batch_fetched; //-- topics control ---------------------------------------------------------------- d3.select ('#topics-toggle-button').on ('click', function () { if (d3.select(this).classed('mdl-button--colored')) { // it is active if (d3.select(this).select('i').classed('md-light')) { // not selected yet if (TOPICS) { // already loaded nr_topics = Math.floor (NR_TOPICS / 100 * percentage_topics); // console.log (percentage_topics, nr_topics); topics = TOPICS.slice(0, nr_topics); render_topics (topics, t_richness); } else { // not loaded yet, get first batch TOPICS = []; percentage_topics = 10; // we start with 10% d3.json("topics.0.json") // from there .then(function(data) { // into here last_topics_batch_fetched = 0; // remember what we fetched (we start with 0) TOPICS = data; nr_topics = Math.floor (NR_TOPICS / 100 * percentage_topics); // console.log (percentage_topics, nr_topics); topics = TOPICS.slice(0, nr_topics); render_topics (topics, t_richness); }); var svg = d3.select('#topics-toggle-button') .append('svg'); svg.append("clipPath") .attr("id", "topics-button-clip") .append("rect") .attr("x",0) .attr("y", FILL_LEVELS10[ Math.floor (percentage_topics / 10) ]) .attr("height", 28) .attr("width", 28) ; svg.append("circle") .attr("clip-path","url(#topics-button-clip)") .attr("cx", 14) .attr("cy", 14) .attr("r", 14) .attr("fill","SteelBlue") ; } d3.select(this).select('i').classed("md-light", false) d3.select("#topics-control").selectAll("i.material-icons").classed("md-light", false); // activate all buttons } else { // already select => hide documents and turn off render_topics ([], t_richness); d3.select(this).select('i').classed("md-light", true) d3.select("#topics-control").selectAll("i.material-icons").classed("md-light", true); // deactivate all buttons } } else { // not active } }); d3.select ('#topics-display-more-button').on ('click', function () { if (d3.select ('#topics-toggle-button').select('i').classed('md-light')) { // topics disabled return; } else { d3.select('#topics-display-less-button').select('i').classed("md-light", false); if (t_richness == 0) { topics_transition_density_to_summary (topics); t_richness++; } else if (t_richness == 1) { topics_transition_summary_to_detail (topics); t_richness++; d3.select(this).select('i').classed("md-light", true); } } }); d3.select ('#topics-display-less-button').on ('click', function () { if (d3.select ('#topics-toggle-button').select('i').classed('md-light')) { // topics disabled return; } else { d3.select('#topics-display-more-button').select('i').classed("md-light", false); if (t_richness == 2) { topics_transition_detail_to_summary (topics); t_richness--; } else if (t_richness == 1) { topics_transition_summary_to_density (topics); t_richness--; d3.select(this).select('i').classed("md-light", true); } } }); d3.select ('#topics-more-button').on ('click', function () { if (d3.select ('#topics-toggle-button').select('i').classed('md-light')) { // topics disabled } else if (percentage_topics == 100) { // the end of the line } else { // we still could add more topics percentage_topics += 10; nr_topics = Math.floor (NR_TOPICS / 100 * percentage_topics); console.log (percentage_topics, nr_topics); d3.select('#topics-less-button').select('i').classed("md-light", false); // activate up button d3.select('#topics-button-clip').select('rect') .attr("y", FILL_LEVELS10[ Math.floor (percentage_topics / 10) ]); if (nr_topics >= NR_TOPICS) { // no more documents d3.select(this).select('i').classed("md-light", true); nr_topics = NR_TOPICS; // maxed out topics = TOPICS.slice(0, nr_topics); render_topics (topics, t_richness); } else if (nr_topics >= TOPICS.length) { // there are still some available last_topics_batch_fetched++; d3.json("topics." + (last_topics_batch_fetched) + ".json") // from there .then(function(data) { // into here TOPICS = TOPICS.concat (data); topics = TOPICS.slice(0, nr_topics); render_topics (topics, t_richness); }); } else { // we have all local topics = TOPICS.slice(0, nr_topics); render_topics (topics, t_richness); } } }); d3.select ('#topics-less-button').on ('click', function () { if (d3.select ('#topics-toggle-button').select('i').classed('md-light')) { // documents disabled } else if (percentage_topics == 0) { // the end of the line } else { d3.select('#topics-more-button').select('i').classed("md-light", false); // activate up button percentage_topics -= 10; nr_topics = Math.floor (NR_TOPICS / 100 * percentage_topics); console.log (percentage_topics, nr_topics); if (nr_topics <= 0) { nr_topics = 0; // hitting rock bottom d3.select(this).select('i').classed("md-light", true); // deactivate down button } d3.select('#topics-button-clip').select('rect') .attr("y", FILL_LEVELS10[ Math.floor (percentage_topics / 10) ]); // d3.select('#document-percentage').text (percentage_documents + "%"); topics = TOPICS.slice(0, nr_topics); render_topics (topics, t_richness); } }); function render_topics(topics, s) { var t_topics = L_topics .selectAll ('g') .data(topics); t_topics.exit().remove(); t_topics.enter() .append("g") .attr ("transform", function(v,i) { return "translate(" + v.x + "," + v.y + ")"; }) .append('use') .attr ("x", 0) .attr ("y", 0) .attr ('xlink:href', function(v,i) { return '#' + LEGEND[v.type] }) .append("svg:title") // not quite correct position, but it seems to work .text(function(v,i) { return v.title; }) ; if (s > 0) { topics_transition_density_to_summary (topics); s--; } if (s > 0) { topics_transition_summary_to_detail (topics); s--; } } function topics_transition_density_to_summary (topics) { var k = 3; // how much we plan to make them bigger var delta_xy = 3; // 10 is native size of objects? // this is fishy L_topics .selectAll("g") .transition() .attr ("transform", function(v,i) { return "translate(" + (v.x - v.impact * k * delta_xy) + "," + (v.y - v.impact * k * delta_xy) + ") scale("+(v.impact * k)+")"; }) .duration(1000) ; L_topics .selectAll("g") .append("text") .attr ("x", function(v,i) { return - v.impact * k * delta_xy; }) // fishy .attr ("y", function(v,i) { return 0; }) .attr("font-size", function(v, i) { return Math.floor(3 * v.impact) + "px" }) .each(function (d) { var lines = wordwrap(d.title, 15) for (var i = 0; i < lines.length; i++) { d3.select(this) .append("tspan") .attr("x", 0) .attr("dy",2) .text(lines[i]) } }) ; L_topics .selectAll("g") .on("mouseover", function (d) { var g = d3.select(this); var t = str2transform (g.attr("transform")); var scale = 3 * zoom / d.impact; t.scale = scale; t.translateX -= d.impact * k * scale; t.translateY -= d.impact * k * scale; // console.log (t); g .transition() .attr("transform", "translate("+(t.translateX)+","+(t.translateY)+") scale("+(t.scale)+")") .duration(1000) }) .on("mouseout", function (d) { var g = d3.select(this); var t = str2transform (g.attr("transform")); t.scale = d.impact * k; t.translateX = d.x - d.impact * k * delta_xy; t.translateY = d.y - d.impact * k * delta_xy; g .transition() .attr("transform", "translate("+(t.translateX)+","+(t.translateY)+") scale("+(t.scale)+")") .duration(1000) }) ; } function topics_transition_summary_to_density (topics) { L_topics .selectAll("g") .on("mouseover", function (d) {}) .on("mouseout", function (d) {}) ; L_topics .selectAll("text") .remove() ; L_topics .selectAll("g") .transition() .attr ("transform", function(v,i) { return "translate(" + (v.x ) + "," + (v.y ) + ") scale("+(1)+")"; }) .duration(1000) ; } function topics_transition_summary_to_detail (topics) { } function topics_transition_detail_to_summary (topics) { } #old-main-controller { top : 10px; left : 10px; // width : 248px; height : 70px; display : none; opacity : 0.1; } #origin-select-controller { top : 78px; left : 320px; width : 62px; display : none; } var origin_select_controller = new AT_MOST_ONCE_Controller( { id : 'origin-select-controller', class : 'controller', parent : '#mybody' } ); var origin_set_search_button = origin_select_controller.append_button( { group_id : 'origin-set-search-table', center : [ "origin-set-search-button", "Set search mode", "search", function( self ) { // origin_button = origin_search_button; origin_search_button.show(); }, function( self ) { origin_search_button.hide(); }, ], } ); origin_set_search_button.enable_button(); // signal that button is enabled // future feature var origin_set_documents_button = origin_select_controller.append_button( { group_id : 'origin-set-documents-table', center : [ "origin-set-documents-button", "Set documents mode", "description", function( self ) { // origin_button = origin_documents_button; origin_documents_button.show(); }, function( self ) { origin_documents_button.hide(); }, ], } ); // origin_set_documents_button.enable_button(); // signal that button is enabled // future feature askdsdfsdsdffds sdfsdfsdfsdlksdf sdjflksdj fsdhfk sdkjhf skdjf kjsdhf kjshf jsd fjsd jsd jfhsd rect.region-extent { opacity : 0.3; fill : red; stroke :#021c13; stroke-width : 3px; } sdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfssdfskklsdfs

^^ urn:x-mime:text/html