Results for tag: json
Imagine a table of data, perhaps car data with columns: ID, Model, Make, Color, Age, etc. How do you process this data so that you can answer some simple questions or visualize it with JavaScript charts? Some questions, like “how many cars are red?” can be processed by looking at a count of rows that meet your criteria (rows where column color is red).
Other questions, like “what is the distribution of colors in your data set?”, requires shifting or pivoting the data, as you want to evaluate a specific column instead of rows. Charting will often need this data pivot and doing it optimally is crucial if you are working with a large amount of data on the client side.
Read more
As more APIs allow CORS, we can create some really cool integrations without any server side code. Google Maps API is an obvious one but I was surprised to see successful Ajax calls to the FaceBook Graph API which made me think about building and integrating these services. I was scraping FaceBook for Places, or geo locations, so it only makes sense to start with a world map where you can search, click, or drag markers to retrieve any latitude and longitude coordinates for your geo search.
Next, these geo coords are sent to my facebook function that initiates a graph search for places near the provided geo location. The response drops markers on the Google Map, similar to Google’s own Places API and examples. But, I also wanted to visualize this dataset in more details and used the jQuery DataTables plugin to make the API data available for easy viewing, searching, and filtering. You can get more data for a specific place by clicking on an id, which initiates another place API call and drops the JSON response in a modal window with code highlighting.
Google and Facebook for Geo Places on a Map and Table
Read more
Sometimes you have to parse and search through some really large files and this is where bash tools and scripts work best. A little perl script, grep, awk, or sed can help you quickly read a portion of a file, do a search and replace, etc. Since I often code on a Mac, I have covered some simple OSX command-line one liners that I find helpful. But what about managing huge files in the browser? I noticed that Ace Editor can handle a file of few megabytes without any issues in a browser, and it comes with Regex search. It actually works faster on big files that my SublimeText for some strange reason.
Read more
I was playing with the Pinterest API today and I think it can be quite helpful in gathering some interesting data on websites and pins. One of the things you can do is list the most repinned photos for any domain over a certain time period. Since I have previously talked about the most popular websites on Pinterest, I now want to expand on that and list the most popular pins from the top Pinterest domains. RJmetrics recently did some analysis on most shared Pinterest websites so I will leverage that data for the 5 out of the top 20 domains on Pinterest. I will use the Get the most repinned Pins endpoint to get our results.
Most Repinned Pins for Most Popular Websites on Pinterest
Read more
I have been dealing with a lot of CSV and TSV files lately and I am a bit surprised at the lack of support for these formats in jQuery. D3.js supports it out of the box which is awesome but often times I need to convert CSV to JSON without loading D3. You could argue that I should just convert the data into JSON before loading it onto the page, especially since at the end of the day I will need to convert it into a JavaScript object. That is an option, and there are many converters out there, but what about transferring more data over the network? CSV and TSV are always going to be smaller than JSON and I like that, so often times, I actually prefer to load a CSV file into the page and convert it into JSON with JavaScript. Also, a TSV or CSV to JSON conversion function in JavaScript is pretty simple.
Read more
MapBox is amazing. I love looking around at all their tile maps, examples, and browsing through various geographical data visualizations. I also like how their solutions works, their API, and other things like TileMill and Wax, so this post is going to explore some interesting vector tiles from MapBox and various interesting maps.
Let’s start with a quick demo I put together that explores various MapBox tiles. All of them show New Your City but you can zoom out to explore how these tiles and maps look on a world level. If you open up the console and look at the network tab, you can see a JSON file being retrieved for each of these tile sets. The comic looking map (examples.bc17bb2a), for example, loads the following JSON file. It gives you some information about the tile set like the URLs for tiles that you could use to load these tiles in other slippy maps like LeafLet or OpenLayers.
Read more
Online GeoJSON and TopoJSON renderer
Recently, GitHub announced that it supports automatic rendering of GeoJSON files that you upload and store on GitHub repositories. They use Leaflet.js and I think it is an awesome feature as GitHub stores many GeoJSON files. Thirteen days later they added support for TopoJSON and it inspired me to create my own online automatic renderer of geographic files. Why? Simply because there are many times when I don’t feel like committing files to GitHub. Also, I want to use D3 to render the file with a simple drag and drop and do all the processing on the client side with HTML5.
Read more
In my last post, I dived into OpenLayers and created a demo that uses different data sets, layers, and tooltips. Today, I am creating something very similar but serving a different purpose: visually comparing something with different data sets of geographical points. That sounds confusing, but I am referring to a concept like airports and grabbing data about airport locations from various sources and visualizing the differences between the sources. You can just look at the size of the data source and determine that it is larger and has more airports but plotting geo locations on a map and seeing it with your eyes can bring more insight.
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
Update: I highly recommend checking out this responsive D3.js framework with pan and zoom limits and the new D3 World Map Template.
D3 has a lot of built in support (a powerful geographic projection system) for creating Maps from GeoJSON. If you have never used D3 for maps, I think you should take a look at this D3 Map Tutorial. It covers the essentials of making a map with D3 and TopoJSON, which I will use below in more advanced examples. TopoJson encodes topology and eliminates redundancy, resulting in a much smaller file and the GeoJSON to TopoJSON converter is built with NodeJS.
Thus, I encourage you all to start using TopoJSON and below, I will go over a couple examples of building a D3 World Map with colors, tooltips, different zooming options, plotting points from geo coordinates, and listening to click events to load new maps. I will also use Mike Bostock’s queue script to load the data asynchronously.
Read more
