by admin | Feb 14, 2015 | Uncategorized
This is a test
by admin | Mar 30, 2014 | Productive Boredom
If you are expecting an amazing resource that will shed light on all things chart-related, you clearly don’t know me. If you want to be mildly entertained while getting a glimpse of the charting possibilities of D3.js, you’re in the right place. If you want to see the final result without reading the rest of this post, I’ll forgive you. Having used D3 for a couple other projects, I knew it could do cool things. This time I wanted to try a bunch of different charts for a broader view of D3. As a bonus, I thought I’d try some animated transitions, because what’s better than a plain old chart? A chart that moves, of course! The Setup I used the awesome fullPage.js to set up the project, with one chart per page. The documentation for fullPage.js is great and it’s incredibly easy to get something up and running. There were even examples of the type of side navigation I wanted (I’m a sucker for examples). Since I didn’t have any actual data to plot, I was able to get a bit creative and finesse the data to get the look I wanted. So much power, so little time. It Moves! For charts in the wild, animation should be used sparingly. For my little Frankenstein charts, though, anything goes (mwah ha ha ha). I used animations and transitions left and right just to see what I could conjure up. After all, the best way to learn about D3 transitions is to try them, right? Bar Chart The bar chart didn’t take much work because I had made them before....
by admin | Dec 9, 2013 | Uncategorized
On a recent trip to Mexico, I came across a host of memorable ads and translational mishaps. This was a very touristy area where English was common; thus, these ads are mostly in English. Up first is the trusty Cashola machine. This one made me laugh every time I passed it (which was often…these are everywhere). Who wouldn’t want to say “hello” to their money? Or “hola” if you want to get into the Mexican spirit. Next is an interesting combination that I only noticed because I work for a diabetes company. In the United States test strips are not generally behind lock and key and are readily available at any pharmacy. In Mexico, at least at this store, they were locked up, but that’s not weird part. The strips below were bundled together with Splenda (the sweetener) which struck me as an odd combo. Even better, the first thing you see is a bright yellow Splenda box locked up with nebulizers and glucose meters. Lock up your sweeteners, boys and girls. Now onto a translation gone wild (the top part of the image below). Any place where things are translated into multiple languages, there are bound to be mishaps. In this case I happened to know what the Spanish was saying and it was slightly different than the written translation. “Por su seguridad, no recargarse en el cristal.” Simple enough, right? Unless you only speak English. In that case, you’re now deeply confused. It probably would’ve been more effective to say something like, “Don’t lean on the glass,” but for now, always remember, “Not charger for their safety...
by admin | Sep 2, 2013 | Infographics, Productive Boredom
The final infographic can be seen here. If you’ve ever lived in New England you know that while the region is quite creative with the pronunciation of city names, it’s conspicuously uncreative when it comes to selecting names in the first place. Cities named Manchester, Concord, and Salem (among others) run rampant in the region. That got me thinking, “Is this purely a New England thing?” I smell a side project. Having recently discovered the power of D3.js and how easy it is to create an interactive map, I wanted to see what else I could throw together. Up first was the map – basically the same as the Target map. Next I downloaded city data from GeoNames, removed a pesky entry for Wake Island that is not in the U.S., and processed the text file for later use. To make the map interactive, I added a search bar and used a little jquery to take the search input and plot matching cities. Typing in a word searches for that word anywhere in the city name. Put it in quotes and it will search for an exact match. If you search for a single letter, it finds cities that start with that letter. Next I processed the data to find some basic stats, like the top 10 city names and the number of cities starting with each letter of the alphabet. Finally, a bubble chart showing common words in city names and some handy tooltips to finish it off. It’s worth noting that there are some cities missing. A search for “shaker” (without the quotes) brings up no results,...
by admin | Aug 29, 2013 | Infographics, Productive Boredom
If you’re not big on reading and just want to see pretty pictures, go here first. If it looks interesting, read on. It’s no secret to those who know me that I have a great love of Target. My criteria for places to live includes a “30 minutes from Target” clause, henceforth known as 30MFT. I also happen to think that interactive maps are cool. These two seemingly unrelated facts provided a golden opportunity: figure out how to make cool, interactive maps AND discover what parts of the country I am eliminating with 30MFT. This was the perfect project to try out D3.js, a javascript library that mixes SVG, HTML, and CSS. D3 has been used to make countless infographics, such as the ever popular choropleth map and I wanted to give it a try. Here’s how the process went for creating this highly useful infographic: Step 1: Download (or link to) D3 and jquery. Easy, right? Step 2: Create a basic html template to hold all the forthcoming javascript goodness, with a side of CSS. Step 3: Read a couple tutorials on getting started with D3 (see links below), get acquainted with the power of d3.select and d3.selectAll, type a few lines of code, and see a beautiful purple circle on your screen. Ok, so maybe your circle isn’t purple and maybe it’s not even a circle, but the point is that you get something to appear on screen, nicely wrapped in SVG tags. Step 4: Think to yourself, this is going to be a piece of cake. Now to find a map. Step 5: Do a little...
Recent Comments