DailyJS

DailyJS

The JavaScript blog.


Tagdata
Featured

libraries data maps tutorial sponsored-content geoip

Introduction to SimpleMaps

Posted on .

Interactive maps are a great way to visualize geographic data or improve website navigation. Now that SVG is supported by all modern browsers, it has become a popular format for interactive maps. Vector maps scale beautifully and are an attractive and lightweight alternative to Google Maps and OpenStreetMap.

SimpleMaps is a commercial interactive map library. It adds region-level zooming, responsiveness, legacy browser support, latitude/longitude calibration, mobile-friendly tooltips and more to an otherwise static SVG file. If you'd prefer to implement these features on your own, it also offers a free library of web-optimized SVG maps (MIT licensed).

This tutorial will demonstrate what is possible with SimpleMaps and how to get started. To begin, go to http://simplemaps.com/world and download the world map trial. Open test.html in a web browser to view the map.

Initial

The map consists of two JavaScript files: worldmap.js and mapdata.js. The vector paths and the map logic are stored in the worldmap.js file. All customizations to the map are stored in the mapdata.js file. The map can be easily customized by making changes to the mapdata.js file in a text editor and refreshing the browser.

The mapdata.js file contains defaults that can be overwritten for individual countries. For example, to make all countries red, you would simply set:

state_color: 'red',  

in the main_settings object. To override that default and make the USA blue, you'd simply add:

color: 'blue',  

to the US state_specific object. The description property for each country accepts HTML which will be displayed in the tooltip upon hover or (when a mobile device is detected) click.

To speed up the customization process, SimpleMaps offers an online customization tool that makes it easy to customize properties quickly using a spreadsheet. Countries, locations, and regions can all be customized using this Excel-like interface. Changes to the map are reflected in real time.

Customization

All customizations are automatically saved to the mapdata.js file. This makes it easy to switch between the convenience of the spreadsheet editor and the control of making changes directly to the JavaScript object. It is even possible to edit the JavaScript code online using the "Code" tab.

Code

When you are finished, you can install the map on a webpage by embedding both scripts and adding a target <div>:

<script type="text/javascript" src="mapdata.js"></script>  
<script type="text/javascript" src="worldmap.js"></script>  
<div id="map"></div>  

To fully integrate SimpleMaps with other web page elements you can utilize its JavaScript API. This makes it possible to update the map, listen for map events, and dynamically zoom around the map.

All around, SimpleMaps aims to simplify the process of creating interactive maps while retaining the flexibility that has made SVG maps so popular.

Featured

data localStorage rest cache

JSData

Posted on .

Asaf Katz sent in JSData (GitHub: js-data/js-data, License: MIT, npm: js-data, Bower: js-data) by Jason Dobry, a model layer for caching data. It supports adapters for sending data to persistence layers, so you can install DSHttpAdapter (npm/Bower: js-data-http) to send data to a REST server or DSLocalStorageAdapter (npm/Bower: js-data-localstorage) for browser-based storage. There are even adapters for RethinkDB, Firebase, and Redis.

One nice thing about JSData is it uses Object.observe to watch for changes to data, so it doesn't need any special getters or setters. It also supports promises, so you can use then after finding or inserting data.

It also has more advanced ORM-style features like relations, computed properties, lifecycle methods, and data validation. The schema and validation API isn't based on JSON-Schema, but it has the kinds of features you've probably seen in other ORMs and ODMs like Mongoose:

var store = new JSData.DS();

var User = store.defineResource({  
  name: 'user',
  schema: {
    id: {
      type: 'string'
    },
    name: {
      type: 'string',
      maxLength: 255
    },
    email: {
      type: 'string',
      nullable: false
    }
  }
});

User.create({  
  name: 'John'
}).catch(function(err) {
  // Email errors will be in err.email.errors
});

This is an example I adapted from the Schemata and Validation documentation.

JSData was originally written for AngularJS, but is now framework-agnostic. However, there is an Angular integration guide which shows how it can be used with Angular applications.

Because JSData can be used with Node and browsers, you could use it to define reusable models for single-page apps that sync when the server is available. It'll also work well if you're used to Rails-inspired frameworks like Ember, and you're used to working with fat models that include data validation and lifecycle methods.

Featured

libraries jquery data node modules responsive

