Update March 19, 2017: This original post has new been turned into a library available on npm. You can check out the library in this repo...
I have been working in my spare time on ideas for using the new separate D3 4.0 modules with React. While requiring more understanding of D3 internals, I think this approach results in cleaner code and avoids simply "hanging" a D3 visualization on a DOM node in a React component. D3 interpolators can be tuned according to the specific needs of the application and React remains in control of what is actually is in the DOM at any one timeRead More
In this article we're going to make an interactive WebGL globe. Instead of creating complex geometries from the geojson data to represent the countries, we'll use D3 to generate canvas maps that get converted to textures and applied to a sphere in THREE.js. I've found this is a pretty simple way to get the basic effect with minimal effort. With a few helper functions and some work to get things aligned properly we can make great interactive globes with a very small amount of code. For many common data visualizations like a world choropleth where you want to show country level data or maybe plot points between major world cities, this technique will work well and with some imagination can be used to make some stunning data visualizations.Read More
Continuing on from my last post. Here we are going to walk through a couple of demos that use D3 style selections in THREE.js. If you didn't read the first part of this series, I'm trying out the selection data structure for rending in WebGL with THREE.js. We're using a ~600 line library I put together from the original D3 selection code that let's you test drive the idea. It allows you to "select" into the scene graph the same way you would in the DOM and use the same syntax.Read More
This post is about an idea I had to use D3 style selections in THREE.js for constructing and updating the scene graph. D3's way of binding data to objects and doing updates using selections is a powerful paradigm for building data intensive applications. I think that power can be used to work with other kinds of tree structures outside of the DOM. To test the idea I forked D3 and put together a small selections-only library to try it out. We'll have to keep this one in the experimental column for now, but I think it's an interesting idea.Read More
In the last few weeks I've had the opportunity to explore how to create interactive chord diagrams that transition from one state to another. It's tricky. You need to do some caching of layout information in order to get a smooth animation that makes sense to the user. You also need to think a little about how things get sorted on the screen by D3. Keeping the order as stable as possible from transition to transition makes the diagram easier to follow.Read More
Let's make a data visualization in AngularJS! It's all the rage. Let's Go!
Over the past couple of weeks I have been experimenting with creating 2D maps that can be explored in three dimensional space using D3.js and Three.js. The goal was to produce some highly polished prototypes with multiple choropleth maps that could be easily navigated on a single page. Additionally, I wanted to make sure to address some of the common tasks that arise when presenting map data such as applying well-formatted titles, legends and elegantly handling mouse-over events. The two examples presented below use D3.js for for generating nested HTML elements that contain the maps, titles and labeling information and use Three.js to position the elements in 3D space using CSS 3D transforms. Importantly, there is no WebGL used in these examples. Everything is rendered in the DOM using CSS 3D transforms which, at the time of writing, has much wider browser support than WebGL.Read More
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.Read More
Making line charts or bar charts that have several different series of data can be challenging in D3. It adds a level of complexity that you don't encounter in making a simple single bar or line chart. Along with requiring some knowledge of D3's many layout tools, it requires doing some fairly complex manipulations to the data to create the chart. This post looks at multi-series line, stacked bar, stacked area, and streamgraph charts and should help you on your way to make just about any chart you need.Read More
This week I am continuing to experiment with rendering fractals in D3. In this post we're looking at examples of generating some really cool fractals called dragon curves (also referred to as Heighway dragons). This post is a continuation of theprevious one on fractal ferns. Take a look at that post if you want some basic info on fractals and some links I found useful. Fractals are a world unto themselves, so there are plenty of interesting things to be investigated in this area. We are just scratching the surface with these two posts.Read More