I am creating a line chart with grid lines. Here's the similar example: http://bl.ocks.org/hunzy/11110940
I need to change the background of vertical space between X(2) to X(4), X(8) to X(10) and X(12) to X(14) on mouse hover. But I am not able to understand how to use D3 to reference those spaces between the grid lines.
There is nothing there to click on/hover over. The normal axis/grid creates lines, not rectangles. You would need to change the default behave of the axis objects to create "invisible, but clickable" rectangles in order to be able to attach a mouse event to those spaces.
I don't know if this is the recommended approach but it seems like it could work. After the axis has been created:
something
.attr('class','xaxis')
.call(xAxis)
You could select the ticks with something like this:
d3.select(svg).select('.xaxis g.tick').each(function(){
// this.transform will be "translate(X,Y)"
})
In the function you can query the existing properties of the g elements and extract the transform attribute which will contain the X and Y offset for the "tick". This can be used to determine one dimension of your rectangle objects. The other dimension is determined by the size of the other axis or something like that.
Related
Is it possible to align the data points and outliers of box plot in one straight line like in center of box plot?
Additionally, can I color the data points?
The current and the desired screen shot are attached with it.
You can use
.dataWidthPortion(0)
to not spread the points out at all. Documentation.
General advice on changing the color or style of anything, if there is no accessor for it:
Look for the chart in the chart selectors wiki, or if it's not there, inspect the item you want to change in the developer tools and find out what SVG tag and CSS class the item has. In this case, it's circle.data
Add a pretransition handler which selects the items you want, and changes them:
var cc = d3.scaleOrdinal().range(d3.schemeDark2);
bp02.on('pretransition', chart => {
chart.selectAll('circle.data').attr('fill', function(d) {
const boxDatum = d3.select(this.parentNode).datum();
return cc(boxDatum.value[d]);
})
});
In this case, we're creating an ordinal scale to map the available data to the colors in a color scheme.
The interesting question is here is what data to bind to the color of the dots, and how to get that data.
A box plot's data consists of an array of key/value pairs where each value is a Y value. When the box plot draws it will bind each circle.dot element to the index of the data in the array.
So we need to get the array that is bound to the box. Luckily d3.select(this.parentNode).datum() will give us the key/value pair for the box.
For this example, we are encoding the color based on the Y value, which we get by looking inside boxDatum.value. You don't specify how you want the dots colored but this shows the data that is available.
I have a chart I've created in excel that I'd like to replicate in d3, but I'm not sure where I should begin.
It's intended to show which character is speaking at which moment during a play, and so it visually looks similar to a gantt chart or stacked bar chart but it isn't working off of time the way a gantt chart would. Am I right in thinking that it'd be a bar chart or series of bar charts? Could I build it up by a series of 1 pixel wide bars, so that each pixel would equal a line in the play?
I'd provide code but I tried to modify the standard stacked bar chart and all I've really been able to do is either make the whole thing blank or modify the canvas dimensions. So I'd appreciate some suggestions to get me started.
it seems to me that the only (and big!) trouble you'll have here is creating the JSON. Once you have the JSON, it will be a piece of cake! Here is what I thought:
Create a very big JSON that is just 1 big array of hundreds of objects. Each object would be like this:
{"character": "John Doe", "place": "tavern", "duration": 5}
Then, you'll append the narrow rectangles using an ordinal scale for the places ("place") on y axis, setting the x position according to the cumulative duration of previous speeches and setting the width using the duration of each speech, and using CSS you can color the bars according to the character (using character for setting the class).
For this, you would use D3 only for the scales, avoiding the typical selection().data().enter().append() pattern and appending each rectangle in a for loop. Let me explain. Suppose you put your JSON in a variable named data. Then, you do:
for (var i = 0; i < data.length; i++){
var speech = data[i]
//rest of the code
}
This allow you, for each loop, to know the y position of the bar using speech.place, the name of the character using speech.character, for the colors, and the duration of the line using speech.duration. For calculating the x position, you declare a var duration; outside the loop and, inside it, you write:
duration += speech.duration;
In this approach, once you would use the cumulative duration for x position, the objects in the array must to be in the exact chronological order of the play.
PS: D3 is so nice that you can create an additional value named "line", for each object, with the actual line spoken by the character, and when the user hover over the rectangle he/she will see the text of the speech!
I'm using Segment Plot to show multiple lines on the chart. How can I make these lines have arrows on their ends?
You can do this with some SVG + DOM hacking. You can define a "marker element" that can be placed at the beginning, middle or end of a line (see http://tutorials.jenkov.com/svg/marker-element.html for details on markers).
This means manipulating the SVG generated by Plottable. To get the underlying DOM elements, you need to get hold of the d3 "selection" representing each line.
Add a marker definition to the <svg> element where you are rendering the plot. I am pretty sure plottable won't overwrite entities already inside, but if it does you can always add it after rendering the plot.
Use Segment#entities to get all "PlotEntity" objects from the plot (http://plottablejs.org/docs/classes/plottable.plots.segment.html#entities).
Use the PlotEntity#selection property (http://plottablejs.org/docs/interfaces/plottable.plots.plotentity.html#selection) to get the set of DOM elements representing each segment.
The "Selection" interface is just a d3 selection (https://github.com/mbostock/d3/wiki/Selections). You can then add the appropriate "marker-end" attribute to each element, which should give you the arrow heads you want.
On the off-chance these lines are vertical, I have a super easy hack. Use .symbol() to create a scatter plot where the points are either up or down arrows, and place them at the ends of the segments.
Otherwise, you may have to draw the arrows yourself. You can get the pixel locations of the ends of the segments like this:
locX = xScale.invert(endpointXValue)
locY = yScale.invert(endpointYValue)
And then you could append an arrow shape to the foreground (see the crosshair container in this example)
D3.js axes typically have "handlebars" on the end of each axis, like this:
Those look nice. But.
How can these be removed to make an axis look flat, like this:
The square ends of the path are sized using either the .tickSize method, in which case the second argument gives the outer tick size and the first the main tick size, or else using the .outerTickSize method. In either case, supply a value of 0 to suppress the ticks.
ticks.tickSize(innerTickHeight, 0);
or
ticks.outerTickSize(0);
Source: page on d3 axes.
This question relates to NVD3.js multiChart x-axis labels is aligned to lines, but not bars
I am using NVD3.js multiChart to show multiple lines and multiple bars in the chart. All is working fine, but the x-axis labels is aligned only to the line points, not bars. I want to correctly align labels directly below the bars as it should. But I get this:
As you can see - x-axis (example, 2014-Feb) is not aligned to Bars.
1) How to align x-axis labels to bars and lines at the same time?
2) I need this solution for NVD3.js or how to properly integrate.
I made jsFiddle: http://jsfiddle.net/n2hfN/28/
Thanks!
The problem here is that nv.models.multiChart uses a linear scale for its x-axis, and then when it draws the bars it calls nv.models.multiBar, which uses an ordinal scale with .rangeBands().
You can follow this mess through the source code:
First lets look at multiChart.js
HERE is where it sets the x-scale to be a linear scale.
HERE it calls the nv.models.multiBar model to create the bars.
If we jump over to have a look at multiBar.js
HERE it creates an ordinal scale, and HERE it sets the range of the scale using .rangeBands()
The result is that the ordinal scale used for placing the bars, and the linear scale used for the chart's axis do not align. Here's what the two scales look like on their own if plotted on an axis:
The solution would be to force the chart to render the line graphs and the x-axis in terms of the ordinal scale used by the bars. This would work in your case because the bars and the lines all use the same data for the x-axis. This is very simple to do if you are making your own chart and not relying on nvd3, as I showed in my answer to your previous question HERE. This is extraordinarily complicated to do if you're trying to work within nvd3, and many others have tried and failed to switch out the default scales used by nvd3 charts. Have a look at this issue on the nvd3 github page that has been open since January, 2013 for example.
I've tried a number of approaches myself to reuse the bars' ordinal scale, but with little success. If you want to poke around and try to brute-force it yourself, I can tell you that from my experiments I came closest when using chart.bars1.xScale().copy() to make a copy of the bars' scale, and set its domain and rangeBands. Unfortunately, since the chart's width is computed at render time, and I can't seem to create a hook into the chart.update function, it is impossible to set the rangeBands' extent to the correct values.
In short, if you can't live with the labels being offset, you're probably going to need to code up your own chart without nvd3, or else find a different type of layout for your visualization.
After playing around with the NVD3 v1.7.1 source code with the immensely helpful guidance offered by jshanley's answer, I think I've managed to come up with an answer (perhaps more of a kludge than a good solution).
What I did was to have the x-axis labels align with the bars, and have the line data points align with the bars.
1.1. To align the x-axis label, I shifted the x-axis to the right so that the first label appears underneath the middle of the first bar. I then shifted the last label to the left, so that it appears underneath the middle of the last bar. See code here. The amount to shift by is computed at drawing time using .rangeBand() and saved in a rbcOffset variable (I had to modify multiBar.js for this to work).
1.2. To align the line data points with the bars, a similar shift is also required. Luckily, this part is easy because scatter.js (which is used by line chart) comes with a padData boolean variable that does what we want already. So basically, I just set padData to true and the lines shift to align with the bars, see here.
In order to properly integrate with NVD3 and make everything look good, some additional changes are required. I've forked NVD3 on GitHub so you can see the complete solution there. Of course, contributions are welcome.
I use last solution and it runs. So, you can specify
lines1.padData(true)
in order to align lines too.
Same here, I used the last solution,it worked for me as well. Find the following line in multiChart.js
if(dataLines1.length){
lines1.scatter.padData(true); // add this code to make the line in sync with the bar
d3.transition(lines1Wrap).call(lines1);
}
I encountered the same problem and fixed it with below code:
at lines 7832 and 7878 replace
.attr('transform', function(d,i) { return 'translate(' + x(getX(d,i)) + ',0)'; })
with :
var w = (x.rangeBand() / (stacked && !data[j].nonStackable ? 1 : data.length));
var sectionWidth = availableWidth/(bars.enter()[0].length - 1);
if(bars.enter().length == 2)
return 'translate(' + ((i-1)*w + i*w + (i*(sectionWidth - 2*w))) + ',0)';
else
return 'translate(' + ((i-0.5)*w + i*(sectionWidth - w)) + ',0)';
The first case handles multiple bars case while the second one handles single bar case.
lawry's solution works. Also if using interactive guidelines, you need to shift the interactive line to match the new scale. Modify:
if(useInteractiveGuideline){
interactiveLayer
.width(availableWidth)
.height(availableHeight)
.margin({left:margin.left, top:margin.top})
.svgContainer(container)
.xScale(x);
wrap.select(".nv-interactive").call(interactiveLayer);
//ADD THIS LINE
wrap.select(".nv-interactiveGuideLine")
.attr('transform', 'translate(' + rbcOffset +', ' + 0 + ')' +
'scale(' + ((availableWidth - rbcOffset*2)/availableWidth) + ', 1)');
}
in multiChart.js.