If you’re looking for a react slider component check out this option…
Read More
Chart Transitions with React and D3 4.0
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...
Resonance Github 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 time
Read More
Interactive WebGL Globes with THREE.js and D3
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
Interactive Chord Diagrams in D3
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
Snark Hunting: Force Directed Graphs in D3
Is it possible to write a blog post that combines d3.js, pseudo-classical JavaScript, graph theory, and Lewis Carroll? Yes, THAT Lewis Carroll. The one who wrote Alice in Wonderland. We are going to try it here.
I thought I would mix in some fun historical trivia to keep it interesting as we check out force directed graphs in D3. In this post we are going to develop a tool to load up, display, and manipulate multiple graphs for exploration using the pseudo-classical pattern in JavaScript. We'll add in some useful features, a bit of style, and some cool animations to make a finished product (see the examples below).
Read More
Interactive Maps with D3.js, Three.js, and Mapbox
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
JavaScript Object Instantiation: D3 Map Control Example
So you want to instantiate an object in JavaScript? Or possibly you are just looking to put a pan-zoom control on your D3 SVG map (or chart), but couldn't care less about how it gets done. This post has you covered either way. Below I present some examples for creating a Leaflet style set of pan-zoom controls that you could be used with any D3 map or chart (see examples below). In each of the examples the control will be created using a different style of JavaScript instantiation.
Read More
CSS3D Transforms and Physics Engines
I'm back again this week with another fun experiment with D3.js and THREE.js. This time we're adding a physics engine into the mix! Approaching JavaScript application development more like a game developer approaches a game is one trend that has received a lot of attention recently, so I thought I would start looking at some of the important components. A physics engine is one of them.
Read More
D3.js, Three.js and CSS 3D Transforms
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
Creating Multi-Series Charts in D3
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
Fractals in D3: Dragon Curves
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
Fractals in D3: Fractal Ferns
This week I have been busy exploring the generation of fractals using D3. The image above is a "fractal fern" composed of 150,000 tiny SVG circles generated using some surprisingly simple JavaScript. Fractals are everywhere in the nature world and can be stunningly beautiful, but they are also useful for efficiently generating complex graphics in games and mapping applications.
Read More
Setting Up Neo4j 2.0 on an Ubuntu Server
Neo4j 2.0 is an awesome release of Neo Technology's great graph database. There are some significant new features and some changes to the data model that, I think, make it more accessible. You can install it locally to play around and do some testing, but I wanted to create a remote server that I could use as a back-end for data visualization projects. Below are some notes on getting Neo4j installed on Ubuntu 12.04.
Read More
Force Bubble Charts in D3
Using the force layout in D3 to produce a bubble chart for categorical data can be a good choice for communicating the message your data has to offer and has the side benefit of being a real crowd-pleaser visually. In this post I am going to explain how to produce the three example below using the force layout. I am also going to present a method I use to produce these quickly by laying out the graphic using the treemap layout (for rectangular schemes) and the pack layout (for radial schemes).
Read More
Chord Diagrams in D3
Chord diagrams in D3 are one of the more difficult chart types to produce from raw data. Fundamentally, you have to construct both a matrix and a mapping that explains how the matrix is composed and contains other meta data in order to render a complete diagram with appropriate coloring and labels.
Read More
Hexbins with D3 and Leaflet Maps
This week I have been working on maps that present data using hexbins. This is a novel way to present information and can be a powerful way to deal with cases where there are a large number data points. In this post I am using data from Starbucks and Dunkin' Donuts as a way to test out this way of mapping information.
Read More