I'm trying to apply readable labels to a D3 Streamgraph that is rendered using completely dynamic data - various different datasets that are evolving over time from live data and the controls offered to manipulate what is shown too. All this works well - the problem is how to clearly label the streams - short of using a legend.
The great variation of hues and luminance needed makes choosing readable styling for labels that float over the graph extremely tricky, particularly with the limited SVG styling available cross platform and that the labels will inevitably overlap on the background sometimes too. For instance black coloured labels 'work' but it's hard to read sometimes over the top of darker colours (which we really need to ensure a good range)...
Anyone done anything similar/addressed same challenge? I'm currently pondering using a legend instead.
A couple of ideas may help:
Add a background rectangle around the text with opacity set to 0.7 (the color being the same as the data series). This helps make the text pop. For the border of the rectangle, use d3js rgb.darker or rbg.brighter.
var pathStroke = d3.rgb( item.color ).darker(1.4).toString()
For preventing overlapping labels, I can think of two solutions - both hard. Use d3js Force Layout or write your own layout code. We ended up writing our own layout code for tooltips in d3-traits. See tooltips.js and layout.js.
d3.trait.layout.verticalAnchorLeftRight( foci, self.chartRect())
layout.js does have some general purpose and very flexible layout routines. It will layout rectangles within a bounding box avoiding overlap and determines if the labels need to be left or right justified. If the origins of the rects are toward the right edge of the bounding box, they are right justified.
Related
I've been asked to build something similar to this so that customers can draw basics shapes of kitchen tops. Similar to that in the image below but also have dimensions.
It looks like konva has support for basic shapes like rectangle and circle etc and it also includes a transformer which allows for resizing. However, I think if I want to build a custom shape like the one in green and have individual sizing i.e. resize each individual line. I am going to have to build something myself.
I was hoping someone could point me in the right direction. I have seen an example where someone has used a "line" class which takes a series of points and then sets the attribute to closed which fills in the shape. Obviously I would need to extend this to allow the custom resizing. However, Im not sure this is the correct path to head down?
Any suggestions?
.
How about using rectangles and having an option to snap them together. It should be fairly simple to do the edge detection and snapping. Then show the result as a Konva.Line around the perimeter.
Then you can show all the control handles for the rectangles except those on the sides where another Rect has joined.
I couldn't find an example of a block of text not rendered to a rectangular area.
Ideally, it would be nice if ID2D1HwndRenderTarget.DrawText() would let me provide a polygon Geometry instead of a rectangle.
I've tried adding a Direct2D Layer with contentBounds, thinking it might skip rendering text within those layers. It didn't work as expected, it just blocked render to the area still emulating text underneath.
I've also tried applying a rectangular area to hwnd window itself. It too blocked render but didn't shift text.
IDWriteTextLayout only supports rectangular layouts, but DirectWrite supports any shape you can think of by using the lower level functions (text analysis, glyph measurement, glyph shaping). It's no easy task to write your own text layout from scratch, but I wrote a Windows 7 SDK sample containing a "FlowLayout" that demonstrates a circle and a few other simple shapes. It doesn't take arbitrary geometry, but you may be able to adapt it to your needs (see FlowLayoutSource::GetNextRect for computing the width of each line).
https://github.com/pauldotknopf/WindowsSDK7-Samples/tree/master/multimedia/DirectWrite/CustomLayout
DirectWrite only supports rectangular layouts, so you can't get anything more complicated automatically. You'll have to implement layout functionality yourself if you want it to work differently. Clipping arguments, like you already observed, have nothing to do with text layout.
Is it possible to change x-axis label orientation like marked area on the screenshot? I was trying rotate labels with afterCalculateTickRotation but they weren't flipped. Mirror option doesn't work also.
Example code
I managed to do what you are asking for but it's not beautiful because chart.js lacks support to do it properly. So I solved it with some hard coded padding.
https://codesandbox.io/s/vue-template-4ygr1
It's the minRotation and maxRotation you should work with. The labels anchoring point should shift when the rotation goes below zero but they don't. Instead they rotate into the chart but this can be avoided with padding.
A side effect of the padding is that the legend placement broke so i put it in the top instead.
Another unwanted behavior is that the text is aligned to the right. There is an open issue about that: https://github.com/chartjs/Chart.js/issues/4193
I'm using jqPlot to render a graph with zooming enabled.
For example:
http://www.jqplot.com/tests/zooming.php
In the example above, when you make a selection on the graph, the graph canvas is painted in grey (apart from the selection). Does anyone know how to customise this colour?
I've been unable to find which jqPlot CSS option to tweak in jquery.jqplot.css.
I am afraid that no css is involved in this particular process of painting. Though there is one class which can point you in the right direction. My suspect is the jqplot-zoom-canvas class. Though I think that the painting is defaulted to grey.
Thus, I see only two options:
Changing the painting directly in the jqplot script.
Or on painting of zoom selection start change the colour of the jqplot-zoom-canvas then change it back to default on painting zoom stop. But I do not know if there are hooks for these sort of events. Therefore, you might actually be left with only the option no. 1.
I am developing a GUI frontend application in MATLAB. It's becoming quite complex these days, but as a showcase of the problem I'm having, I created a simple GUI containing an axes and a button. I display a surf(peaks) plot in the axes, and the buttonpress adds a colorbar('location','southoutside') to the plot. The axes stretch and overlap the boundaries I set for the object in GUIDE. Resizing them via set(handles.axes1,'Position',[...]) doesn't help. Any insights on how to compensate for this will be greatly appreciated.
As a side note, I'd like to add that maintaining an ever-growing application (especially a graphically-oriented one) in MATLAB is absolutely tedious if you want the widgets to do some more complex stuff. Great for creating something simple quickly, but don't get stuck building on that it if you can...
Apparently there's a property for the axes widget called OuterPosition which defines the extents of the axes containing all other objects surrounding the axes (labels, ticks, colorbar). Setting the ActivePositionProperty property to 'outerposition' causes the position to be preserved during scaling to be the outer position. Also, setting the Units property to 'normalized' allows for automatic scaling with respect to resizing the window. Oh joy. ;)