I have a "real space" plot where I'm visualizing planetary orbits. I would like to force square x- and y-ticks such that I'm looking at a square grid on which the orbits are plotted. I've tried setting ticks, tickSize, and minTickSize all to 1 in the options, but this didn't work. (Note that the tick size doesn't necessarily have to be 1.) In flot chart ticks lines not uniform, there is someone trying to do something similar, but this seems to be pretty specific to EKG charts. Alternatively, is it possible to turn off auto-scaling? I wonder if this would accomplish what I'm after.
When your chart is square and has the same min-/max-values for both axes you get a square grid automatically. No need to set any of the tick options. See this example fiddle.
var options = {
xaxis: {
min: 0,
max: 10
},
yaxis: {
min: 0,
max: 10
}
};
Related
I'm making a bar chart in Matplotlib with a call like this:
xs.bar(bar_lefts, bar_heights, facecolor='black', edgecolor='black')
I get a barchart that looks like this:
What I'd like is one with no white gap between consecutive bars, e.g. more like this:
Is there a way to achieve this in Matplotlib using the bar() function?
Add width=1.0 as a keyword argument to bar(). E.g.
xs.bar(bar_lefts, bar_heights, width=1.0, facecolor='black', edgecolor='black').
This will fill the bars gaps vertically.
It has been 8 years since this question was asked, and the matplotlib API now has built-in ways to produce filled, gapless bars: pyplot.step() and pyplot.stairs() with the argument fill=True.
See the docs for a fuller comparison, but the primary difference is that step() defines the step positions with N x and N y values just like plot() would, while stairs() defines the step positions with N heights and N+1 edges, like what hist() returns. It is a subtle difference, and I think both tools can create the same outputs.
Just set the width 1 over the number of bars, so:
width = 1 / len(bar_lefts)
xs.bar(bar_lefts, bar_heights, width=width, color='black')
You can set the width equal to the distance between two bars:
width = bar_lefts[-1] - bar_lefts[-2]
xs.bar(bar_lefts, bar_heights, width=width)
I'm using jquery flot library to plot a bar chart. The bars in my chart are consistantly too thin, about 2px in width. But when I set
lineWidth: 15
the bars become the width I want, but the first and the last bars spill over the graph border. I found a simple test flot bar chart with a limited number of points, which looks fine when implemented locally. My conclusion is that maybe I have way too much data, and so the bars are thin in contrast to the amount of points. But I'm hoping there is a way to get the bars to be wider some other way and for them not to spill over the graph border.
Any suggestions are much appreciated. Here is what I have:
$.plot(this.get('datasets'), {
bars: {
show: true,
align: "center",
fill: true,
//lineWidth: 15
},
xaxis: {
mode: "time", //"categories",
timezone: "browser",
tickLength: 0
}
});
You're using lineWidth instead of barWidth. So your bars are the same width; they just look thicker (and spill over the border) because the lines around them are thick.
The reason why your bars are so narrow are because the width is expressed in axis units, not pixels. In your case, where you're using a time-mode axis, the bar width will be quite large. If you want a bar to cover one hour, then your barWidth should be 60 * 60 * 1000 = 3600000.
I'm using JQuery Flot with the stacking plugin to create a stacked bar chart of revenue over time from a number of different sources. The problem I'm running into is that there is one timepoint where one source gained revenue a couple of orders of magnitude larger than any other in the entire chart.
The end result is that this value dominates the graph, shrinking all the other bars to an unusable height. I can set a max height on the graph, but then you lose being able to visualize the outstanding value.
Is there any best practice in data visualization to address a situation like this? Some flot option/plugin that could help? Or a library that would handle the situation in a way better than flot?
I'm not certain about financial plots, but in scientific plotting, to emphasize data closer to 0, a logarithmic scaled axis is frequently used. Unlike a linear scaled axis where each equally spaced tick represents a +N, in a log scaled axis each equally spaced tick represents an order of magnitude increase. The simplest case is an exponential increase where the axis goes 0.1, 1, 10, 100, 1000, etc...
For instance here's the same bar graph with a linear and log scaled axis:
Here's the flot code I used to generate this (fiddle here):
$(function() {
var series = {data: [[0, 0.1], [1, 1], [2, 10], [3, 100000]],
lines: {show: false},
bars: {show: true}}
$.plot("#linear", [ series ]);
$.plot("#log", [ series ], {
yaxis: {
min: 0.1,
max: 150000,
ticks: [[0.1,"0.1"], 1, 10, 100, 1000, 10000],
transform: function (v) {
return (v == 0) ? Math.log(0.0001) : Math.log(v);
},
inverseTransform: function (v) {
return Math.exp(v);
}
}
});
});
I have 3 sprites. Left edge, right edge, and repeating center which has 1 pixel width but is scaled up. The problem is that the scaled sprite fades out the farther away it is from the center:
I've tried using CCTexture's setAliasTexParameters but the result doesn't look good:
How do I get the antialiased looks in the first picture but without the fade out problem?
You could try this on the sprite:
// These parameters set the texture properties:
// minifying filter - linear interpolation,
// magnification filter - linear interpolation,
// texture repeat in S direction,
// texture repeat in T direction (*)
ccTexParams params = {GL_LINEAR, GL_LINEAR, GL_REPEAT, GL_REPEAT};
[sprite.texture setTexParams:¶ms];
// This explicitly sets the contentSize of the sprite to (10, 200),
// but also sets the "window to the texture" to this rectangle:
[sprite setTextureRect:CGRectMake(0, 0, 10, 200)];
You have to tweak these settings, but hope you get it.
You don't have to scale the sprite.
(*) For S and T check this: Difference between U V and S T texture coordinates
I have a weird issue in my bar graph realized using d3.js: the 1 px padding between each rectangle appears irregular. I gather either or both the width or x position are the culprit but i don't understand what i'm doing wrong: the width is a fraction of the svg area and the X position is obtained via a D3 scale.
I've put a demo here: http://jsfiddle.net/pixeline/j679N/4/
The code ( a scale) controling the x position:
var xScale = d3.time.scale().domain([minDate, maxDate]).rangeRound([padding, w - padding]);
The code controlling the width:
var barWidth = Math.floor((w/dataset.length))-barPadding;
Thank you for your insight.
It's irregular because you are rounding your output range (rangeRound). In some cases, the distance between two bars is 3 pixels and sometimes only 2. This is because the actual x position is a fractional value and ends up being rounded one way in some cases and the other way on other cases.
You can mitigate the effect but changing rangeRound to range, but that won't eliminate it entirely as you'll still get fractional pixel values for positions. The best thing to do is probably to simply increase the padding so that the differences aren't as obvious.