d3.js time axis on a radial/pie graph - javascript

I am building an arc graph where the start and end points of the arcs are times in one day. I have a d3 scale that converts date objects into radians, but I need a scale with four ticks applied around the outside of the graph. I did it with jQuery, and you can see how it's supposed to look below
The problem I'm having is that the jQuery (and myself) is doing a poor job keeping those ticks at equal distances from the graph. Different screen sizes are making this a pain.
Does anyone have any idea how do create d3 time axis that is a circle? I've googled with no results.
Here is a link to the live site

Related

D3, combine FishEye with brushing and updated scales

I am working on a project where I have to create a scatterplot with genes denoted by dots. Since there are a lot of genes (20k), they get clustered and are stacked often, even after brushing and zooming in on the brush.
To allow the user to separate them a bit better, I want to implement D3's FishEye plugin, preferably the Cartesian. I implemented the example, but the points are flying outside the screen. My guess is that this happens because if you brush (and zoom in), the scales and axes are updated.
How can I make my FishEye adhere to the current domain of the axes in terms of the distortion range and how can I make the points translate correctly (and not fly outside the screen) ? I have already tried something with the min and maximum x-values, but that doesn't work either.

dc.js - horizontal bar chart / row chat, or rotate d3.svg?

Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.

Draw vertical line when two lines cross in Highcharts

I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.

Highcharts highstocks - Dual chart axis issue

Looking through the documentation for Highstocks, I found this example:
Shown here is two series on the same chart, therefore with a linked range selector - this is really really useful, but I wish to display something different which is proving to be very difficult.
What I'm looking for is a normal line graph on the top series, representing data plotted onto time (almost like in this example), but a bar chart or horizontal candle chart in the lower graph, representing one or more timelines.
I've drawn an image of what I'm looking for:
I apologise for the crude drawing, but hopefully it shows what I am aiming to achieve: standard graph on top, bar/candle on bottom.
I have attempted various techniques to render this, but I can't find a way to have both series drawn on the same timescale, linked with the same range selector.
In case it helps, here's a starting point on JSFiddle, with all the unnecessary code removed: http://jsfiddle.net/g105b/8JhXv/
and a link to the original demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/candlestick-and-volume/
Answer taken from official Highcharts forum
it is possible, but with some limitations. In the fact you want to show gantt chart. Bar charts aren't possible in your case - bar chart = inverted whole chart (yAxis becames xAxis, etc). Instead take a look at example for gantt chart: http://jsfiddle.net/highcharts/r6emu/
You can combine them into one, ane effect: http://jsfiddle.net/8JhXv/1/
About limits:
tooltip fo bottom chart is availabe only when you mouseover start and end date
bars are on lines, not between them

Adjusting distance between points in RGraph (javascript)

I'm using RGraph's Line charts to plot some chronological data. It works fine, except that the distance between the successive points is always the same - irrespective of whether they are two hours or two months apart. I would like to customize it so that the distance represents the actual time interval between the points. Is this possible using the Line charts or any other charts in RGraph?
I contacted RGraph support with the above question, and they have suggested that I use Scatter charts instead:
You'd be better placed with Scatter chart. With this chart you can set
the maximum X value and the X axis is scaled (which you can show if
you wish).

Categories