eox-a / d3.timeslider Goto Github PK
View Code? Open in Web Editor NEWA time slider based on D3.js
License: MIT License
A time slider based on D3.js
License: MIT License
When the WMS protocol is used the time-slider tries to incorrectly display the products' IDs on mouse-over and zoom-to-extent on mouse-click. The IDs and extents are not know for items read from the WMS getCapabilities response.
The time-slider should be able to display coloured ticks on time-line for the items of the displayed dataset collections.
When activating and deactivating a layer the displayed point and lines move up on each activation until they are no longer visible in the timeslider.
It should be possible to reset time-slider view to its time range bounds at any time and not only for the original time-slider view.
Allow change of the current time-slider's time range bounds to a new value. Need in cases of multiple dataset collections with different time-spans.
I had a look at how cubism.js displays what the time is where the mouse is, which looks pretty good to me. It can be seen here:
http://square.github.io/cubism/
It seems he has written a thin wrapper for the d3 axis object which i think we could reuse. It can be found here:
https://github.com/square/cubism/blob/master/src/axis.js
The code i think is of interest is the one that follows:
context.on("change.axis-" + id, function() {
g.call(axis_);
if (!tick) tick = d3.select(g.node().appendChild(g.selectAll("text").node().cloneNode(true)))
.style("display", "none")
.text(null);
});
context.on("focus.axis-" + id, function(i) {
if (tick) {
if (i == null) {
tick.style("display", "none");
g.selectAll("text").style("fill-opacity", null);
} else {
tick.style("display", null).attr("x", i).text(format(scale.invert(i)));
var dx = tick.node().getComputedTextLength() + 6;
g.selectAll("text").style("fill-opacity", function(d) { return Math.abs(scale(d) - i) < dx ? 0 : 1; });
}
}
});
As the title says, the time-slider is not able coop with collection name containing one or more colon characters :
.
If, in the client, a layer with the above described document is selected, the time slider crashes (reported by the browser console) and either it does not pop-up (if it is supposed to be displayed) or does not show any tick for the selected layer (if already displayed).
This pose a serious issue is it prevents use of URNs as collection identifies.
Upper halve for selection works as expected, bottom halve should allow dragging clicking everywhere not only on labels. Mouse over should be hand symbol, while dragging closed hand symbol.
While it is possible to limit zooming, user can still pan to periods outside the valid area. It would be great to limit panning as well.
This happens when selecting an entry with no duration/same start and stop. It should still be visible somehow what is selected on the time slider.
Sometimes it's difficult to correctly interpret the labels. Right now the start of time periods are labelled. I'd propose to investigate labelling periods instead maybe using some sort of a dashed background.
There is apparently a bug in the time-slider which breaks the time-slider in Firefox browser (v18) after using it (zooming in/out and moving time-line forth and back, brush changes and browser window resizing) for some time.
The effect starts by small abrupt misalignments in the displayed data-items, data-ticks, and time-line ticks.
Once it appears, soon or later, all the displayed items disappear leaving just an empty time-slider widget with single black horizontal line across.
This bug appears randomly and no obvious cause has been observed.
Seems to be a styling issue, the slider does not display correctly and is not functional
When setting the brush through the select method, center and zoom the timeslider to make sure the new brush selection is visible
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.