hkang1 / hermes Goto Github PK
View Code? Open in Web Editor NEWA lightweight canvas-based parallel coordinates chart library.
License: ISC License
A lightweight canvas-based parallel coordinates chart library.
License: ISC License
allowing the chart to setup and render with dimension and options first and setting data at a later time to improve usability
primarily for the truncated labels but possibly usable for other labels if needed in the future
for on-white theme, dark semi-transparent background with white text
can consider other styles for dark mode in the future
currently the vertical axis go from min to max from a top down layout, but the more common case is the reverse. Add support to default to the reverse layout and config option to be able to reverse it back when needed, on a per axis basis.
turns out the layout logic was not quite correct especially with the padding
To avoid the chart from breaking, start by filtering out NaN, Inf and -Inf series (any data series that contain any of these values).
In NiceScale
when setting Min/Max values, in the case of creating a range from a single value, it uses Math.log2
to find the nearest based 2 value and uses that as the range values. It fails when the single value is a negative value.
if the target element is 0 for width or height, the chart gets into an infinite loop of constantly setting the size of the inner canvas and then triggering the element to grow due to the inner canvas "filling out".
particularly all the config.style
options
could be good to make the edge ticks always visible (not just during hover) when there are no intermediate ticks.
The dragging of the axis to create a filter dynamically filters when the filter is created in a positive direction (top to bottom for horizontally configured chart, left to right for vertically configured chart), but not in the reverse direction.
The use case of being able to change the color or line properties for each individual series, as opposed to painting them according to a single color or a color scale.
Implementation notes
Key motivations
Downsides
The logic of when and where to shift the dragged dimension is not as responsive. The logic currently depends on an incremental change in positioning, which is really not guaranteed with throttled mousemove
. Update to be able to accurately reflect the dragged dimension position regardless of where the mouse position is.
you need to size the canvas width/height for physical pixels (also make sure to round those dimensions), and then set the css style to logical pixels. you'll also need to adjust the font size from logical to physical before setting it on the ctx.
so for a requested width of 1000 your canvas.style.width
should be 1000 but canvas.width
should be Math.round(1000 * devicePixelRatio)
.
you can verify if it works as expected by zooming the browser and refreshing (without adjusting dpi settings on your display)
Approach:
To minimize performance issues with having a lot of charts with multiple event listeners, the first step is to add support for temporarily removing event listeners and adding them back later when needed. In the future, based on whether the chart is in visible viewport or not, the chart can dynamically disable and enable event listeners.
The filters
getting returned are the references to the same object, instead copies of them should get returned so they don't accidentally get changed, and also the frameworks that are dependent on the object references will properly handle the changes.
Currently, hovering over filters won't change the axis to the hover state, and vice versus. Same with click events.
Connect the two so the visual styles can be connected, which makes more sense from a UX standpoint.
For horizontal charts, the filter values (p0
> p1
and value0
> value1
) are reversed.
when logBase != 10
, the tick labels have lots of decimals. Would be nice to format them as logBase^1
, logBase^2
, logBase^3
....
this upsets me ๐คฃ
Lines 58 to 60 in 94c134f
you can probably get away with something much cheaper ;)
assign()
here does a deep copying merge, with an Array.slice()
optimization for arrays of plain values.
(no support for Date, Regex, Map, Set, or other fancy stuff though)
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.