Results for tag: JavaScript
Angular.js, a powerful JavaScript framework developed by Google and designed for building web-apps, has seen a lot of adoption in the last few years. My last Google Maps demo made me think a lot about data binding and Angular.JS, and I have actually created a pen with Google Maps powered by a pre-built Angular.js directive. But, I want to take a step back and dedicate a post to various Angular.JS resources, from guides and tutorials to demos and examples to actual projects and directives.
Read more
Countries and Capitals Quiz
Today, I wanted to create a really simple JavaScript framework for an index cards quiz with multiple choice options. To clarify, it is a matching game or a multiple choice question quiz but build from a 1 to 1, question and answer type relationship. Consider a list of countries and capitals. Normal index cards would show a country and ask you to speak or write the capital. My quiz shows you a country, provides a random list of capitals, and asks you to select or match the correct capital to the country. It can also flip the question and answer, so that you are provided a capital and the quiz gives you country options to match with the capital. So this JavaScript quiz framework turns a list of items into a multiple choice matching game. Here are my requirements:
- Pure JavaScript and very simple
- Uses JSON to load the data for the quiz
- Allows you to flip questions with answers
- Allows you to define the amount of multiple choices
- Tracks time, score, and progress
- Shuffles the questions and options on each play
- Uses CSS transition to animate colors in the UI
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
D3.js comes with a lot of geographical projections and there are many cool demos that let you explore different ways of visualizing a map of our earth. I really like the orthographic projection as it gives you a perspective (or azimuthal) projection where earth is a sphere or globe as it appears from outer space. D3 already has some great examples of this projection, and I have also made my own basic D3 Globe with very little code. But today, I want to expand on this concept and try to incorporate an image of the earth into the globe projection to create a more realistic view of earth. First, I will attempt to make this happen with just HTML5 Canvas and then I will explore other technologies like WebGL and Three.js to make the globe more responsive.
Read more
Sometimes you need to load and process a ton of data on the client-side, but how do you do that without blocking the UI? The problem with JavaScript on the browser is that it runs on a single thread. In other words, two scripts or processes cannot run simultaneously. If you are processing JavaScript after page load, the end user cannot interact dynamically with the page. The JavaScript will not handle UI events while processing something else. If you process something large before page load, the end user has to wait all-together which is a horrible user experience.
Running scripts asynchronously also does not help as non-blocking does not mean concurrency. So, how do you process two JavaScript functions at the same time? As the title suggests, HTML5 has Web Workers which bring threading to JavaScript and this post is going to show how to use web workers to not only process multiple scripts at the same time, but also make AJAX requests in Web Workers.
Read more
JavaScript templating frameworks are gaining a lot of popularity these days. Client-side templating comes with many benefits: performance, clean separation of data and presentation tier, browser and/or CDN html caching, and much more like maximizing code reusability and maintainability. This is a great introduction on JavaScript templates. But, how do they affect search engine optimization? Today, I will dig into JavaScript templating frameworks, talk about some new players, discuss comparisons and benchmarks, and address the question of front-end templating and SEO.
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
OpenLayers Demo with Multiple Layers of Data
Same OpenLayers Demo with Custom Tooltips
There has been a lot of development into JavaScript mapping libraries and after playing around with D3 and Raphael, I wanted to try something more map specific. I briefly looked into Google Maps, Leaflet, ESRI, Cloudmate, Polymaps, ModestMaps and many others but I decided on OpenLayers. After reading several good threads on comparing client side map libraries I felt that OpenLayers got the highest overall vote. The OpenLayers API documentation also seems very promising. So, today, I am going to find some interesting geographical data, extract and convert it into a good geo format, and use OpenLayers to visualize the data on the map.
Read more
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
