I am trying to adapt Bo Ericsson's D3 realTimeChartMulti example to a particular use, and I need to add a gridline where each category appears. I have not been able to figure out how to do that using his code.
https://bl.ocks.org/boeric/6a83de20f780b42fadb9
Does anyone have any idea how to do it? Everything I've tried (manipulating the D3 y axis to add ticks(5) would be the simplest alternative, as a start) causes the display to stop rendering altogether.
The simplest way to add a gridline is setting the innerTickSize() method (tickSizeInner in v4/5), which in your case would be:
yAxis = d3.svg.axis().orient("left").innerTickSize(-width);
Then, you can style it the way you want in the CSS by selecting a line with the y and axis classes (here I'm using a dashed line). Alternatively, you can apply the style straight to the group selection (append the axis first, and then append the circles).
Finally, you can see that the circles are behind the gridline, which is not a very elegant design. You can change that by changing the order of the appended elements.
Here is the forked code: http://bl.ocks.org/GerardoFurtado/2eaffbb3437acb62f66a7b6cb85bf435/3042a5357cbc703dcf102c733b7b5772b82d744c
Related
I am trying to add a movable scale or axis inside a plot. For instance: in this example of stacked plot: Click-to-view
I want to include a movable y-axis scale so, if we hover the graph and put the mouse pointer on the beginning of the orange color of any bar, the a-xis will begin from that bar. (Specifically, moving x=0 line.)
I meant something like this example (of d3).
https://observablehq.com/#d3/index-chart
But, here I want to change the value of x-axis by moving the line. Is it possible to do it using vegalite? If somebody has any similar example in vegalite, can you refer it?
Thank you!
AFAIK, there is no animation in Vega Lite. However, you may check out Gemini which aims to extend the grammar of data viz to some simple animations of single-view Vega/Vega-Lite charts
We need to make it move like here.example The code is complex there, I can't figure it out.
I wrote the code my code, but I don’t understand how to make the tooltip move horizontally not behind the mouse, but near the nearest horizontal mark (as in the example)
It is not yet clear where the text above the bold text in the tooltip comes from. How to remove it so that it looks like in the picture?
How do I make the title of the tooltip match the label on the X-axis?
There are many ways to accomplish this. The way I typically do this is to create a series of SVG elements -- such as circles or rects -- using the same scale and data as the paths.
You can make these objects visible or invisible. Either way, you can attach mouseenter, mouseleave events to each to render and populate the tooltip.
I am new to d3 and I am trying to do something like this. Here is what I have done so far JSFiddle, but I don't know how to align the lines to put them like in the picture and also how to put an information box below the chart.
var x=d3.scale.linear().domain([0,r]).range([0,w])
var y=d3.scale.linear().domain([r,0]).range([h,0])
center_group.append('line').attr("x1",x(r/4)).attr("y1",0);
center_group.append('line').attr("x1",x(-r/4)).attr("y1",0);
center_group.append('line').attr("x1",0).attr("y1",x(25));
center_group.append('line').attr("x1",0).attr("y1",x(-r/4));
Thanks!
If I understand correctly, you're trying to align the reticle lines within the circle. I've created a fiddle which should demonstrate a solution to the two issues in your original fiddle.
//circle svg drawn above this point...
center_group.append('line').attr("x1",x(r/6)).attr("y1",0).attr("x2",x(r/5.1));
center_group.append('line').attr("x1",x(-r/6)).attr("y1",0).attr("x2",x(-r/5.1));
center_group.append('line').attr("x1",0).attr("y1",x(19.7)).attr("y2",x(r/6));
center_group.append('line').attr("x1",0).attr("y1",x(-r/6)).attr("y2",x(-r/5.1));
//then include table, as shown here: http://bl.ocks.org/gka/17ee676dc59aa752b4e6
The first issue is that the lines were being drawn before the (white-filled) circle (so any line within the circle was covered). Second issue was that the lines were unbounded, so i added x2 and y2 attributes where needed. See picture link for results.
Regarding the information box, you could simply append a text element under the chart and drop your data in there, but for something more robust, you could include a table, as shown in the example linked in my code above (only two links allowed apparently).
I am in the process of trying to extend Jason Davies' example of crossfilterjs example (you can see it here at http://square.github.io/crossfilter/) to make it able to hand larger data sets. My idea was to make the bar charts wrap.
This is what I have so far: http://bl.ocks.org/elsherbini/5564315
I am trying to figure out how I could make the axis and brush wrap as well. If you open that example in a full window, you can see that right now it just draws the axis at the bottom, and the brush goes over the whole thing. My goal is to make the brush and axis wrap as well, but I'm not sure how to proceed.
Does anyone have experience trying to extend d3.svg.axis() or d3.svg.brush()? Do I need to extend those at all, or is there some other workaround?
I'm using the d3 axis component but I want to tweak a few things after it is drawn. Specifically I would like to rotate the text labels by adding a transform to the text elements and also setting the text-anchor attribute from "middle" to "end".
The problem I'm hitting is that the text-anchor attribute seems to be set asynchronously by the d3 code as part of the transition. When I set the value to "end" in my code it subsequently gets set back to "middle" when the transition runs.
If I wait until transition end before making my change it's going to look choppy. What I'm wondering is if there is a way to insert myself into the process of drawing and transitioning the axis such that my text-anchor value will be used instead of the default one?
I believe this constitutes a bug in the axis component, so I've created a pull request to update label attributes immediately rather than as part of the axis transition. The text element's text-anchor attribute can't be interpolated, so there's no reason to defer the update to the transition, and setting it immediately makes it easy for you to fix it using post-selection.
An alternate fix would be to extend the axis component to support different styles of tick labeling. This way, you wouldn't need to use post-selection, so there's no conflict with the axis transition.
This seems something that can't be overridden from the API. A simple but hacky solution would be setting it in your stylesheet...
.x.axis text {
text-anchor: end !important;
}