If you’re looking for a react slider component check out this option…
Read More
Using Existing AWS SSH Keys with Docker-Machine
If you ended up here you are probably trying to launch EC2 instances with Docker-Machine and use your existing SSH keys. Here’s how you do it!
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
Selections in THREE.js II
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
Selections in THREE.js I
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
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
Creating Custom D3 Directives in AngularJS
Let's make a data visualization in AngularJS! It's all the rage. Let's Go!
We are going to look at a simple example that creates a service that pulls data from last.fm using their public API. The returned data will be used to update two interactive charts created using Angular directives. The code written for this example weighs in at about 250 lines of JavaScript and the results are pretty cool. The example uses D3's enter, update, and exit selections to illustrate how thinking about object constancy when transitioning from one state to another can be really powerful for communicating relationships in the data that may be hard to spot otherwise.
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