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
Related
I'm trying to create a geochoropleth that maps subregions, but also includes outlines of larger regions. (You can think of it like mapping counties, but then wanting to include thicker outlines of states). Not all subregions are part of larger regions that need to be outlined. (Most aren't.) You can see an example of what I'm trying to replicate here:
What's the best way to add this regional outline to my map? I've tried keeping the regions and subregions as two separate files, with two overlaygeojsons calls in my geochoropleth call (with added d3 styling to change the fill and stroke to just be an outline). But when I do - the projection of the regional outline layer is strangely offset from the lower one.
I've also considered having both sets of boundaries in just the one geojson. However, I wasn't sure how to work with this.
While it would be nice to be able to mouseover the boundaries of the larger regions and get a tooltip before crossing over into the individual subregions and getting their tooltips, this isn't a must. I could live with just outlines around the regions. Please advise on the best way to do this. Happy to provide more detail, and thanks so much!
EDIT: I discovered that I had a misplaced transform tag which is what offset the second layer. Fixed now!
Recently, I am doing a bubble map which using Leaflet.js. But it become painful when I want to make different layers to show bubbles with different colors. I came up with two solutions, but none of them can totally solve my problems.
Solution 1: Problem: I don't know how to assign the svg to a layer like:
var tiles = new L.LayerGroup(); tiles.addTo(Alltiles);
I also confused about this code:
map._initPathRoot()
Here is the code link: http://bl.ocks.org/d3noob/9267535
Solution 2: I can draw different layers based on this code, but the Problem is: Zoomed d3.js circles fixed in geographic location on leaflet map but constant size.
Here is the code link: http://bl.ocks.org/xEviL/4921fff1d70f5601d159
I wonder anyone will have some references that I can use? Thank you.
Any tips on how would I go about producing a stacked bar chart with multiple levels?
Similar to having floated divs that slip underneath. But I understand that svg doesn't have the concept of floating, so something more rigid based upon the svg width.
I've just finished "interactive data visualisations" book, which is great but I think I'm hitting on an advanced topic and I've had no luck in the d3 documentation so far.
I think I may of come up with the solution, or at least the direction.
This example: http://bl.ocks.org/mbostock/3888852 it is of pie charts but the principle is the same.
It shows that it can be separate diagrams i.e. separate svg elements. However they are still drawn out in one go with d3.js treating it as one big diagram.
I can then use normal css to lay it out, e.g. display:inline-block.
Thanks Lars for the indication that multiple charts would do it.
I have data like this:
document: [{"key":"01/01/2001","values":2},
{"key":"02/01/2001","values":1},
{"key":"31/01/2001","values":2}]
I am creating an area chart with .interpolate("linear") to create the following:
The idea being to represent number of documents "created" throughout January.
However, this is kind of a misleading output as it would imply there are values throughout January, when there aren't just 2 at the start and one at the end.
My questions are:
Fundamentally is this the wrong graph to represent this data, and should a bar chart be used instead?
Can D3 add evenly spaced "zero" values for each day in January?
Is the best we can do is use .interpolate("cardinal") to produce something like:
Thanks in advance!
I think the answer from this other SO post gives a usable answer, reposting it here so that this is not a dead-end for visitors coming from Google and finding this post first (as I did).
d3 linechart - Show 0 on the y-axis without passing in all points?
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!