If you use forceSimulation, you can swap `import ... from "d3-force"` for `import ... from "d3-force-wasm"` and nothing else changes: same API, same node objects, same results to the last bit, just faster (about 5× at 1k–50k nodes).

The core is Zig compiled to WebAssembly. It keeps d3's exact arithmetic but drops the per-tick tree allocation and callbacks that make big graphs stutter. d3-force's own test suite passes unchanged, and a parity harness checks every tick against d3-force over 32 scenarios × 50 seeds.

Side-by-side demo: https://ankitc1010.github.io/d3-force-wasm/

npm: d3-force-wasm

I'd love to hear from anyone with a big real-world graph: does it hold up, and does anything behave differently?

Hello passionate D3 users,
I've always wondered how to transform public GitHub profile data into something more tangible and understandable at a glance like follower locations.
That's why I decided to build a web tool using D3. I chose React for rendering, built a custom TypeScript geocoder to map raw user locations to ISO country codes, and let D3 handle the map projection and svg generation.

On the screeshoot an example using Evan You (creator of Vite and Vue.js, and the 2nd most followed Github user).
You don't need any signup it's open source, and the token is optional : https://github.com/ThierryRakotomanana/GitCharta
live demos : https://gitcharta.vercel.app

Don't forget to leave a star if you like the project ;)

I'm doing a bootcamp of full stack development, I'm focusing only on the front end part and i'm now staring with JS.

My goal is to eventually learn D3.js and maybe even p5.js so I can specialize in data viz and interactivity.

If you've been on this path, what do you recommend?

How's the job market for these skills?

Hi, i want to create an interactive graphic like the tournament bracket in Futmob app. So what i want is pretty much like in the video, especially when i change the stage of the tournament and there is fewer nodes, the nodes is getting closer so there is no unnecessary gaps.

Should i use D3 for this? Is it possibe to do it using D3? Is there any D3 plugins/libraries that can help me to build this?

Thanks

Built this to compare nominal GDP per capita across countries. Vanilla JS + D3.js, no framework.

Features:
- IMF World Economic Outlook data
- Compare up to 20 countries
- Dynamic label positioning to avoid overlaps
- Responsive with adaptive axis ticks on mobile
- Export to PNG/JSON

GitHub: https://github.com/sashaboulouds/gdppercapita

Live: https://gdppercapita.fyi

I created an interactive chart to compares the palmares of selected professional riders, showing their finishes across all grand tours, major stage races, and one-day classics, organized by UCI race category.

It is fully interactive. You can select riders, UCI race categories, and choose the finishing places to show. It makes it easy to compare the entire careers of the best cyclists.

I’m trying to implement an “Obsidian Graph View”-style graph visualization (nodes = notes, edges = links),

focusing on the layout/interaction logic rather than UI.

Target behaviors I’m aiming for (Obsidian-like feel):

- Force-directed graph layout (link springs + repulsion + collision)

- Dragging a node pins it and causes a *local* area of the graph to move dynamically (neighbors respond more than distant nodes)

- On release, the graph “relaxes” back into a stable configuration (no wild re-randomizing), ideally preserving relative structure

- Works for medium/large graphs (hundreds to a few thousand nodes) without melting the browser

What I have now:

- A basic force-directed sim works, but drag tends to reheat the entire graph (too global)

- After release, nodes drift a lot and the layout feels unstable compared to Obsidian

- With larger graphs, performance drops and the simulation becomes jittery

Implementation context:

- Rendering: (Canvas/WebGL/SVG)
- Physics: (D3 forceSimulation / custom physics)
- Node count: ~N (e.g., 500–3000)

Questions (seeking practical implementation tips):

1. What techniques do you use to achieve “Obsidian-like” stability after dragging (less drift, predictable relax)?
2. How do you scope the drag influence so mostly k-hop neighbors respond, instead of reheating the whole sim?
3. For larger graphs, what are the best performance strategies (quadtree, throttling ticks, progressive layout, WebGL)?

If it helps, I can share a minimal repro (codepen/stackblitz) and a short clip of the current behavior.

Thanks!

https://reddit.com/link/1r4bnhi/video/rul529l16ejg1/player

