When graphing multiple series all with the same x value and different y values using jqplot, is there a way to specify the x values only ones. For example, if I'm graphing two series, I can supply data to jqplot like this:
[[[2014-1-2, 25], [2014-1-3, 26], [2014-1-4, 27]], [[2014-1-2, 45], [2014-1-3, 47], [2014-1-4, 48]]]
These two series have the same x values and different y values, and I'm specifying the x values twice. Is there a format that allows me to only specify the x values one time?
Related
im trying to understand what tools i need to use as im new to d3 and didnt find any thing related...
i need a area chart that is like bars but can float and be on multiple values both on the x and y axis.
in this example the values are days but it might be hours/months etc...
need to know the direction i need to go.. / the right term to search...
There's no significant difference between drawing this chart and a normal bar chart.
And you need to define some scales that will map the values in your data to co-ordinates on your chart.
You need to draw some rect shapes.
So, in the above example you would define a time scale that, given an input date, will map that to a certain x co-ordinate on your chart. You can then use that to determine both the x co-ordinate for where the left-hand-side of a rectangle will be, and to work out how wide the rectangle needs to be.
const xScale = d3.scaleTime()
.domain([d3.min(dateValuesInMyDataset, d => d.date), d3.max(dateValuesInMyDataset, d => d.date)])
.range([0, widthOfMyChart]);
The above xScale if given the earliest date in your dataset would return the value 0, because this is the x co-ordinate representing that date.
Similarly, you would want to construct a linear scale which defines how to map the numerical range of values in your dataset, to the y co-ordinates in your chart. Then you can use the scale to determine the y value and height of all of the rectangles in your chart.
There are lots of good examples of this on ObservableHQ.com that you can browse and see the code for.
I'm trying to plot some data in seaborn where the x values are percentages*100 as floating point numbers (ie 90.909). When I make the plot:
fig, ax = plt.subplots(figsize=(10,10))
ax = sns.stripplot(df_12['% ident'], df_12['length'], jitter=True)
The decimals in the floating points make the X axis unreadable:
Initial Plot
I would like to set the x axis to show only whole number multiples of 5 (ie 80, 85, 90, 95, 100).
One method I have tried is the following:
fmt = '{:0.0f}'
xticklabels = []
count = 0
for item in ax.get_xticklabels():
count+= 1
item.set_text(fmt.format(float(item.get_text())));
xticklabels += [item];
ax.set_xticklabels(xticklabels);
This succeeds in changing the axis values to integers, but the axis looks busy. The numbers shown are also inconsistent between similar datasets.
Second Plot
I would like to reduce the total number of values shown on the axis. I have tried to use
ax.xaxis.set_major_locator(plt.MaxNLocator(5))
Or similarly
ax.xaxis.set_major_locator(plt.MaxNLocator(5))
ax.set_xticklabels([80, 85, 90, 95, 100])
Which give outputs similar to this:
Third Plot
If you compare this to the previous plot, you'll notice the x axis labels no longer relate to the points plotted. How do I set the values of the x axis while still keeping them related to the points plotted?
Other things I have tried:
ax.set_xlim(75, 100)
This and any variants result in a blank plot.
ax.set(xticklabels=[75,80,85,90,95,100])
Does the same thing where the axis labels don't match the data.
ax.set(xticks=range(75,101), xticklabels=[75,80,85,90,95,100])
Results in all the data points stuck on the left side of the plot with all the axis labels overlapping on a single tick on the right.
ax.xaxis.set_major_locator(ticker.MaxNLocator(integer=True))
This doesn't change the axis values to integers, and also appears to cause the axis to no longer correlate with the data.
I'm testing out different JavaScript graphing frameworks. I'm trying out line graphs and scatter plots with generated data. While it's all going quite okay. I've run into a trouble while trying to generate data for a scatter plot.
So it would be quite easy to do something like this in PHP, or in any other language:
for ($i=0; $i < $x; $i++) {
$data[] = array(
'x' => mt_rand(0, 10000),
'y' => mt_rand(0, 10000)
);
}
The result is distributed pretty much equally around the whole chart. So here I am trying to think of a way to come up with better random data, which would eventually look more like a scatter plot, rather than a equally distributed dots on a page. And I can't come up with anything.
I would like to end up with something more like this random scatter plot from the Web:
So it is more intense in some part of the plot and pretty much nothing in the corners. But I wouldn't like to make it completely impossible for a dot to make it to the corners.
Any algorithmic ideas?
For something like the image you showed, where you have a line around which you want to scatter data, it's pretty easy. For example, imagine a line in which y = x * 0.75. Given that, you select an x value in the range 0..xMax (whatever your maximum X value is), and then generate a value for y with some variance. For example, if 90% of the time the Y value is within 10% of the expected value, then you'd generate a random value between 0.675x and 0.825x.
Say that 5% of the time, the Y value is within 50% of the expected value and 5% of the time the value is unconstrained. For each of those, you generate a Y value the same way: a random value that is equal to the expected Y value, plus or minus 50% (or, in the latter case, plus or minus some very large number).
You can adjust the probabilities and the variance as appropriate.
You can also adjust the distribution of X values. For example, it looks like most of your data points are between about .15 xMax and .6 xMax. So what you want is a higher percentage of X values in that range. Imagine, then that your X values are broken into three different ranges:
0 to .149 * xMax - 20%
.15 to .60 * xMax - 70%
> .60 xMax - 10%
Generate a random number between 0 and 100. Then:
if value < 20, generate an x value between 0 and .15 xmax
if value > 19 & < 60, generate an x value between .15 xMax and .60 xMax
otherwise, generate an x value > .60 xMax and < xMax
Define a function that becomes the center line of the distribution, for example c(x) = sqrt(x).
Define a function that specifies the maximal allowed deviation from the center line, for example d(x) = 0.1 (x - 5)².
For every x value generate one or a few y values y(x) = c(x) + 2 * (random() - 0.5) * d(x) where random() is a (pseudo) random number generator with values in [0;1].
For a more realistic look use a (pseudo) random number generator that has a more interesting distribution, for example a normal distributed with standard deviation d(x).
I have a specific set of values for example :
[1, 4, 12, 32, 150, 250]
How can I display them on a x axis but with the same gap between each ticks ?
For the momvent by specifying tickvalues to the axis with a linear scale I obtain something like that
1-4--12---32-------150----------250
But I am searching to obtain something like that :
1--4--12--32--150--250
Thanks for your help
For example, I want a scatter chart that looks like:
100| X o
| o
60|
| o X X
40|
|
20| o X
|
0|______________________________________________________________
Apples Carrots Dragons Monkies
Where X and o are different sets of data
The key is to use an ordinal sale for the x axis. Ordinal scales are constructed by calling d3.scale.ordinal(). The domain would be an array of your titles (you can use the native map method on your array of data to pull out the titles dynamically). The range needs to by an array of the same length as the domain array, specifying each xcoordinate in pixels that will correspond to the titles.
See this example here: http://tributary.io/inlet/5788637
You can fork it and try adding a yScale (in this case it will be constructed by d3.scale.linear since it is a continous number scale) and making a y axis following a similar pattern as the x axis.