I am building a version of this parallel coordinate view in d3.js v4.
https://bl.ocks.org/syntagmatic/05a5b0897a48890133beb59c815bd953
In my example I have a predefined selection (in the form of a [min,max] array that I would like to set programatically as a brush in one or more of the axes, after the plot has loaded. But I cannot seem to find a way to do it. Most examples I found on setting a brush from code are using d3 v3 and use setting extent but that does not work anymore in v4 it seems.
can someone give me some tips and a simple example hot to do this in this case (so with multiple axes and brushes active) ?
thanks
Select your brush group and call brush.move, then also pass an array with the start and end coordinates. Your brush move event will then take care of the rest.
d3.select(".brush").call(brush.move, [[startX, endX], [startY, endY]]);
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
New to D3 here. I am attempting to combine brush and zoom(ex1) with multiple brushes(ex2).
The idea is that the user will be able to create multiple brushes on top of Ex1's focus chart to make annotations on the data. Which I am able to do. However, I am only able to update one(the first) annotation brush position on the chart after zooming using this on ex2's zoomed function:
.select("#brush-0").call(brushes[0].brush.move, lastSelection.map(t.applyX, t));
Where t is the zoom transform and lastSelection is the selection from the last brush that was created. Very hacky, I know, but at least behaves as expected.
I would like to be able to update all the brushes that are stored in the brushes array after zooming and panning in a way that can be called from the zoomed function. Help!
EDIT:
I have recreated the issue with my (flawed) solution attempt here: jsfiddle.net/0pk8wce9/1
I'm working on a map that is created by D3.js. I figured out how to zoom in the map and add labels by following Mike Bostock's tutorial. However, after I zoomed in the map, I don't know how to recalculate the coordinates of the labels.
I don't really understand how projection(data.geometry.coordinates) works. It seems projection() will recreate a pair of new coordinates based on the current svg, and somehow automatically place the labels for you. Thus, I tried to run projection() again in the clicked() function, but it doesn't work.
Here is the code that I'm working on, and I'm using d3 version 4, instead of 3.
If you add your towns to the g selection (instead of the svg selection), then it should work fine, as the zoom applies to that selection.
var selection = g
.selectAll("g.classTown")
.data(towns);
updated code: http://plnkr.co/edit/xJvh6LVweZqQUs7GFFH7?p=preview
I created a grouped-stacked composite chart using dc.js.
I am wondering if I can add a filterHandler to a composite chart.
I want to filter on each stacks.
It seems that, there is no straight forward way to build a composite chart and hook the parent chart to the volumeChart that would filter all the individual child components at once via dc.js, as Gordon suggested. I came up with a solution for one of my dashboards which is not so modular but works fine & also keep in mind the downsides to this approach pointed out below.
For the above dashboard to work, I defined 3 barCharts and 3 lineCharts overlaid on top the barCharts and chaining them all together linearly to volumeChart.
Although this works fine with a fixed y-axis scale, lineChart fails to align with the barCharts when the I set elasticY(true) on all of them, since the lineChart components seem to pic its own yMax and when I pass the yMax value as window.value from barCharts to the lineChart via .on('renderlet'..., again I fail to read these values due the misalignment of individual chart render times. And of course when I overlay the lineCharts I intrinsically loose/block the interaction with the barCharts and use the line moving average tooltips to view bar data.
I have not tried this yet but found a better way to do the same from Scott Miller - https://stackoverflow.com/a/25188909/5743716
Hope it helps!
I want to add zooming functionality using d3.js in a bar chart created using dimple.js. See following link for what I did so far. http://jsbin.com/rejof/2/edit
I want to combine both zooming functionality in dimple chart. Thanks in advance.
I don't think you can easily do this, you would probably need to modify the dimple source code as I believe zooming relies on a different dom structure to the one dimple uses. You might find it easier to recreate the chart you require in raw d3, rather than modifying a dimple chart to zoom. Of course I'd love to be proven wrong.