Suppose one has a d3.js plot; At the moment I've been pulling apart the stream demo, but I'm sure this question is slightly more general.
I have some number of x points I'd like to highlight by drawing vertical lines through as labels, sort of like the tics here.
I'm not picky about data representation, so I can modify the data representation as needed. Just for concreteness sake, suppose I have the points and labels in a js array: [{point: 10, label: "L1"},{point: 39, label: "L2"}]
I'm leaning towards looping over and adding the lines, but it also feels like there must be a nicer way to do this, especially since the labels will be a mess if I do this manually.
Related
I have a GeoJSON file with small details and features that I want to render using D3. Unfortunately, important details are lost because D3
removes polygon coordinate pairs that are closely spaced.
I've set up a small example to show this. Both links use the exact same GeoJSON data, rendered with both D3-geo and mapbox through github.
Specifically, notice the two areas marked by the red circles.
https://bl.ocks.org/alvra/eebb06be793bc06ff3ae01e6945298b6
https://gist.github.com/alvra/eebb06be793bc06ff3ae01e6945298b6
The top one one marks a part of polygon that is rounded using many closely spaced coordinate pairs, but D3 removes most points and just draws a rough square end.
The lower red circle marks a tiny triangle that is removed altogether. The adjacent polygons should touch exactly, but are also affected by D3's loss of precision.
I haven't found any documentation about D3's coordinate precision or a (configurable) feature size limit.
I've tried decreasing D3-geo's EPSILON and related EPSILON2 values and that removes this problem (for me), although I'm sure even smaller features will still be affected.
Assuming this is related to the fact that D3 uses proper geodesics for polygon segments, while the other mapping libraries just draw straight lines (in the output coordinate space),
I was hoping that this process can only introduce new points.
I haven't been able to find other users experiencing similar problems with small features, although I'm surprised this has never come up before.
Does anyone have an idea about the proper way to deal with this?
Through epsilon, I've narrowed the problem down to this use of pointEqual(). This indicates the problem is with clipCircle considering closely spaced coordinates equal and removes them.
Indeed, if I disable circular clipping projection.clipAngle(null), the problem disappears.
I have data from some experiment that should resemble a known grid-structure. However, the data
is off by some unknown angle
is distorted in an unknown way
may contain some displaced points
For an example, please have a look at this picture:
As you can see, the (nice looking) grid is distorted (the angle between the red indicators I drew is not 90deg) and is also rotated a little bit (the horizontal red line is not really horizontal). In addition, on rhe right top and bottom you can see some defects of the structure.
Are there tools I could use to match the data to some grid that I define and thereby find out the corrected data point positions? If not, could you give me some hints to appropriate algorithms to accomplish this? I have googled and thought for a while, but did not come up with a nice (and simple) solution.
I have the coordinate indicating the start of each letter within a word. I have set the plot function to make a red circle at that coordinate like so:
The problem is that the paper I am adding this image to has a structure of 2 columns per page. And when I add 2 of the above image to the same column, the circles become very small and difficult to notice.
I tried instead of circles to make triangles or pentagrams. I get the same result, they become too small to distinguish.
How can I make this more distinguishable? Especially when its printed in black and white.
You can change the marker size of the markers, and\or overlay two different markers one of the other. For example:
x=1:100;
y=rand(1,100);
plot(x,y); hold on
n=20:20:60;
plot(x(n),y(n),'r+','MarkerSize',30,'LineWidth',2);
plot(x(n),y(n),'ro','MarkerSize',15,'LineWidth',2);
There are many other degrees of freedom you can use to add \ change to this. It is a very basic question that you could have answered yourself if you read the documentation of plot in TMW website.
I use jqplot to draw a graph. I have a huge difference between point values: point a is 2, point 2 is 5, point 3 is 500, point 4 is 10.
The jqplot scale system builds correct the graph, but because of such big difference the smaller values are represented as tiny lines, almost not visible on the graph (point a is not visible, point b is a tiny line).
In order to better see the values representation I'd like to build soemething like this (photoshop image, not jqplot render):
Example:
Is any way to do this? I don't even know how is called this option, but I know I saw in some graphs something like this. Do I have an option in jqplot to enable this?
Thank you.
You can define your y-axis as a logarithmic axis :
axes: {
yaxis:{
renderer: $.jqplot.LogAxisRenderer
}
}
after having included this file : <script type="text/javascript" src="../plugins/jqplot.logAxisRenderer.(min.)js"></script>
You can find an example here, and some documentation here
i am trying to figure out if there is a reasonably easy way to extend NVD3's lineChart model to allow variable stroke widths along each line path in a chart.
specifically, i am dealing with a simple line chart where i need to show the year-on-year growth of employment in different sectors (for which NVD3's lineChart works perfectly), while also giving an idea of the relative weight of these sectors (i.e. agricolture might be growing while employing only a few hundred people overall, while retail might be struggling but still be employing a large percentage of the population) - this won't be a linear scale of course, but assuming that relative weight of each sector varies across time, a thicker line could represent a sector with more employees than one with a thin line.
obviously i could very easily change the stroke width for the whole line using i.e. an average weight of each sector across the whole timespan, but as far as i understand there is no way in SVG to specify a varying width of a single path element: would it make sense to create an NVD3 model that builds on top of lineChart but splits each line into discrete polygons (triangles?) for each year-on-year period?
Looking for an answer to this myself. It seems there is no easy way, but one possibility is to use the stroke-dasharray attribute.
http://owl3d.com/svg/vsw/articles/vsw_article.html
Essentially, you can create a series of cloned paths, covering a range of stroke widths. If you turn them into dash arrays, you can play with the spacing between dashes to control which paths are visible at each point.
Depending on the shape and width you are looking for, you may also be able to fudge it by adding a second path element with a varying offset from the first.
Perhaps generate a closed path and apply a pattern fill or regular fill on that path. The closed path is effectively a triangle shape, to mimic a line of varied width.