BiMap, jQuery breakpoint

Posted on .

BiMap

BiMap (GitHub: alethes / bimap, License: MIT, npm: bimap) by James Daab is a bidirectional map implementation. This is a data structure that allows you to query for values by keys and keys by values:

bimap.push({  
  a: {
    b: 1,
    c: {
      d: 2
    }
  }
});
bimap.key('a.b'); // => 1  
bimap.val(2); // => "a.c.d"  

jQuery breakpoint

jQuery breakpoint (GitHub: joshbambrick / breakpoint, License: MIT) by Joshua Bambrick is a plugin for tracking page resizes, and is ideal for when you need JavaScript to trigger in a responsive design.

You can attach listeners with $.breakpoint.on, and an array is accepted so you can respond to different preset device sizes. There's also $.breakpoint.off for removing listeners, and $.breakpoint.changeBreakpoints for changing the globally recognised device sizes.

Featured

validation github data node graphs

tcomb-validation, Bug Life

Posted on .

tcomb-validation

tcomb-validation (GitHub: gcanti / tcomb-validation, License: MIT) by Giulio Canti is a general purpose validation library that can be used with (or without) React and Backbone.

It's based on the tcomb library which is a runtime type checking library.

Using the plain JavaScript API, you can check types like this:

var t = require('tcomb-validation');  
var validate = t.addons.validation.validate;

validate(1, t.Str).isValid();  
validate('a', t.Str).isValid();  

If you call firstError, you'll get an Error object with a description of what failed the validation. You can combine validators using the struct method, and these can be passed to validate so you can validate forms. You can even pass a JSON schema to validate.

The Backbone integration works by calling validate like this:

var Model = Backbone.Model.extend({  
  validate: function (attrs, options) {
    return validate(attrs, Attrs).errors;
  }
});

Bug Life

Bug Life

Bug Life was created for the GitHub Data Challenge, and displays a chart derived from issue data. It includes the labels and issue life cycle events, so you can see what the common labels are and how long it takes to close issues.

The screenshot I included was of Backbone, and generating it required authorisation with the GitHub API. Bug Life handles this quite well -- once the API limit was hit I just had to click Authorize and that was pretty much it.

The author has included some explanations of the charts on the project's demo page:

This is a popular repo on github - backbone. It has a rich history, well organized labels and release cycles. On version 0.9.0, when backbone reached a relatively stable state, many issues were closed. Before this release there were other important ones, for example 0.5.0.

After 0.9.0 backbone lived through 3 other important milestones: 0.9.9, 1.0.0 and 1.1.0. Each of these releases was focused on different aspects. Right before version 0.9.9 most open issues were of type change, while before version 1.1.0 most open issues were of type bug.

Featured

libraries data modules angularjs flow-control articles

Registering Angular.js Components, ChainyJS

Posted on .

Registering Angular.js Components

In Registering Angular.js Components without Hassle, Konstantin Raev discusses a way to automate component registration in AngularJS. The solution is based around Require.js and gulp.js, and he even has examples in TypeScript.

It goes against AngularJS's design a little bit, but the author is obviously experienced with inversion of control containers so he's adopted an approach that might be more familiar to Java or C# developers.

ChainyJS

ChainyJS (GitHub: chainyjs / chainy, License: MIT, npm: chainy) is a library for handling data in a similar way to jQuery's DOM API. The author has published an introductory talk, and the GitHub wiki has documentation for each of the main features.

Chainy supports some built-in data flow actions: set, action, done, and map. You can use them like this:

require('chainy').create().require('set map')  
  // Set the chain's data to an array of two items
  .set(['some', 'data'])
  .map(function(itemValue) {
    // Capitalize each item
    return itemValue.toUpperCase();
  })
  .action(function(currentChainValue) {
    // Join the chain's data and add an exclamation
    return currentChainValue.join(' ') + '!';
  })
  // Handle an error (if applicable), and log the output
  .done(function(err, resultChainValue) {
    if (err) throw err;
    console.log('result:', resultChainValue);
  });

The map and action methods can be asynchronous -- just include an extra argument to get a callback.

The map method is actually a plugin. Plugins are extensions that extend API calls. You can bundle plugins using the Chainy command-line tool, and npm peerDependencies can be used as well.