This is a great application. I am having difficulty converting to d3 V6, in the .drag

Implementation with d3 Version 6 about geo-timescale HOT 11 CLOSED

smithGit commented on August 28, 2024

Implementation with d3 Version 6

from geo-timescale.

Comments (11)

davenquinn commented on August 28, 2024 1

Hi, thanks for bringing this up. It's been a while, but I remember trying to upgrade d3.drag code for some other projects. The breaking change was introduced in d3 v4 with a whole raft of others.

I believe the main culprit was the removal of .origin and replacment with .subject which does the same thing but differently. This StackOverflow answer might help figure out how to move forward.

We'd appreciate a pull request if you end up figuring this out and implementing a fix!

Also, side note, but you might be interested in our newer React library that does similar things (example)

from geo-timescale.

JulesBlm commented on August 28, 2024 1

I converted this to work in d3 v5 a few years back, see this pull request I made for it: d3 v5 version w concurrent animations, the live plain D3.js demo or the
Observable notebook. D3 v6 breaks some stuff again, I haven’t looked in to it much but I suspect that issue is that v6 handles events differently. In any case the ste from v5 to v6 or v7 is a lot smaller than from v3. Let me know if you’re still working on this, I’m willing to help. There’s also an ICS update that I would like to include.

from geo-timescale.

smithGit commented on August 28, 2024 1

Wonderful, Dank u zeer! I would be most interested in a D3 V6 (yikes - do in V7 as it is current and would seem like a small change from D6 for this app) implementation that includes the slightly updated ICS timeline names (which I have but cannot recall what they are), as both plain JS and Observable. I am in touch with folks in Queensland who are involved in the ICS activities, and I am sure they would also be interested. What I am thinking is to take your Observable notebook and enhance it to reflect a collaborative project - with a notebook describing the ICS and steps leading up to your implementation.
I have a not-very-good implementation. Yours is much better, but it shows the descriptive info I would like to suggest.
https://observablehq.com/d/f5509b43eb703e68
Sam in Michigan

from geo-timescale.

smithGit commented on August 28, 2024 1

Heel erg bedankt, Jules. Wish I could help more.

from geo-timescale.

smithGit commented on August 28, 2024

