Archive for the ‘Three.js’ Category

D3.js, Three.js and CSS 3D Transforms

Friday, March 21st, 2014

D3.js, Three.js and CSS 3D Transforms by Steve Hall.

From the post:

This week I have been having some fun thinking about how you could use D3.js and Three.js together to do some data visualization work. We’ll have to put this one in the experimental column since there is a lot more work to be done, but I was pretty pleased with the results and thought I would blog about what I have done up to this point. While there are plenty of dramatic examples of three.js used to generate 3D globes with lines shooting everywhere, I was interested in a more subtle approach to complement work in D3. I would be curious to hear about other experiments going on along the same lines. A Google search didn’t turn up much.

The following example is using D3 to generate HTML elements and SVG charts and also to store coordinate information for transitions inside data properties. The objects created using D3 are then passed into a three.js scene and animated using CSS 3D transforms (no WebGL here, this is pure DOM).

You really need to run the full demo on a large, high-res monitor.

Wicked cool!

Definitely raises the bar for data visualization!

The only downside being you will be expected to find clever 3D ways to visualize data. Way more complicated than the visualization itself.

HTML5: Render urban population growth on a 3D world globe with Three.js and canvas

Friday, September 7th, 2012

HTML5: Render urban population growth on a 3D world globe with Three.js and canvas By jos.dirksen.

From the post:

In this article I’ll once again look at data / geo visualization with Three.js. This time I’ll show you how you can plot the urban population growth over the years 1950 to 2050 on a 3D globe using Three.js. The resulting visualization animates the growth of the world’s largest cities on a rotating 3D world. The result we’re aiming for looks like this (for a working example look here.):

Possible contender for the topic map graphic? A 3D globe?

If you think of topic maps as representing a users world view?

Perhaps, perhaps, but then you will need a flat earth version for some users as well. 😉

Three.js: render real world terrain from heightmap using open data

Wednesday, July 18th, 2012

Three.js: render real world terrain from heightmap using open data by Jos Dirksen.

From the post:

Three.js is a great library for creating 3D objects and animations. In a couple of previous articles I explored this library a bit and in one of those examples I showed you how you can take GIS information (in geoJSON) format and use D3.js and three.js to convert it to a 3D mesh you can render in the browser using javascript. This is great for infographic, but it doesn’t really show a real map, a real terrain. Three.js, luckily also has helper classes to render a terrain as you can see in this demo: http://mrdoob.github.com/three.js/examples/webgl_terrain_dynamic.html

This demo uses a noise generator to generate a random terrain, and adds a whole lot of extra functionality, but we can use this concept to also render maps of real terrain. In this article I’ll show you how you can use freely available open geo data containing elevation info to render a simple 3D terrain using three.js. In this example we’ll use elevation data that visualizes the data for the island of Corsica.

Rendering real world terrain, supplemented by a topic map for annotation, sounds quite interesting.

Assuming you could render any real world terrain, what would it be? For what purpose? What annotations would you supply?

Using Three.js with Neo4j

Wednesday, April 18th, 2012

Using Three.js with Neo4j by Max De Marzi.

From the post:

Last week we saw Sigma.js, and as promised here is a graph visualization with Three.js. Three.js is a lightweight 3D library, written by Mr. Doob and a small army of contributors.

The things you can do with Three.js are amazing, and my little demo here doesn’t give it justice, but nonetheless I’ll show you how to build it.

There has been a blizzard of tweets along the lines of “When 2D is not enough…” so I won’t pursue that line.

Different question: Is 3D enough?

That is to ask:

Should nodes have positions along three axes or should nodes have positions along 3+ axes that are displayed only 3 dimensions at a time?

How many serious business/planning/science problems only have data for 3 axes? Or relationships that are only between nodes in 3 axes?

Some nodes may not even exist (no properties to cause display) in some sets of 3 axes.

As could be the case for typed edges between nodes. Node might exist, but not the edge.

Interesting from a number of perspectives, querying, authoring, constraints, etc.