I am trying to plot circles in Leaflet.js (a webmapping app), following http://bost.ocks.org/mike/leaflet/ seems not to be dificult, but I'm having strange problems :.( that you can see here: http://bl.ocks.org/3047025
In fact here you can see simple circles and works fine if zooming (double click on map) and so on. But I want these features to be circles instead of paths. I think it is not possible (?)
I would like to have circles so I can apply transitions (from radius 0 to X, change color, gravities), events and so on.
Are these transitions in Circles+Leaflet.js possible?? as far as I tested, with paths it is not.
thanks in advance,
Pere
Ziggy Johnson kindly answered my question in the d3.js googlegroup.
You can take a look how it's correctly done in http://bl.ocks.org/3087431
thanks again, Ziggy!
Related
I'm trying to make visualization for iterative algorithm, using macroquad and egui. Pure plot on macroquad looks like this:
Note that each circle or vertice is a struct instance with N fields, content from which I want to appear with hovering over the circle's perimeter?
How can I do it? Which way is more elegant/better to use? I think of writing custom widget for each circle and therefore hovering on this widget. But it seems complicated — I have a lot of circles thus need a lot of widgets. Probably better would be using some fields, where if user clicked, window appeared with information.
Any help is really appreciated
I am searching a way to do the following charts with D3.js and as I'm new to this, I have no idea at the moment how to sort the squares.
Tried some research for charts like this:
Square chart
Proportional Aera Chart
but I did not find anything regarding D3.js.
Does anyone have an idea how to start or proceed?
I think I could manage to create an area with all squares in the right dimensions, but I do not know how to sort them dynamically, so they would group together automatically as shown especially in the first image, when their sizes do not match perfectly but differ a lot.
Thanx for any help, hirschferkel
This example from Mike Bostock is, I think, the sort of thing you're after:
https://bl.ocks.org/mbostock/8fe6fa6ed1fa976e5dd76cfa4d816fec
I suddenly came accross maybe a similar chart: It's called demers cartogram. There is a way to create it in d3.js but it does not look as good as Arc Gis creates it, where the alignment of squares looks much cleaner.
Demers Cartogram with d3.js
Demers Cartogram with ArcGis
I'd like to transition between curve types using D3.js.
Take a look at this block. The data stay the same but the curve type changes. I was expecting the paths to maintain their approximate positions on the plane -- the data stay the same, after all -- but they don't. The paths appear to be redrawn, although I don't understand why with basis to linear the paths seem to be redrawn from left to right whilst with linear to basis the paths seem to be redrawn from right to left.
I've read Mike Bostock's post on Path Transitions, but I think this is a slightly different problem. There, the data change but the curve type remains the same. Here, the data stay the same but the curve type changes.
Thanks in advance for any help!
To understand why you have such a strange transition, let's compare the d attribute of the paths using a curveBasis and a curveLinear.
First, a curveBasis:
d="M0,101.2061594964L45.48756294826797,89.52282837400001C90.97512589653594,77.83949725160001,181.95025179307189,54.47283500680002,271.46268884480395,84.08731623460001C360.975125896536,113.70179746240001,449.0248741034641,196.2974221628,538.5373111551961,222.09899531679994C628.0497482069281,247.90056847079998,719.0248741034642,216.90809007840002,764.512437051732,201.4118508822L810,185.915611686"
Now a curveLinear (same data):
d="M0,101.2061594964L272.92537768960784,31.10617276200003L537.0746223103922,278.89304686319997L810,185.915611686"
As you can see, the path is way simpler with curveLinear. So, the strange transition is the expected behaviour.
A possible solution is using a path interpolation, as proposed in this code from Mike Bostock.
Here is your bl.ocks with a path interpolation: http://blockbuilder.org/anonymous/02125b1fb145a979e53f369c4976a772
PS: If you want to avoid that strange transition when you load the page (all paths coming from the top left corner), draw them the first time using a regular attr method.
By far the most elegant way to rotate a globe in d3 that I've seen is Jason Davies' version: https://www.jasondavies.com/maps/rotate/
Unfortunately his code is minified, and even if I un-minify it, I can't make heads or tails of it with all the variables and functions named with single letters. (It doesn't help that the page includes code to implement "naive" rotation, and also the zooming, which I don't need.)
Anybody know of a demonstration of this technique that doesn't obfuscate the code?
Try looking here: http://bl.ocks.org/KoGor/5994804. The only thing is that you need to start dragging on a land and not on a water.
You may disregard text in Russian (the code has comments in English), but you may also consider translating it and the linked article.
At the risk of asking a silly question, why is each boxplot in d3.box (code and demo) placed in its own svg element? (more generally, placed in its own container element.) Or to put the question another way, why does d3.box only render one component of a chart, rather than all components of a chart? (given that each boxplot is likely to share a common y axis.)
Thanks in advance for any suggestions. I'm sure there's a sensible rationale for this; it's just not clear to me!
Technically, there is no reason to put everything into its own SVG. I don't know why it was done like this in the example, but usually you would have everything in a single SVG and group elements using svg:g elements.
The reason that most d3 components usually only do one thing is that is makes it easier to combine them. If, for example, d3.box rendered x and y axes (or just one of them), you would have to provide options for people who wanted no axes, or a different axis layout, or anything else that isn't covered by how the implementer designed it.
If you're looking for something more high-level that takes care of everything, check out nvd3.js.