After making some D3 examples I wanted to take a look at Raphael. If you are interested in comparing D3.js to Raphael.js, there are some good posts about this on Quora and StackOverflow, but I wanted to just create a simple example of drawing a world map and visualizing all the county capitals. When I looked at the Raphael World Map example, I also realized that I could use their JavaScript function to build a nice geographic coordinate converter which is often useful when plotting geo coords that contain degrees, minutes, and seconds. So, let’s get started.
Read more
After checking out the MBTA Developers Page and recently playing with D3.js, I wanted to draw the commuter rail stations and connections on a real map using Geo location data from MBTA feeds. Their Commuter Rail data page has a CSV file which lists all the stations per line with Geo coordinates, stop sequence, and much more. This is great and I can use my previous D3 example to draw lines in between all the stations, but when I started working on this, I have encountered some challenges.
Read more
Today, I was looking at the traceroute module for NodeJS and was thinking about combining the results of a traceroute with a geolocation service that translates the IP addresses into Geo coordinates that can be placed on a world map built with D3. MaxMind Geolocation database seemed like a good idea and I was trying to figure out how to do that on Redis for nodeJS. Then I stumbled on GeoIP which seems to make it easier to use MaxMind with Node. Actually, Philip Tellis created geoip-lite which is a native NodeJS API for the GeoLite data from MaxMind. MapTail, for example, uses geoip-lite to display visitors on a realtime map.
But, I do not have a public server with NodeJS and when I noticed that Pingdom tools has a traceroute method in their API, I decided to implement this project in PHP, using curl to retrieve traceroute information from the Pingdom API, converting IP to location using MaxMind on MySQL, and placing the geo coordinates on a D3.js map. Let’s get started.
Read more
Often times, you find the data that you need in a format that you don’t want. Perhaps, you are looking for GeoJSON but the data is in a ShapeFile, or you need an SVG format but you can only find a bitmap image. Maybe you need to convert an SVG to JSON, or CSV to TSV, or something else. Either way, converters are really useful to convert the same data to a format that integrates with your application and I wanted to start a collection of different kinds of great data converters that I have found online. Recently, I have even wrote my own converter and some of that work has inspired this post.
Read more
Recently, I have been playing around with SVG or Scalable Vector Graphics. SVG is a XML-style language for describing two-dimensional vector graphics supported by modern browsers. One of the main advantages of using vector instead of bitmap to serve graphics is that you can be resolution independent (larger scale does not lose quality) but there are other advantages, like smaller size and no HTTP requests (SVG is embedded into html), styling through CSS, animating with JavaScript, and editing. I am not going to get into the basics of SVG as these tutorials have already done a great job explaining SVG in detail:
Read more
Today I needed to quickly retrieve and store music artist photos and album covers. After looking around, I decided that Last.FM is a good place to do that and I signed up for an API key. I want to provide an artist name and run some API calls that will grab an artist photo, retrieve the top albums, and allow me to also search for a particular album. I also want to store these images on disk and convert everything to JPG format. Considering these use cases, I decided to code this up in PHP but any other server side language would also be fine. Here is my script and I am also going to include links to other implementations of pulling data from Last.FM using their API.
Read more
Get the latest and updated code here
Now that we have private boards on Pinterest, I really want to see more filters, analytics, and user messaging added to the website. It would be also very sweet if they could release an API. In the meantime, you can write some quick JavaScript which would allow you to sort your pins. jQuery is already loaded on the website so you can leverage that to write less code to make the sorting work. If there is enough interest, I can create a chrome extension out of this, or an bookmarklet, but for now, I am just going to show how to sort pins by running JavaScript code in the console of Chrome web developer toolbar. Since everything is happening on the front-end, first we need to decide if you want to organize and sort one board or all of your pins. On my pinterest account, this would be either a board page or all pins page. Next we need to load up all the pins.
Read more
