D3 for representing simulation of physical and chemical process

[pawandeep kaur]

Hello!

I am Data Vis student. I am working on the report on D3.js on various data attributes/types. I have had a hard time, finding any good example of scientific Data representation through D3.js.  I have been through few of the visualization based on gravity, momentum, force directed graph. But, I am unable to find any example that can show simulation of chemical and physical processes, wherein if we change values of data variables, it shows the difference in visualization.

I hope its not too much from D3.js

Thanks

[Amelia Bellamy-Royds]

Hi Pawandeep,

You can find some discussion on this post:

https://groups.google.com/forum/#!topic/d3-js/K6G6m97d7r4

However, the examples there are mostly for games and animation effects, not scientific modeling.  D3 is just a visualization tool, not a complete modelling environment.  The physics-like parameters in force-directed layout are just convenience tools to get the layout to spread out nicely, they do not follow the true equations of actual physical forces.

Now, if you had a computational modelling program that did accurately model the physical processes that you're interested in, then you could use that to create the data that you then use to draw the graphics.  But it still wouldn't be ideal because D3 is based on two-dimensional graphics.  So you'd have to calculate the projection and perspective of elements at different depths, and simulate their three-dimensional shape.  If you do want to look at a multi-purpose web graphics library for real world modeling, the WebGL library is specifically designed to do 3D graphics.  However, it still is just the visualization tool -- what you visualize depends on other programs.  But some people have been making programs like that:

https://www.google.ca/search?q=webgl+(chemistry+OR+physics)

Hope that points you in the right direction

--ABR

[Phuoc Do]

You can use force layout to simulate physical process, build molecule models. But it is limited to a few parameters (gravity, friction, charge, linkDistance). If you want additional parameters, you'll have to extend d3. Check out physics engine in Javascript. For example:

https://github.com/wellcaffeinated/PhysicsJS

I recently built a 3D version of force layout. It is useful for building some nice chemical/physical models.

https://vida.io/documents/N4jSip7n68yQ48DXp

If you need flexible option to define templates, check out my tool @ vida.io. We allow you to define custom javascript/stylesheet properties. See a demo here:

https://www.youtube.com/watch?v=M35XqOLDKZY

Properties definitions look like this:

{

  "stylesheet_properties": [

    {

      "name": "line_color",

      "description": "color of line",

      "selector": ".line",

      "property": "stroke",

      "type": "color"

    }

}

Phuoc Do

[Pawandeep Kaur]

Thanks  Phuoc Do  and Amelia. Your suggestions are helpful. I have checked vida.io and it seems quiet interesting. Even, I found some good examples at thus site..

http://www.visualizing.org/full-screen/56202

http://www.visualizing.org/embedded/40565

It is based on D3 and some UI framework.. So, Phuoc said before, it needs other dependencies as well.

--
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/z4xMWbVL8lE/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/groups/opt_out.

[Ian Johnson]

You may also check out this impressive body of work:

http://lab.dev.concord.org/

and do a google groups search for that url and see discussions around its development

https://groups.google.com/forum/#!searchin/d3-js/http$3A$2F$2Flab.dev.concord.org$2F

I've played with using jason davies' quadtree to try and make a 2d fluid simulator using the SPH method

https://github.com/enjalot/adventures_in_d3/tree/master/sph

--
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/groups/opt_out.

--
Ian Johnson - 周彦

http://enja.org

[Pawandeep Kaur]

really impressive. Thanks for sharing that.