search

d3 / d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:
https://d3js.org
ISC License
108.88k stars 22.87k forks source link

IsotypeLayout (Contribution?) #1667

Closed Fannon closed 10 years ago

Fannon commented 10 years ago

Hello there,

thanks for this great library!

I've written a very rough D3.js Isotype Layout. It takes tables and converts it into a data structure fitting to create Isotype Graphics. What's special is that it creates a data entry for every "Icon".

Here are some Screenshots:

2013-11-25_-_07-46-17

The Code to the Layout is here: https://github.com/Fannon/isomatic/blob/master/js/isotypeLayout.js

So if you're interested I could commit this to D3.js. Of course there would be some work to do prior to this. Also it would be nice to know if i thought/did it the right way.

Greets, Simon

mbostock commented 10 years ago

Hi Simon. Thanks for sharing your code.

I’d recommend either publishing this as a standalone plugin in your own repo (and you could link from the Gallery), or you could contribute this to the d3-plugins repo if you want an existing home.

If there’s sufficient demand for the plugin then we can consider moving it to core, but generally I like to start things as plugins, see what the response is, and in the meantime try to keep the core library small.

markvital commented 9 years ago

Any update on this, would love to use one?

Fannon commented 9 years ago

Hi!

You could include this file: https://github.com/Fannon/isomatic/blob/master/src/js/isotypeLayout.js

And it should be available. Creating Isotype graphics is not trivial however, see https://github.com/Fannon/isomatic/blob/master/src/js/views/GraphView.js how we've implemented them. There are two examples / mode in this file.. a simpler and a one more advanced one.

Simon

markvital commented 9 years ago

Great tool, thanks you. It would be cool to support fractions, like in this example: https://twitter.com/markvitals/status/594651285464350721

I'm looking into Isomatic. Great idea with layouts, and import to SVG. I'm working on a similar tool, just for knowledge visualization: http://annalogy.co. Looking for ways to integrate Isotype into it.

Fannon commented 9 years ago

Hello Mark,

fractions are supported, but only through scaling the image size. The example you've provided looks very nice, I'd prefer this to scaling ;)

Please note that isomatic supports an "advanted" layouting algorithm, too. When browsing through the source code, you'll find both the simple and advanced version.

The actual d3.js layouter works for both.

Great to hear you like it! You're project sounds interesting!

Simon