Commit 7ba65c29 authored by Sylvain Schmitz's avatar Sylvain Schmitz

extract examples in the flows

parent fb5f6b8e
......@@ -7,6 +7,8 @@ body {
margin: 1em auto 4em auto;
position: relative;
width: 900px;
font-family: sans-serif;
color: #333;
}
svg {
......@@ -46,8 +48,28 @@ path.inactive, #circle:hover path.fade {
#matrix text { fill: #333; }
#matrix text.active { fill: red }
#matrix line { stroke: #fff; }
#matrix .row rect:hover { stroke: #333; stroke-width: .25pt; }
#matrix .row rect:hover { stroke: #333; stroke-width: .25pt; cursor: pointer; }
#log {
font: 10px sans-serif;
color: #333;
opacity: 0;
transition: opacity 0.5s ease-in-out;
width: 200px;
top: 450px;
left: -60px;
background-color: white;
position: absolute;
/*-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
border:1px solid #999;
-webkit-box-shadow: #B3B3B3 2px 2px 2px;-moz-box-shadow: #B3B3B3 2px 2px 2px; box-shadow: #B3B3B3 2px 2px 2px;*/
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
margin-bottom: 50px;
}
#log ul { padding-left: 0px; }
#log li { margin-bottom: 3px; }
</style>
<h1>Outflows in @BENCHMARK@</h1>
......@@ -57,7 +79,8 @@ path.inactive, #circle:hover path.fade {
the colour indicates the most important flow.
<p>Built with <a href="http://d3js.org/">D3</a>.
<div id="log" style="opacity: 0;"></div>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
......@@ -132,19 +155,15 @@ function matrixgraph(fragments, matrix, maxentries) {
var x = d3.scaleBand().range([0, matrixw]),
z = d3.scaleLinear().range([0.09,1]).clamp(true);
// Compute index per node.
fragments.forEach(function(d, i) {
mx[i] = d3.range(n).map(function(j) { return {x: j, y: i, z: 0}; });
});
// Convert matrix; count character occurrences.
var maxdiff = 0;
for (var i = 0; i < n; i++)
for (var j = 0; j < n; j++) {
maxdiff = (maxdiff < matrix[i][j])?
matrix[i][j]: maxdiff;
mx[i][j].z += matrix[i][j];
maxdiff = (maxdiff < matrix[i][j].z)?
matrix[i][j].z: maxdiff;
matrix[i][j].x = j;
matrix[i][j].y = i;
}
z.domain([0, maxdiff]);
......@@ -165,7 +184,7 @@ function matrixgraph(fragments, matrix, maxentries) {
.style("fill", "#fbfbfb");
var row = matrixsvg.selectAll(".row")
.data(mx)
.data(matrix)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
......@@ -189,7 +208,7 @@ function matrixgraph(fragments, matrix, maxentries) {
});
var column = matrixsvg.selectAll(".column")
.data(mx)
.data(matrix)
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
......@@ -234,13 +253,35 @@ function matrixgraph(fragments, matrix, maxentries) {
.style("fill-opacity", function(d) { return z(d.z); })
.style("fill", function(d) { return (parseInt(fragments[d.x].entries) > parseInt(fragments[d.y].entries)) ? fragments[d.x].color : fragments[d.y].color; })
.on("mouseover", mouseovercell)
.on("mouseout", mouseout);
.on("mouseout", mouseout)
.on("mouseup", mouseclick);
cell.append("title").text(function(d) {
return "| " + fragments[d.y].name
+ " \\ " + fragments[d.x].name
+ " | = " + d.z + " entries";
+ " | = " + d.z + " entr" + ((d.z > 1)? "ies": "y");
});
}
function mouseclick(p) {
var text = p.examples.length + " entr"
+ ((p.examples.length > 1)? "ies": "y");
if (p.examples.length < p.z)
text += " out of "+ p.z;
text += " in <span class=\"fragment\" style=\"color: "+fragments[p.y].color+"\">"+ fragments[p.y].name
+"</span> but not in <span class=\"fragment\" style=\"color: "+fragments[p.x].color+"\">"+ fragments[p.x].name
+"</span>:";
var log = d3.select("#log")
.style("opacity", 1)
.data([p])
.on("mouseover", mouseovercell)
.on("mouseout", mouseout);
log.select("p").remove();
log.select("ul").remove();
log.append("p")
.html(text);
var list = log.append("ul")
p.examples.forEach(function (d) { list.append("li").text(d); });
}
function mouseovercell(p) {
d3.selectAll(".row text").classed("active", function(d, i) { return i == p.y; });
......@@ -310,7 +351,7 @@ function chordgraph(fragments, matrix, maxentries) {
while (++i < layout.n) {
x = 0, j = -1;
while (++j < layout.n) {
x += layout.matrix[i][j];
x += layout.matrix[i][j].z;
}
groupSums.push(x);
subgroupIndex.push(d3.range(layout.n));
......@@ -324,7 +365,7 @@ function chordgraph(fragments, matrix, maxentries) {
if (layout.sortSubgroups) {
subgroupIndex.forEach(function(d, i) {
d.sort(function(a, b) {
return layout.sortSubgroups(matrix[i][a], matrix[i][b]);
return layout.sortSubgroups(matrix[i][a].z, matrix[i][b].z);
});
});
}
......@@ -341,7 +382,7 @@ function chordgraph(fragments, matrix, maxentries) {
while (++j < layout.n) {
var di = groupIndex[i],
dj = subgroupIndex[di][j],
v = layout.matrix[di][dj],
v = layout.matrix[di][dj].z,
a0 = x,
a1 = x += v * l;
subgroups[di + "-" + dj] = {
......
......@@ -4,7 +4,9 @@
<xsl:output method="text"/>
<xsl:param name="fragments"
select="('xpath-1.0-core.rnc', 'xpath-1.0-downward.rnc', 'xpath-1.0-forward.rnc', 'xpath-1.0-vertical.rnc', 'xpath-patterns.rnc', 'xpath-1.0-data.rnc', 'xpath-1.0-eval.rnc', 'xpath-3.0.rnc', 'xpath-modal.rnc', 'xpath-hybrid.rnc')"/>
select="('xpath-2.0-core.rnc', 'xpath-1.0-core.rnc', 'xpath-1.0-downward.rnc', 'xpath-1.0-forward.rnc', 'xpath-1.0-vertical.rnc', 'xpath-patterns.rnc', 'xpath-1.0.rnc', 'xpath-1.0-eval.rnc', 'xpath-hybrid.rnc')"/>
<xsl:param name="nexamples" select="15"/>
<xsl:template match="/">
<xsl:variable name="root" select="/"/>
......@@ -47,11 +49,9 @@
</xsl:call-template>
</xsl:for-each>
<xsl:text>]</xsl:text>
<xsl:choose>
<xsl:when test="$source != $fragments[last()]">
<xsl:text>,</xsl:text>
</xsl:when>
</xsl:choose>
<xsl:if test="$source != $fragments[last()]">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:template>
<!-- one entry of the matrix -->
......@@ -59,12 +59,22 @@
<xsl:param name="source"/>
<xsl:param name="target"/>
<xsl:param name="root"/>
<xsl:value-of select="count($root//xpath[validation[@schema=$source and @valid='yes'] and validation[@schema=$target and @valid='no']])"/>
<xsl:choose>
<xsl:when test="$target != $fragments[last()]">
<xsl:text>,</xsl:text>
</xsl:when>
</xsl:choose>
<xsl:variable name="examples" select="$root//xpath[validation[@schema=$source and @valid='yes'] and validation[@schema=$target and @valid='no']]"/>
<xsl:text>{ "z": </xsl:text><xsl:value-of select="count($examples)"/>
<xsl:if test="$examples">
<xsl:text>, "examples": [</xsl:text>
<xsl:for-each select="$examples[position() &lt;= $nexamples]">
<xsl:text>"</xsl:text><xsl:value-of select="current()/query"/><xsl:text>"</xsl:text>
<xsl:if test="position() != last() and position() &lt; $nexamples">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:for-each>
<xsl:text>]</xsl:text>
</xsl:if>
<xsl:text> }</xsl:text>
<xsl:if test="$target != $fragments[last()]">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:template>
<!-- one fragment -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment