DiaColloDB-WWW
view release on metacpan or search on metacpan
share/htdocs/diacollo.css view on Meta::CPAN
/*font-size: 0px;*/
}
#d3transport > div,
#d3main > div {
display: inline-block;
}
#d3buttons {
width: 90px;
}
#d3legend {
width: 50px;
}
#proifileDataD3 div {
vertical-align: middle;
}
/*======================================================================
* profile data: d3: common
*/
share/htdocs/diacollo.css view on Meta::CPAN
font-weight: bold;
}
#d3slider .brush .domain,
#d3slider .brush .slider .background {
/*opacity: 0%;*/ /*-- x-axis disappears under chromium, 2020-10-07 --*/
fill: none;
}
/*--------------------------------------------------------------
* profile data: d3: common: legend (color axis)
*/
.d3legend {
border: none;
/*border: 1px solid #aaaaaa;*/
margin: 0px;
}
.d3legend .domain {
fill: none;
}
.d3legend .tick line {
stroke-width: 0px;
fill: none;
}
.d3legend text {
font-size: 10px;
}
/*--------------------------------------------------------------
* profile data: d3: common: keyboard focus
*/
.content:focus {
outline: none;
}
#d3body {
share/htdocs/diacollo.js view on Meta::CPAN
},
subtitle: {
text: (isDiff ? (chartTitleString('',1)+' - '+chartTitleString('b',1)) : chartTitleString())
},
xAxis: {
title: { text: 'Date (slice)' },
},
yAxis: {
title: { text: 'Score'+(isDiff ? (' Diff ('+user_query.diff+')') : '')+' ('+scoreNames[user_query.score]+')' }
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
padding: 5
//,itemStyle: { "color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "normal" }
},
plotOptions: {
series: {
cursor: 'pointer',
share/htdocs/diacollo.js view on Meta::CPAN
d3.select("#d3slider")
.transition()
.duration(0)
.tween("brush", function() { return function(t) { ; } })
//.call(dbrush.event)
;
}
}
//----------------------------------------------------------------------
// d3: legend (color-scale / "y axis")
function dcpLegend(parent_selector,opts) {
//-- defaults
if (opts==null) opts={};
if (opts.id==null) { opts.id="d3legend"; }
if (opts.width==null) { opts.width = 50; }
if (opts.height==null) { opts.height = 450; }
if (opts.opacity==null) { opts.opacity = 1; }
var margin = opts.margin==null ? {} : opts.margin;
if (margin.left==null) margin.left = 0;
if (margin.right==null) margin.right = 0;
if (margin.top==null) margin.top = 0;
if (margin.bottom==null) margin.bottom = 0;
if (opts.translate==null) opts.translate = {x:0,y:0};
share/htdocs/diacollo.js view on Meta::CPAN
var height = opts.height - margin.top - margin.bottom;
var yscale = d3.scale.linear()
.domain(dcpScoreRange.reverse())
.range([0,height])
.clamp(true);
var parent = d3.select(parent_selector);
var svg = parent.append("g")
.attr("id",opts.id)
.classed("d3legend",true)
.classed("scale",true)
.attr("width", opts.width)
.attr("height", opts.height)
.attr("transform","translate("+(margin.left+opts.translate.x)+","+(margin.top+opts.translate.y)+")");
svg.append("title")
.text("Legend: node colors by collocate score"+(isDiff ? " difference" : ""));
svg.append("g")
.attr("class", "y axis")
.call(d3.svg.axis()
share/htdocs/diacollo.js view on Meta::CPAN
}
}
}
return css;
}
//----------------------------------------------------------------------
// d3: common: controls & geometry
// + opts:
// legendOpacity:OPACITY //-- legend color-scale opacity
// width:WIDTH, //-- total width (default=window.innerWidth-16)
// height:HEIGHT, //-- total height (default=500)
// bodyWidth:WIDTH //-- body,slider width
// buttonsWidth:WIDTH //-- buttons width
// legendWidth:WIDTH //-- legend width
// + returns: opts + keys
// bodyWidth:WIDTH //-- body width
// bodyHeight:HEIGHT //-- body height
function d3SetupCommon(opts) {
//-- options
if (opts.legendOpacity==null) opts.legendOpacity=1;
//-- common variables
if (opts==null) opts={};
if (opts.height==null) opts.height = 500;
if (opts.buttonsWidth==null) opts.buttonsWidth = 90; //$("#d3buttons").width(); //-- not defined yet!
if (opts.legendWidth==null) opts.legendWidth = 50; //$("#d3legend").width(); //-- not defined yet!
if (opts.bodyHeight==null) opts.bodyHeight = opts.height - 50 - 5; //-- -5:ypad
//debug_log("d3SetupCommon:pre: "+JSON.stringify(opts));
//-- cleanup any stale content & create new svg with proper height (may add scrollbars!)
$("#d3content").remove();
var svg = d3.select("#profileDataD3")
.append("svg")
.attr("id","d3content")
//.attr("width",opts.width) //-- delayed in case scrollbars were added
.attr("height", opts.height);
//-- get width (temporary show)
$("#profileDataD3").show();
if (opts.width==null) opts.width = $(".outer").width();
if (opts.sliderWidth==null) opts.sliderWidth = opts.width - opts.buttonsWidth ;//- 20; //-- 10px goofiness margin (firefox, mobile emulation)
if (opts.bodyWidth==null) opts.bodyWidth = opts.width-opts.legendWidth ;//- 20; //-- 10px goofiness margin (firefox, mobile emulation)
$("#profileDataD3").hide();
svg.attr("width",opts.width);
//debug_log("d3SetupCommon+width: "+JSON.stringify(opts));
//-- transport: buttons + brush-slider
var transport = svg.append("g")
.attr("id","d3transport")
.attr("width",opts.width)
.attr("height",50);
var sliderPadX = 50;
dcpTransportButtons("#d3transport", {id:"d3buttons", width:opts.buttonsWidth, height:50});
dcpTransportSlider(dlabels, "#d3transport", { id:"d3slider", width:opts.sliderWidth, height:50,
margin:{top:0, bottom:0, left:sliderPadX, right:sliderPadX},
translate:{x:opts.buttonsWidth, y:0}
});
//-- legend + body
dcpLegend("#d3content", { id:"d3legend", width:opts.legendWidth, height:opts.bodyHeight, opacity:opts.legendOpacity,
margin:{top:10,bottom:10,left:0,right:0},
translate:{x:0,y:50},
});
var main = svg.append("g")
.attr("id","d3main")
.attr("transform", "translate("+(opts.legendWidth)+","+55+")")
;
var bg = main.append("rect")
.attr("id","d3background")
.attr("width",opts.bodyWidth)
.attr("height",opts.bodyHeight)
;
var body = main.append("g")
.attr("id","d3body")
.attr("width",opts.bodyWidth)
.attr("height",opts.bodyHeight)
share/htdocs/diacollo.js view on Meta::CPAN
//----------------------------------------------------------------------
// d3: bubble: force-drirected graph chart;
// + see https://githu //-- common variablesb.com/mbostock/d3/wiki/Force-Layout (force layout demo)
// + see https://gist.github.com/mbostock/3231298 (collision detection demo)
var bubbleOpacity = 0.9;
function dcpFormatBubble(data, jqXHR) {
//-- parse data
if ( !(data = dcpParseFlat(data,{mode:"bubble"})) ) { return; }
var cfg = d3SetupCommon({legendOpacity:bubbleOpacity});
var width = cfg.bodyWidth;
var height = cfg.bodyHeight;
//-- setup d3 force chart
var psvg = d3.select("#d3body")
.classed("d3chart",true)
.classed("d3force",true)
;
d3.select("#d3main")
.append("title")
share/htdocs/diacollo.js view on Meta::CPAN
// d3: cloud: tag-cloud layout
// + see https://github.com/jasondavies/d3-cloud
var dcpCloudFont = {family:"Impact",weight:"normal",style:"normal"};
//var dcpCloudFont = {family:"Arial",weight:"bold",style:"normal"};
//var dcpCloudFont = {family:"Arial Black",weight:"bold",style:"normal"};
//var dcpCloudFont = {family:"sans-serif",weight:"bold",style:"normal"};
function dcpFormatCloud(data, jqXHR) {
//-- parse data
if ( !(data = dcpParseFlat(data,{mode:"cloud"})) ) { return; }
var cfg = d3SetupCommon({legendOpacity:1});
var width = cfg.bodyWidth;
var height = cfg.bodyHeight;
//-- for old heat-colors
dcpItemSat = 1;
dcpItemVal = 0.9;
//-- setup cloud svg item
var psvg = d3.select("#d3body")
.classed("d3chart",true)
share/htdocs/index.ttk view on Meta::CPAN
<div id="d3icons">
<a id="exportBtn" title="Download SVG snapshot of current data display canvas." onclick="d3exportSvg()"><img src="[% root_dir %]images/download-24px.png"/></a>
<a id="kbicon">
<img src="[% root_dir %]images/keyboard-24px.png"/>
<img id="kbiconx" src="[% root_dir %]images/redx-20px.png"/>
</a>
<a id="curspeed" title="Current playback speed (double-click to reset; (shift+)up/down arrow, (shift+)number key to change)">1x</a>
</div>
<!--
<div id="d3transport"><div id="d3buttons"></div><div id="d3slider"></div></div>
<div id="d3main"><div id="d3legend"></div><div id="d3body"></div></div>
-->
<!--<div id="d3content"></div>-->
</div>
<div id="profileDataChart" style="display:none;"></div>
<div id="profileDataPopup" title="Popup dialog" style="display:none;"></div>
</div>
<!--/div.content-->
<span style="font-family:Impact; color:transparent;">t</span>
[% SET html_foot = root_dir _ "html-foot.ttk" %]
[% PROCESS $html_foot linkbar=0 linkttk="dc-links.ttk" %]
( run in 1.193 second using v1.01-cache-2.11-cpan-49f99fa48dc )