Elastic Bubble

22 views
Skip to first unread message

Alessandro Barracco

unread,
Jun 16, 2016, 4:51:04 PM6/16/16
to d3-js

I'm really new into D3.js. I'm guessing if is it possibile to group several DIVs into a dynamic bubble? For dynamic I mean that dragging with jQueryUI the nested DIVs the bubble reacts deforming itself.... as in the picture linked

example

the "bubble" can have different shape:
1. rectangular bounding box (orange in the example)
2. "circle" bubble (blue)
3. "rounded bounding box (green)

The last case (red) has 4 DIVs grouped.... a div is always rounded into a bubble and the more closer is to some other div in the same group the more deforms to "join" other bubble...

Kai Chang

unread,
Jun 16, 2016, 4:55:57 PM6/16/16
to d3...@googlegroups.com
Several of us have been playing with a "gooey" effect achieved by SVG filters.

Here's one example with a rectangular shape + bubbles:

http://bl.ocks.org/nbremer/a3684c52fb527c8fa415

Also see:

http://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
https://css-tricks.com/gooey-effect/

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Alessandro Barracco

unread,
Jun 16, 2016, 7:46:27 PM6/16/16
to d3...@googlegroups.com
Many thanks.... sometimes non-english guys (like me) doesn't know "right" words to search for.... ;-)

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/T1N9GsSAqgM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+un...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--
eng. Alessandro Barracco, phD
Technology and Management of Aeronautical Infrastructure
Faculty of Engineering and Architecture
University of Enna "Kore"
IEREK - International Experts for Research Enrichment and Knowledge Exchange, Alexandria, Egypt
SUPINFO - École Supérieure d'Informatique, Paris

_____________________________________________

Privacy
Questo messaggio e-mail è riservato unicamente al/ai soggetto/i destinatario/i e può contenere
informazioni riservate e/o coperte da segreto professionale utilizzabili esclusivamente dal/i
destinatario/i sopraindicato/i. Il ricevente, se diverso dal destinatario, è avvertito che qualsiasi
utilizzazione, divulgazione o copia di questa comunicazione, nonché di eventuali suoi allegati,
comporta la violazione delle disposizioni di Legge sulla tutela dei dati personali (D.Lgs 196/2003).
Qualora il messaggio fosse ricevuto per errore, si prega di cancellarlo e distruggere eventuali copie
o stampe e di darne informazione immediata al mittente. Grazie.

The information contained in this electronic message and any attachments is intended for one or
more specific individuals or entities, and may be confidential, proprietary, privileged or otherwise
protected by law. If you are not the intended recipient, please notify the sender immediately,
delete this Message and do not disclose, distribute, or copy it and any attachment to any third
party or otherwise use this Message – Thank you. 
Reply all
Reply to author
Forward
0 new messages