A couple of weeks ago, The Washington Post visualized 13,000 school districts using moving bubbles. Post graphics reporter Armand Emamdjomeh describes how they did it.
Saving this for later.
Tags: JavaScript, REGL, WebGL
Category Archives: javascript
Posted by in Coding, javascript, REGL, WebGL
✚ Getting Started with D3.js
Learn how to build a custom visualization using D3.js and get acquainted with the popular JavaScript library. Read More
Posted by in d3js, javascript, Tutorials
✚ How to Make an Interactive Map of Geographic Paths
With latitude and longitude coordinates, there are a number of ways to map geographic data using D3.js and Leaflet. Read More
Posted by in d3js, javascript, Leaflet, Tutorials
Scrollama.js, a JavaScript library for scrollytelling
Russell Goldenberg released Scrollama.js in an effort to make scrollytelling more straightforward to implement.
Scrollytelling can be complicated to implement and difficult to make performant. The goal of this library is to provide a simple interface for creating scroll-driven interactives and improve user experience by reducing scroll jank. It offers (optional) methods to implement the common scrollytelling pattern to reduce more involved DOM calculations. For lack of a better term, I refer to it as the sticky graphic pattern, whereby the graphic scrolls into view, becomes “stuck” for a duration of steps, then exits and “unsticks” when the steps conclude.
Bookmarked for later.
Tags: JavaScript, scrollytelling
Posted by in Coding, javascript, scrollytelling
Visualize large datasets with deck.gl
deck.gl is an open source framework developed by Uber to visualize large datasets (mainly geospatial ones, naturally). It started as an internal tool but was released to the public in November last year. Uber just released the next iteration of the package, which handles a bunch more use cases. Bookmarked it.
Tags: JavaScript, Uber, WebGL
Posted by in javascript, software, Uber, WebGL
Embedding.js: Data-driven environments for virtual reality
Embedding.js is a work-in-progress JavaScript library by Beau Cronin that makes it more straightforward to create data-driven environments. Think virtual reality and rotating areas in the browser.
[I]t’s not just about 3D — we’ve used various depth cues in windowed visualization settings for some time, and in some cases these techniques have been put to good use. But something altogether different happens when we inhabit an environment, and in particular when our sensory inputs change immediately and predictably in response to our movements. Real-world perception is not static, but active and embodied; the core hypothesis behind embedding is that data-driven environments can deliver greater understanding to the degree to which they leverage the mechanisms of exploration and perception that we use, effortlessly, in going about our daily lives.
A case where virtual immersion led to greater understanding doesn’t come to mind right away, but maybe ease-of-use is a step towards getting there.
Tags: JavaScript, VR
Posted by in javascript, software, VR
Textured SVG patterns in JavaScript
In case you didn’t get the memo, pattern fills are back and so hot right now. In the category of new-to-me, Textures.js by Riccardo Scalco is a JavaScript library that makes adding lines and dots in place of boring solid colors a trivial task.
Tags: fills, JavaScript, patterns
Posted by in Coding, fills, javascript, patterns
Members Only: How to Make an Interactive Stacked Area Chart
Stacked area charts let you see categorical data over time. Interaction allows you to focus on specific categories without losing sight of the big picture. Read More
Posted by in d3js, javascript, Tutorials
Members Only: How to Make an Interactive Bar Chart With a Slider
Provide a slider for the standard bar chart so that users can shift focus to a point of interest. Read More
Posted by in d3js, javascript, Tutorials
Plotly.js, a JavaScript graphing library, open-sourced
Plotly, a service that lets you make interactive charts online, open-sourced their main JavaScript charting library.
Today, Plotly is announcing that we have open-sourced plotly.js, the core technology and JavaScript graphing library behind Plotly’s products (MIT license). It's all out there and free. Any developer can now integrate Plotly’s library into their own applications unencumbered. Plotly.js supports 20 chart types, including 3D plots, geographic maps, and statistical charts like density plots, histograms, box plots, and contour plots.
Should be useful if you need some web-based, interactive charts in a pinch.
Tags: JavaScript, Plotly
Posted by in javascript, Plotly, software