How to apply horizontal break to a d3.js bar chart - charts

I am using Rickshaw (based on d3.js) to plot stacked bar charts. The problem is that the first bar is usually way more higher than the others, ruining the visual feedback.
Using logarithmic scale is (I guess) not an option here, because then the proportions between stacks in a bar will get broken. I wanted to introduce a horizontal break like in following image:
However, I cannot find any out-of-the box feature of Rickshaw or d3.js to do something like this. Any suggestions on how to make one?

This would require quite a bit of additional work. Here's an outline of what you would have to do.
Create two scales, one for the lower part and one for the upper. Set domains and ranges accordingly.
Pass values to the lower scale, capping them at the maximum domain value such that bars that are longer will reach the maximum.
Pass values to the upper scale, filtering those that are lower than the minimum.
You basically need to create two graphs that are aligned with each other to give the impression that there's just one. If you keep that in mind, doing it shouldn't be too difficult.
Here's a quick and dirty proof of concept that uses the linear scale's .clamp(true) to prevent the bars from becoming too long for values outside the domain.

The d3fc-discontinuous-scale component adapts any other scale (for example a d3 linear scale) and adding the concept of discontinuities. These discontinuities are determined via a 'discontinuity provider', which can be used to create one or more 'gaps' in a scale.
For example, to remove a range, you can construct a scale as follows:
var scale = scaleDiscontinuous(scaleLinear())
.discontinuityProvider(discontinuityRange([50, 75]))
Here is a complete example that shows how to use this to create a 'break' in a scale in order to render values that have large gaps in their overall range.
https://bl.ocks.org/ColinEberhardt/b60919a17c0b14d745c881f48effe681

Related

Simulink - how to configure the appearance of a scope

I'm working on generating some figures for a paper from a simulink model, and would prefer to use minimal work to produce them so I'm trying to configure a simulink scope to output the figures I want on its own. The problem is, while I can get colors and such all arranged well, I can't seem to figure out how to modify the spacing between the graphs in a scope showing multiple signals. What I have now looks like the below:
Notice how the two plots have different vertical scales (probably a consequence of having the time scale only on the bottom one), and that there's a large gap of unused space between the plots. This is a concern when trying to publish in a journal, since page space is at a premium and we need to make the information as dense as possible.
So, how can I tweak these margins and formatting? I've tried looking at all the settings I can find, but none seem to affect these parameters.

pie chart but in another shape

I just wanna ask if it is possible to make a pie chart but in another shape.
An example would be say there were two candidates who ran for governor in a state. I would want to show the results in a chart. I want the shape of the chart to resemble the shape of the geographical location of the state.
I did some digging and this is the only one that showed up which may help me(but not really) https://forums.adobe.com/thread/988130
As your adobe thread implies there are (at least) three issues to consider:
1) you want to show the votes each candidate received as a portion of the area of the state. If your state is nearly square, you could overlay a grid and assign each candidate a number of grid cells according to the votes they received. If the grid cells are county or precinct outlines that works even better, but this isn't a pie chart because a pie chart uses a polar coordinate system.
2) if you really must have a pie chart which is polar, consider that the average viewer may not be able to visually integrate the areas to get meaningful results. Further you will have to integrate the area swept out by the sectors of the pie like a radar screen, and this contour integration is made more difficult by the fact that you must do it numerically. This means you must sample the boundary distance as a function of angular displacement from some center of gravity you have chosen, like the state capitol. But depending on the location of the state capitol, your visual could become even more distorted. Idaho comes to mind.
3) a good compromise might be just to overlay a pie chart on top of a silhouette or map outline of the state with appropriate drop shadows and emphasis to make the pie chart pop as well as the state outline. it would certainly be much quicker as well as much more readable.

tableau adjust marks size using number

In Marks, click Size and there pops a slider where I can adjust the size of a shape. But how to accurately control the size, is there some property with numbers to accurately control it? I have two sheets to show something similar and I want to display exactly the same sized shapes.
If you want to ensure 'sizes' are the same across two worksheets, I'd suggest snapping the 'size' setting to the center on both, as this is the easiest option to select. You can then use a measure to set the size, if this is desirable, and then the difference in size will be relative on both worksheets.
There isn't a numerical value override for the size slider.
Ben is correct, there isn't yet a numerical value override for the slider. You can use parameters with Min/Max/Sum etc. and a variable to somewhat change the sizes but they have to have multiple entries per line. It is unfortunate that Tableau still doesn't get that people want both a 'relative' sizing system that uses numbers from the dataset and a 'static' sizing system that allows for shapes to be set to '11px' or something along those lines. Yes, you can control that kind of in the dashboard with a vertical and fill entire box etc; but that doesn't address the very real scenario where you want a user to be able to re-size on the fly. Just my two cents.
I ran into this today. Very annoying. Need to keep shapes the same size across all worksheets and therefore same on dashboard.

SSRS sparkline with small difference in values

I have created a sparkline in SSRS. Since the values are small i get a straight line graph How do i improve the sensitivity of the graph.
the difference is like for every month
60.06
60.40
60.14
You need to look at the Sparkline Vertical Axis Properties.
Testing with data like yours and a simple Tablix/Sparkline I get results similar to yours:
Opening the Vertical Axis Properties I can see Always include zero is checked by default:
Unchecking this option has a major effect on the sparkline:
So this is one way of doing it. Other than that changing the Minimum and Maximum values here will also have an effect - you just need to play around and find the right combination for you.

Algorithm for laying out images of different sizes in a grid-like way

I'm trying to lay out images in a grid, with a few featured ones being 4x as big.
I'm sure it's a well known layout algorithm, but i don't know what it is called.
The effect I'm looking for is similar to the screenshot shown below. Can anyone point me in the right direction?
UPDATED
To be more specific, lets limit it to the case of there being only the two sizes shown in the example. There can be an infinite number of items, with a set margin between them. Hope that clarifies things.
There is a well-known layout algorithm called treemapping, which is perhaps a bit too generic for your specific problem with some images being 4x as big, but could still be applicable particularly if you decide you want to have arbitrary sizes.
There are several different rectangular treemap algorithms, any of which could be used to visualise photos. Here is a nice example, which uses the strip algorithm to lay out photos with each size proportional to the rating of the photo.
This problem can be solved with a heatmap or a treemap. Heatmaps often use space-filling-curves. A heatmap reduces the 2d complexity to a 1d complexity. A heatmap looks like a quadtree. You want to look for Nick's hilbert curve quadtree spatial index blog.