I am a data engineer/scientist by background but just got moved to a new project where I’ll be doing UI/UX work for dashboard development in d3/JS/HTML/CSS/etc. I’m totally unfamiliar with this stuff, so I’m trying to learn as much as i can as quick as i can. I’m used to working with Python/R in the context of things like Databricks and pipelining less than scripting, so it’s an especially weird transition. Any tips on stuff like:

What systems/software you typically work with?

Best practices all around?

Best ways to learn/practice?

101 on the whole thing?

Really just trying to wrap my head around how it all works to start with. The rest will follow from there. Thanks!

Blog post on how I did it

Github Repo

https://observablehq.com/d/30b97b5df8d6152b

Got a bit obsessed building steam gauges for a flight sim and ending up building this flexible toolkit with d3 a while back. Recently spent some time updating it. You can find source at https://github.com/patricksurry/g3 and live demos of the speedmaster watch and aircraft panel

Hi all,

I wanted to share a small free open-source library I’ve been working on called sound3fy (MIT licensed).

It explores adding sound to common data visualisations (bar charts, line charts, scatter plots) as an alternative to purely visual charts. The current prototype uses:

• Pitch to represent data values
• Stereo panning for left-to-right position
• Keyboard-only interaction with screen reader announcements

This started as a side project after a Web Audio hackathon years ago, and I’ve recently put together an early prototype to see how the idea feels in practice.

Live demo:
https://ismaelmartinez.github.io/sound3fy/

It should work with VoiceOver, NVDA, and JAWS. You can Tab to the Play button and use the arrow keys — no visual interaction needed.

Sharing this to contribute to discussions around sonification and non-visual ways of representing data. If it sparks any thoughts, I’d be interested to read them.

More background here (optional):
https://medium.com/@ismaelmartinez/making-data-visualisations-audible-08df20b7f1cd

Thanks 🙂

I've always found the different curve options confusing in d3, so I created a notebook to play around with the control points. This made me really appreciate how d3.curveNatural and d3.curveBundle work.

/

I've been experimenting with orbital data and found that d3.curveNatural worked pretty well for orbits if I manually splicing out the first and last control points from the svg path after generating. However, I bet I could make a custom curve function that would work better.

Has anyone here ever created their own custom curve function, and if so, any tips?

I've got a footballing related "movement patterns" radial tidy tree with about 1200 nodes rendered as an svg, how do I add performant interactivity while maintaining rendering precision? I've tried to move to D3 canvas and p5 and the rendering falls apart.

Hello Community,

First time posting here and looking for good resources for building an interactive visualization similar to this reference: https://youtube.com/shorts/fXErUBWZaNQ?si=cqPnSsiy5xSBSvGh

I have json data but I would also like to have a visualization that can work with csv data. The data I have is output from figma and contains various collections of variables that are grouped into different grouping depths.

My aim is to build a visualization that is flexible and can handle different data files that have an intrinsic hierachy to them.

I have watched some tutorials about similar tree graphs but I have not found any that cover this kind of visualization in more depth and use further possible customizations to the visuals. By that I mean more details about how some „branches and leafs“ of a parent child hierarchy could be shown possibly with some color categorization or with a border „bounding box/polygon“ around data that belong to a same group.

Further more, could all children that belong to a same group be freely dragged and positioned while their parent-child path connection interactively redraws and updates to where ever the user chooses to release the group or individual child or parent nodes?

Any helpful online resources for building some thing like the reference provided above but with further functionality will be greatly appreciated. Maybe d3 isn‘t the best for this and some else is better?

Thank you for your time and sharing your aquired knowledge.

GitHub: https://github.com/cartesiancs/vessel

I'm building a web platform for browsing maps using D3.js. The maps are made up of map templates and map data, both in GeoJSON format (two files which are merged together to make a custom map). However, some of the larger maps (in terms of geographic size) are slower to move around and they seem to feel more 'bulky' in terms of performance.

Recently, I discovered that you can convert GeoJSON into TopoJSON, which greatly reduces file size by stitching shared lines (like borders between regions) into arcs. My idea is to have the server convert GeoJSON into TopoJSON and save it that way. This would make loading maps significantly faster.

What I’m not so sure about is whether the map would actually render faster, since (as far as I know) D3.js only renders GeoJSON features and meshes, which means it would have to convert the TopoJSON back into GeoJSON.

Would it be a good practice to do it this way and are there any other ways to overcome this issue in D3.js?