d3 4.x support?

[tristanguigue]

This library does not seem to be compatible with the latest version of d3 for example the API of d3.geo has changed quite a lot: https://github.com/d3/d3/blob/master/API.md#geographies-d3-geo

Is there plans for d3 4.x support?

[markmarkoh]

@tristanguigue you're right, d3's namespace flattening won't work nicely with Datamaps.

I'll work on an upgrade (or dual support for both 3.x and 4.x).

[Antho2407]

Any news on D3 4.X support ? Would be awesome !

[cnsgithub]

I agree, having datamaps support D3 v4 would be great as we already use other v4 based D3 libs and are not able to include two different versions. Thanks for any news.

[wkurniawan07]

Hi @markmarkoh, any updates on this? Would be great if this can be rolled out soon!

[WesWedding]

There's always the PR!

[markmarkoh]

Hey All! I'd love to support d3 v4. We'll have to rethink some of the way we package this library up since it's not a trivial update.

I've created a Github project to track work here. I'm happy to take any support if any of you have some d3 v4 experience and some extra cycles laying around.

https://github.com/markmarkoh/datamaps/projects/1

[ZhengLuke]

Any news on the updated version that supports d3 v4? Thanks so much!!

[aaani]

Any updates?

[jawadahmadd]

Any news for d3 v4 support ?

[mojoaxel]

PLEASE STOP ASKING about a status update. Just subscript to this issue!

Supporting D3 version 4 is quite a change. Maybe we can fund @markmarkoh to work on it!? https://www.bountysource.com/issues/35788460-d3-4-x-support

[Move2Create]

Also, there is an easy workaround, https://stackoverflow.com/questions/16156445/multiple-versions-of-a-script-on-the-same-page-d3-js#16156569

It has worked for me so far, but I'll leave it to the more qualified to determine if this is a good solution.

[kelvinau]

how about support for d3 v5?

[treyseals]

Still no v5 support? Has the project died?

[velum]

And now, d3 v6 support.

[traceypooh]

also d3 v7.

i was annoyed enough i made a decently functional datamaps for US and d3 v7 now. other regions should be doable if @markmarkoh or someone else wants to compare the changes and go from there:

https://github.com/traceypooh/datamaps/blob/master/src/js/datamaps-d3-v7-usa.js

differences from the US file i pulled down and my changes to make d3 v7 compatible are:

<       d3.select(this.options.element).style({'position': 'relative', 'padding-bottom': (this.options.aspectRatio*100) + '%'});
<       d3.select(this.options.element).select('svg').style({'position': 'absolute', 'width': '100%', 'height': '100%'});
---
>       d3.select(this.options.element).style('position', 'relative');
>       d3.select(this.options.element).style('padding-bottom', (this.options.aspectRatio*100) + '%');
> 
>       d3.select(this.options.element).select('svg').style('position', 'absolute');
>       d3.select(this.options.element).select('svg').style('width', '100%');
>       d3.select(this.options.element).select('svg').style('height', '100%');
> 
139c144
<       projection = d3.geo.albersUsa()
---
>       projection = d3.geoAlbersUsa()
166c171
<     path = d3.geo.path()
---
>     path = d3.geoPath()
329c334
<       var graticule = d3.geo.graticule();
---
>       var graticule = d3.geoGraticule();
358c363
<     var path = d3.geo.path()
---
>     var path = d3.geoPath()
445c450
<               var greatArc = d3.geo.greatArc()
---
>               var greatArc = d3.geoGreatArc()
620d624
< 
714c718
<     if ( d3.select( this.options.element ).select('svg').length > 0 ) {
---
>     if ( d3.select( this.options.element ).select('svg')._groups.length > 0 ) {
793c797
<           hoverover = d3.select( self.options.element ).append('div')
---
>           var hoverover = d3.select( self.options.element ).append('div')
1131a1136
> 
1133,1135c1138,1140
<     element.on('mousemove', function() {
<       var position = d3.mouse(self.options.element);
<       d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover')
---
>     element.on('mousemove', function(event) {
>       var position = d3.pointer(event)
>       d3.select(self.svg._groups[0][0].parentNode).select('.datamaps-hoverover')
1147,1148c1152
< 
<     d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');
---
>     d3.select(self.svg._groups[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');

• works w/ state highlight hover, data bubbles and bubble hovers
• resizing window doesnt rescale bubble hovers top/left right now (but not end of world).
• didnt get bubble animate:true to work (too bad, loved that feature).

[traceypooh]

I'll link an example using full ESM import, latest: d3, jquery, and topojson, and such so you can see it in action at my work site once i get this pushed live

[traceypooh]

ok, whups this took a bit longer than I hoped, but live now :) (first cold load can take a bit to get the data on backend and go...)

https://archive.org/details/tv?markets&TVC=BOS

There are 2 nice map examples w/ bubbles -- one at top and bottom. Hover tooltips work nicely. Browser resizing + page reload works nice enough.

if you "view source", you'll see: loading an url like: https://av.prod.archive.org/js/tv/markets.js

which is doing

import 'https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js'
...
  window.topojson = await import('https://esm.archive.org/topojson')
  await import('../util/datamaps.js')

where the later import is loading my modified version of datamaps to work with d3 v7: https://av.prod.archive.org/js/util/datamaps.js

OK, but why, right? Because I really [really] love ESM / imports and need to use updated versions of pkgs for full import ability..

Genuinely hope this helps! The changes in my post 2 posts up to the datamaps JS are pretty minimal and I think should be port-able back into the main repo pretty easily.

[bkenwright]

Just extending what traceypooh did, I wrote a small 'patch' script - which lets you upgrade the current datamaps.js.

It essentially loads the script (as text), swap legacy names (e.g., mouse, d3.geo, ..) with the current v7 ones, then launches the script.

Working example https://notebook.xbdev.net/index.php?page=d3datamap&

:)

Hopefully, they'll release a v7 update - but in the meantime it shouldn't be that hard to port over ^_^

Happy coding