Based on this example:
https://cdn.rawgit.com/hkelly93/d3-relationshipGraph/master/examples/index.html
D3 should allow me to create this chart and define colors and thresholds for when values change color. The function accepts some custom settings:
var graph = d3.select('#graph').relationshipGraph({
maxChildCount: 10,
valueKeyName: 'Story title',
thresholds: [6, 8, 10],
colors: ['red', 'yellow', 'green'],
showTooltips: true
})
But I'm not getting a graph with three colors when I load data fitting into all 3 ranges. I want 0-6 to appear red, 7-8 to appear yellow, and 9-10 to appear green. Here's the data loaded (excerpt):
[
{"parent": "2012-October", "organization": "WEWASAFO", "value": 10, "Story title": "NUTRITION"},
{"parent": "2012-April", "organization": "Jitegemee", "value": 5, "Story title": "Life in the street"},
{"parent": "2011-May", "organization": "KENYA YOUTH BUSINESS TRUST (KYBT)", "value": 2, "Story title": "BUSINESS"}
]
Everything else parses correctly, except combining custom colors an custom thresholds on the same chart. Either one alone works, but not both together.
The source repo is here with some docs:
https://github.com/hkelly93/d3-relationshipgraph
From that documentation:
thresholds: [100, 200, 300], // The thresholds for the color changes. If the values are strings, the colors are determined by the value of the child being equal to the threshold. If the thresholds are numbers, the color is determined by the value being less than the threshold.
colors: ['red', 'green', 'blue'], // The custom color set to use for the child blocks. These can be color names, HEX values, or RGBA values.
It doesn't explicitly state that the child colors correspond to the order that the thresholds appear. And all blocks appear red in this example.
I tested the code here: https://jsfiddle.net/cgrx3e9m/
This turned out to be a bug in the module itself. I notified the author and he fixed the way it sorts thresholds so it matches up with corresponding colors now.
Related
I try to implement OCR in a really noisy image. There is also a low contrast between the number and background. I have tried to use some median filter to smooth background noise and edge enhancement method but without sensible effect. Does anyone have something similar task to do? What filter should I use?
Number with background's noise and low contrast:
EDIT (ADDED OVEREXPOSED PICTURES)
If you are able to do the image acquisition again there are few options:
Try to overexpose the image, which might have a positive effect on the segmentation of number from the background. I just wrote a post about it: https://www.linkedin.com/pulse/making-overexposure-work-you-part-i-vladimir-perkovic
Since you have the Halcon tag, I assume you have access to Halcon. Take a look at example ocr_embossed_photometric_stereo.hdev which shows how to read embossed letter using lights from multiple directions.
In case that you have to work with only existing images the best I've got is using the Maximally Stable Extremal Regions (MSER) in Halcon:
rgb1_to_gray (Image, GrayImage)
segment_image_mser (GrayImage, MSERDark, MSERLight, 'dark', 600, 60000, 1, 'may_touch_border', 'false')
Actually this shared images' resolutions are very low (nearly 190x160). If real images' resolutions are higher than this images, you can get better results. I tried some codes on images. I found digits as "6" and "&".
Screenshot is here:
https://drive.google.com/open?id=1I1s79hwcon8IdxC6peRxMbaB4I2taNFr
Code is here:
dev_get_window (WindowHandle)
set_display_font (WindowHandle, 18, 'mono', 'true', 'false')
**reading image
read_image (Pnk9h, '/home/emin/Desktop/pNk9h.png')
get_image_size (Pnk9h, Width, Height)
**bluring image but preserve the edges
bilateral_filter (Pnk9h, Pnk9h, ImageBilateral, 9, 10, [], [])
**sharpening image
emphasize (ImageBilateral, ImageEmphasize, 7, 7, 5)
**processes about finding digits
var_threshold (ImageEmphasize, Region, 150, 150, 0.2, 2, 'dark')
var_threshold (ImageEmphasize, Region2, 150, 150, 0.2,5, 'light')
fill_up (Region, RegionFillUp)
difference (RegionFillUp, Region, RegionDifference)
opening_circle (RegionFillUp, RegionOpening, 3.5)
connection (RegionOpening, ConnectedRegions)
sort_region (ConnectedRegions, SortedRegions, 'first_point', 'true', 'column')
select_shape (SortedRegions, SelectedRegions, ['area','row','row1','row2'], 'and', [150,Height/2-20,10,0], [99999,Height/2+20,Height,Height-10])
smallest_rectangle1 (SelectedRegions, Row1, Column1, Row2, Column2)
gen_rectangle1 (Rectangle, Row1, Column1, Row2, Column2)
intersection (Rectangle, Region, RegionIntersection)
opening_circle (RegionIntersection, RegionOpening1, 2)
area_center (RegionOpening1, Area, Row, Column)
union1 (RegionOpening1, RegionUnion)
**painting image for reading robustly
paint_region (RegionUnion, ImageEmphasize, ImageResult, [0,0,0], 'fill')
complement (RegionUnion, RegionComplement)
paint_region (RegionComplement, ImageResult, ImageResult, [255,255,255], 'fill')
**reading digits
read_ocr_class_cnn ('Universal_0-9+_NoRej.occ', OCRHandle3)
do_ocr_multi_class_cnn (SelectedRegions, ImageResult, OCRHandle3, Class3, Confidence3)
dev_disp_text (Class3, 'image', Row2+10, Column2-50, 'blue', [], [])
Fiddle: https://jsfiddle.net/h7zf55b0/
I have a graph I am trying to design with the given data. The problem is I am getting category collision as its possible that multiple data points have the same date (which I use as the category axis).
{
'data': "18.46",
'date': "2015-12-31T09:36:00.0000000Z",
'type': "bid"
},
{
'data': "40.3918",
'date': "2015-12-31T09:36:00.0000000Z",
'type': "ask"
},
amcharts is handling this by drawing the columns over each other as shown in the fiddle.
Is there a way to make amcharts put these columns next to each other? Or stack them?
Ideally I want to be able to specify 'type' as a grouped element or something, so that the columns are labeled "40.3918 ASK 9:36am"
On date-based category axis, the chart tries to retain natural time scale. So if you have several columns on the same category, it draws them over each other.
You can disable this functionality by setting equalSpacing: true in your categoryAxis.
This way the chart rather than putting columns where they are supposed to be in time, will put each data point consecutively, regardless of the order and distance in time between them.
"categoryAxis": {
"gridPosition": "start",
"parseDates": true,
"equalSpacing": true,
"minPeriod": '60ss',
"axisAlpha": 0,
"gridAlpha": 0,
"position": "left"
}
As for what is shown in the balloons, you can use balloonText or, if you need some very custom functionality to generate balloon data balloonFunction.
Another option would be to combine those data points into same-category data points, as well as define a graph for each type:
https://jsfiddle.net/h7zf55b0/1/
I have used CCC Heat Grid in CDE to create a bubble chart with bubbles of different colors. My data set has only 6 values: (1, 1.1, 2, 2.1, 3, 3.1). I have sizeRole property to "value" so that the size of the bubble varies based on the magnitude of these six values. Alternative, I could have set colorRole property to "value". I have set three colors: green (1), yellow (2) and red (3).
Now, what I want to have 1 as green, 2 as yellow and 3 as red; and biggest constant size for 1.1, 2.1 and 3.1. The values 1.1, 2.1 and 3.1 represent alarms in my data set, so I want them to be of biggest size bubble or some other differentiating visual element.
I tried the following in pre-execution but no luck
function changeBubbles(){
var cccOptions = this.chartDefinition;
// For changing extension points, a little more work is required:
var eps = Dashboards.propertiesArrayToObject(cccOptions.extensionPoints);
// add extension points:
eps.bar_shape = function getShape(){
var val = this.scene.vars.value.value;
if(val == 1.1 || val == 2.1 || val == 3.1){
return 'cross';
}
else {}
};
// Serialize back eps into cccOptions
cccOptions.extensionPoints = Dashboards.objectToPropertiesArray(eps);
}
How can we achieve this?
I hope the answer is still relevant, given that this is a late response.
To use bubbles you should have useShapes: true.
You can set a different constant shape by using the shape option. For example, shape: "cross".
To have the bubble size be constant, you should set the "sizeRole" to null: sizeRole: null. Bubbles will take all of the available "cell" size.
Then, the "value" column should be picked up by the "colorRole", but to be explicit, specify: colorRole: "value".
By default, because the color role will be bound to a continuous dimension ("value"), the color scale will be continuous as well.
To make it a discrete scale, change the "value" dimension to be discrete:
dimensions: {
"value": {isDiscrete: true}
}
Finally, to ensure that the colors are mapped to the desired values, specify the "colorMap" option:
colorMap: {
"1": "green",
"2": "yellow",
"3": "red"
}
That's it. I hope this just works :-)
I am using nvd3 line chart and I would like that points under certain y value (let's say y=4) will be red, and above that they will be their nvd3 color (orange, etc..)
How can I achieve this kind of effect?
This can be done by adding a color value to the points of the linechart data.
Therefore, instead of having just x and y objects:
{...{"y": "0.05885", "x": "1692"}, {"y": "0.05906", "x": "1693"}...}
You have to add a color value:
{...{"y": "0.05885", "x": "1692", "color": "#ff0000"},
{"y": "0.05906", "x": "1693","color": "#ff0000"}...}.
This can then be accessed and changed as you normally would.
For the required data points, you can make the color e.g. red as needed.
EDIT:
If that doesn't work, i don't think its possible, nicely. The problem is, is that the line itself is a actual line and its one element. If you look into the generated html code, you will see its a single element. Therefore, the line can only have a single colour property. What you can do is set that to a gradient link. Making the colour property be e.g.stroke: linear-gradient(to right, red , blue);, ofcourse with stops and starts when needed, look at this: link.
The way you access the line element is in css:
#graphid g.nv-series-0 path.nv-line { //0 is the series number
#color:red; //old
stroke: linear-gradient(to right, red , blue); //new
}
I am trying to implement a horizontal bar graph using jqplot library.
In my case, some of the bars of the graph might show extraordinary spike so for example if the 3 bars of my graph have data value of 150(max), the spiked bar might have a data value of 1000.
To accomodate this requirement, I went through the documentation of jqplot and found out that they have something called "breakpoint" to break the axes at some particular place.
http://www.jqplot.com/docs/files/jqplot-linearAxisRenderer-js.html#$.jqplot.LinearAxisRenderer.breakPoints
Now suppose my data for the series looks like this :
[100, 150, 50, 250, 1200, 100]
How in the above case can i make sure that jqplot inserts a breakpoint after 250 and continues the axes ticks at 1200?
[Edited] Ok, so after using the below code I am able to get the breakpoints working:
chart.axes.xaxis.breakPoints=[10,100];
chart.replot();
(i also went through the jqplot source and found out that for breakpoints to work, we need to manually set the ticks, which I did)
But my original problem is still at large!
Suppose my series looks like
[100, 200, 300, 20000]
In this case, even if I use breakpoints, my 3 bars which are of considerably lesser weight seems very tiny as compared to the 4th bar (20000 weight)
this makes the graph unreadable.
Can some one please suggest a way out of this?
"How to implement breakpoints": A replot of data as mentioned above, is not the right way to use breakpoints:
chart.axes.xaxis.breakPoints=[10,100]; chart.replot();
Hava a look on that piece of code, I solved the breakpoint issue:
Having all data values of my barchart < 200 exept of one bar value > 850 i would like to set a breakpoint between 250 and 850.
And here it's how this can be done:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
ticks: [0,50,100,150,200,250,275,825,850,900,950],
tickOptions: {
formatString: '%.0d'
},
renderer: $.jqplot.LinearAxisRenderer,
rendererOptions: {
breakPoints: [275,825],
breakTickLabel: "≈",
forceTickAt0: true
}
}
Important:
Use the LinearAxisRenderer.
add your ticks manually in an array.
set the breakpoint with the rendererOptions.
The Array with the ticks, HAS TO CONTAIN the values, which you like to set the breakpoints in the rendererOptions.
Regards
Matthias
P.S.: I also have a picture of the graph, but you don't allow me to post images until I get 10 reputations.