Commit 037d449f authored by Lars Bilke's avatar Lars Bilke
Browse files

Caption for time chart.

parent 4b0a6b9e
Pipeline #20 passed with stages
in 1 minute
......@@ -26,4 +26,9 @@ span.button {
.legendOrdinal, .legendMean, .small {
font-size: small;
}
\ No newline at end of file
}
.legendMean rect {
fill:white;
stroke:black;
opacity:0.8;}
\ No newline at end of file
......@@ -229,7 +229,7 @@ d3.json("data/data-xyt.json", function (error, data) {
var timeSvg = timeDiv.append("svg")
.attr("width", width / 2 - margin.left - margin.right)
//.attr("width", "100%")
.attr("height", 30 + margin.top + margin.bottom)
.attr("height", 40 + margin.top + margin.bottom)
.append("g")
.attr("class", "time")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
......@@ -287,6 +287,13 @@ d3.json("data/data-xyt.json", function (error, data) {
.attr("transform", "translate(-.5," + 20 + ")")
.call(d3.axisBottom().scale(timeScale));
timeSvg.append("text")
.attr("transform",
"translate(" + (width/4 - margin.left - margin.right) + " ," + (40 + margin.top) + ")")
.attr("class", "small")
.style("text-anchor", "middle")
.text("Time");
var controls = timeDiv.append("div").attr("class", "controls");
controls.append("span").html(fontawesome.icon(faStepBackward).html)
......@@ -315,25 +322,28 @@ d3.json("data/data-xyt.json", function (error, data) {
});
// legend
var legendDiv = d3.select("body").append("div").attr("style", "display:inline-block;");
var legendSvg = legendDiv.append("svg")
.attr("width", 350)
.attr("height", 60 + margin.top + margin.bottom)
.append("g")
.attr("class", "time")
.attr("transform", "translate(" + margin.left + "," + (margin.top + 10) + ")");
legendSvg.append("g")
// var legendDiv = d3.select("body").append("div").attr("style", "display:inline-block;");
// var legendSvg = legendDiv.append("svg")
// .attr("width", 350)
// .attr("height", 60 + margin.top + margin.bottom)
// .append("g")
// .attr("class", "time")
// .attr("transform", "translate(" + margin.left + "," + (margin.top + 10) + ")");
svg.append("g")
.attr("transform", "translate(830, 20)")
.attr("class", "legendMean");
var meanScaleColor = d3.scaleSequential(d3.interpolateViridis)
.domain(meanRange);
var legendMean = legend.legendColor()
.title("Concentration [0, max(mean) + 1*max(std)]")
.shapeWidth(30)
.cells(10)
.orient("horizontal")
//.title("Concentration [0, max(mean) + 1*max(std)]")
.title("concentr.")
.ascending(true)
.shapeWidth(20)
.cells(8)
//.orient("horizontal")
//.labelFormat(".1")
.labels(function ({i, genLength, generatedLabels}) {
if (i === 0 || i === genLength-1)
......@@ -342,7 +352,7 @@ d3.json("data/data-xyt.json", function (error, data) {
})
.scale(meanScaleColor);
legendSvg.select(".legendMean").call(legendMean);
svg.select(".legendMean").call(legendMean);
// TODO: histogram
//var hist = histogram(data.C_std, 300, 250);
......
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