There are a lot of online code editors out there and I have aggregated 30 Code Playgrounds in the past. There are also mini code editors, all kinds of browser editors, and some cool ways to write, save, and preview code with developer tools. Since HTML, CSS, and JS is all processed on the client side it makes sense to bring code editing to the browser. Today, I am going to take a look at two JavaScript libraries that enable online code playgrounds with all kinds of code editing features: CodeMirror and Ace Editor. I am also going to create my own mini code playground with these tools to see which one I like more.
Read more
Here is the HTML5 Online Archive Viewer
A while ago, I blogged about using the Imgur API to upload images via file, directory, or zip archive. Today, I want to dig a little deeper into processing archive files with JavaScript and reading their contents, the files inside the archive, on the client side. I will explore zip and rar archive files and leverage the HTML5 FileReader API and Blob objects to read the files inside the archives. This will allow you to not only see what is inside these archive files but you can actually read and view the data inside, all within a browser.
Read more
I have taken another look at my responsive D3 map and had some time today to fix a few issues and make some enhancements. Normally, I would have updated my last post with the changes, but I wanted to take some time to explain the individual upgrades. Previously, I really focused on creating a world map with D3 that can not only be responsive in terms of screen size but also make that responsiveness work with zoom and pan limits. I added country names and colors to the geo data and included a simple tooltip feature for each country. Now, I am expanding on that with many enhancements, cross-browser fixes, and more simplified code.
Check out the new D3 World Map Template
Here is the updated D3.js v4 World Map Template
Read more
If you are familiar with “slippy map” APIs like Google Maps or Leaflet, than you probably never consider map projections and stick to the default Mercator projection. But there are many other projections (transposing our 3D earth to a 2D object like a paper or computer screen) and D3 comes with a great geo projection plugin. Most D3 examples leverage Natural Earth vector data and I wanted to do the same but show continents on the map instead of countries. So, today, I will create a World Map of Continents with D3 and a map projection visualization that shows how continents change the way they look with different map projections.
Read more
