sxywu

license: mit

sxywu

React + D3 exploration with the force layout:

• React for structure
• D3 for data calculation
• React for rendering

Pro:

• Clean, easy to reason about

Con:

• Goes through lifecycle for every tick -> will not scale

sxywu

license: gpl-3.0

sxywu

license: gpl-3.0

sxywu

This is a really simple (and kind of cheap) way to ensure as little link overlap as possible in a force-directed graph. It is inspired by Moritz Stefaner's Force-based label placement, where he uses invisible nodes to avoid overlap of text labels.

In this example, I've taken the classic force-directed graph example of the Les Miserables dataset, and made two simple tweaks: I use the links array to calculate the invisible nodes, and place the nodes at the halfway point of each link. Conceptually, it is very similar to Mike Bostock's Curved Links.

sxywu

license: mit

sxywu

Spread of tweets during the two days of Openvis Conf.

--

Built with blockbuilder.org

forked from sxywu's block: openvis tweets #1

forked from sxywu's block: openvis tweets #2

sxywu

React + D3 exploration with the force layout:

• React for structure
• D3 for data calculation
• D3 AND React for rendering
• • React for enter/exit
• • D3 for update

Pro:

• Takes advantage of respective strengths

sxywu

license: gpl-3.0

sxywu

I was most fascinated by Nadieh's gooey example from her OpenVis Conf talk, and especially with the gooey color blending. After reading her blog post, I decided to give the circles some colors - and it turned out to be as straightforward as I was hoping for.

The only two things I had to change:

• add a colorScale and replace the circles' fills with the colorScale outputs

• remove feComposite from the filters (I'm looking into why this is)

Thank you Nadieh for your brilliance 💕