Thanks for your response! I will get right on this tomorrow; I have seen nothing on .subject, so thanks for this pointer (I am going from V3 straight to V6). An additional complication is that all the d3 examples now are done with Observable, which are hard to work back into JavaScript mode. Observable is good, but many d3 users, including me, just want to stick with their existing methods and huge apps already done in Node-React-Vue.js-etc. Sam From: Daven Quinn ***@***.***> Sent: Monday, March 22, 2021 6:13 PM To: UW-Macrostrat/geo-timescale ***@***.***> Cc: Sam Smith ***@***.***>; Author ***@***.***> Subject: Re: [UW-Macrostrat/geo-timescale] Implementation with d3 Version 6 (#3) Hi, thanks for bringing this up. It's been a while, but I remember trying to upgrade d3.drag code for some other projects. The breaking change was introduced in d3 v4 with a whole raft of others. I believe the main culprit was the removal of .origin and replacment with .subject which does the same thing but differently. This StackOverflow answer <https://stackoverflow.com/questions/38599930/d3-version-4-workaround-for-drag-origin> might help figure out how to move forward. We'd appreciate a pull request if you end up figuring this out and implementing a fix! Also, side note, but you might be interested in our newer React library <https://github.com/UW-Macrostrat/timescale> that does similar things (example <https://davenquinn.com/viz/corelle-demo-pbdb/?time=283> ) — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQ2PKFJKP7LUJ6D7XWL5ADTE66HZANCNFSM4ZQQFQVA> .

from geo-timescale.

JulesBlm commented on August 28, 2024

Great, thanks for your interest. I’ll have some spare time next week I’ll take a look next week and start converting it to v7 then. Btw I can’t view the notebook in link you included. Perhaps the notebook isn’t published yet?

from geo-timescale.

JulesBlm commented on August 28, 2024

I found some time to work on it and made steady progress, see this Observable notebook: Geological Time Scale 2021.

I've refactored the code quite a lot. It now uses D3 v7 and the code is a lot more idiomatic D3 code. It no longer relies on DOM selection through matching class names and id's to make it work and no longer makes uses of d3.scaleLinear(). The SVG structure is improved too, for example, labels and rect's are children of one cell group. In my opinion it's all a lot cleaner and simpler.

I've added text color from the latest ICS data and added the new periods in the Holocene
I've added breadcrumbs and highlighting of the selected period and its ancestors inspired by this notebook.

Things I have yet to tackle are

Support for dragging
Show bit of neighbors on focus of period
Check if everything is up-to-date with latest ICS data
Enter a period input

And later on

Standalone non-Observable version
Publish to npm
Switch vertical on narrow screen

from geo-timescale.

smithGit commented on August 28, 2024

Heel erg bedankt! That is great news. I wanted to let you know I appreciate this follow-up and I look forward to reviewing everything in more detail. I will let others I have contacted on this project know, as soon as I have digested the new edition. I have only taken an initial look at the time scale 2021 and it looks great –you have included the new period names. (Note: on this quick review, I was not able to expose the Holocene on Edge or Chrome.) I am at the moment at our home in northern Michigan with the grandkids and some house projects, so give me a few days. I was not successful converting to V7, so really appreciate your work! Note that, instead of working further on eras, I’m working to visualize 36,111 slave voyages from a university site SlaveVoyages.org. I will let you know how that is going shortly. Best regards and Gefeliciteerd (if that is the right form of “congratulations”)! Sam From: Jules Blom ***@***.***> Sent: Thursday, September 2, 2021 8:01 AM To: UW-Macrostrat/geo-timescale ***@***.***> Cc: Sam Smith ***@***.***>; Author ***@***.***> Subject: Re: [UW-Macrostrat/geo-timescale] Implementation with d3 Version 6 (#3) I found some time to work on it and made steady progress, see this Observable notebook: Geological Time Scale 2021 ***@***.***/geological-time-scale-2021> . I've refactored the code quite a lot. It now uses D3 v7 and the code is a lot more idiomatic D3 code. It no longer relies on DOM selection through matching class names and id's to make it work and no longer makes uses of d3.scaleLinear(). The SVG structure is improved too, for example, labels and rect's are children of one cell group. In my opinion it's all a lot cleaner and simpler. I've added text color from the latest ICS data <https://stratigraphy.org/chart> and added the new periods in the Holocene I've added breadcrumbs and highlighting of the selected period and its ancestors inspired by this notebook ***@***.***/sequences-icicle> . Things I have yet to tackle are * [ ] Support for dragging * [ ] Show bit of neighbors on focus of period * [ ] Check if everything is up-to-date with latest ICS data * [ ] Enter a period input And later on * [ ] Standalone non-Observable version * [ ] Publish to npm * [] Switch vertical on narrow screen — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQ2PKAQZOHSY5OXRZ4RYLDT75RQPANCNFSM4ZQQFQVA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . <https://github.com/notifications/beacon/ABQ2PKGONG7STNN3Z4CBTMTT75RQPA5CNFSM4ZQQFQVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGZK5CFI.gif>

from geo-timescale.

JulesBlm commented on August 28, 2024

Thanks, "Gefeliciteerd" is indeed form of "congratulations" 😄. See the pull request I just made for a standalone (non-Observable) version of the updated d3 v7 geo timescale: Standalone d3 v7 version #6. It doesn't include the "breadcrumbs" that the Observable version has yet.

from geo-timescale.

smithGit commented on August 28, 2024

Jules – this is really nice, and very good to have the stand-alone as well. Re Quinn’s suggestion re V2 I think is good; It would help to have the work seen as update to Univ. Wisconsin’s Macrostrat (with attribution of your contribution). I am putting together a more expansive discussion of the progression of visualizations. New Holocene intervals are most interesting! I did a bit of comparison, attached – the Observable looks solid, noted only two items highlighted in yellow in the attached. The stand-alone has an anomaly noted at end of document – time ticks disappear. From: Jules Blom ***@***.***> Sent: Tuesday, September 7, 2021 2:13 PM To: UW-Macrostrat/geo-timescale ***@***.***> Cc: Sam Smith ***@***.***>; Author ***@***.***> Subject: Re: [UW-Macrostrat/geo-timescale] Implementation with d3 Version 6 (#3) Thanks, "Gefeliciteerd" is indeed form of "congratulations" 😄. See the pull request I just made for a standalone (non-Observable) version of the updated d3 v7 geo timescale: Standalone d3 v7 version #6 <#6> . It doesn't include the "breadcrumbs" that the Observable version has yet. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#3 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABQ2PKEKSU4PLD25DCREO4TUAZIZ7ANCNFSM4ZQQFQVA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . <https://github.com/notifications/beacon/ABQ2PKEL7GBXFNYEU6KMAPTUAZIZ7A5CNFSM4ZQQFQVKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOG2BG56Q.gif>

from geo-timescale.

JulesBlm commented on August 28, 2024

Closed by pull request #6. I will make new issues for the remaining bugs

from geo-timescale.

Implementation with d3 Version 6 about geo-timescale HOT 11 CLOSED

Comments (11)

Related Issues (5)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent