block by martgnz 867c95c3b13ac538ad2a64945bc5cf80

Using Spam with Browserify

Full Screen

Install Spam with npm (npm install spamjs), and require the deps in your main JavaScript file:

var d3 = require('d3')
var topojson = require('topojson')
var spam = require('spamjs')

Now you can create a map with spam.StaticCanvasMap() or spam.ZoomableCanvasMap():

var map = new spam.StaticCanvasMap({
    element: "body",
    width: width,
    height: height,
    projection: d3.geo.orthographic()
        .clipAngle(90)
        .precision(0.1)
        .scale(250),
    data: [...]

Tip: I find watchify useful for updating the bundle automatically.

index.html

<!DOCTYPE html>
<meta charset="utf-8" /> 
<body>
<script src="bundle.js"></script>
</body>

main.js

var d3 = require('d3')
var topojson = require('topojson')
var spam = require('spamjs')

var width = 960,
    height = 600

var i = 0

var color = d3.scale.category20()

var graticule = d3.geo.graticule()

// Canvas radial gradient
var x = width / 2,
    y = height / 2,
    // Radii of the start glow.
    innerRadius = 220,
    // Radii of the end glow.
    outerRadius = 300,
    // Radius of the entire circle.
    radius = 200

d3.json("world.json", function(error, d) {
    topojson.presimplify(d)
    
    var neighbors = topojson.neighbors(d.objects.countries.geometries)
    var countries = topojson.feature(d, d.objects.countries).features
    
    var map = new spam.StaticCanvasMap({
        element: "body",
        width: width,
        height: height,
        projection: d3.geo.orthographic()
            .clipAngle(90)
            .precision(0.1)
            .scale(250),
        data: [
            {
                features: topojson.feature(d, d.objects["countries"]),
                static: {
                    prepaint: function(parameters) {
                        parameters.context.beginPath()
                        parameters.path({type: "Sphere"})
                        parameters.context.lineWidth = 2
                        parameters.context.strokeStyle = "rgb(198, 197, 197)"
                        parameters.context.stroke()

                        var gradient = parameters.context.createRadialGradient(x, y, innerRadius, x, y, outerRadius)
                            gradient.addColorStop(0, 'rgb(248, 248, 248)')
                            gradient.addColorStop(1, 'rgb(210, 210, 210)')
                        
                        parameters.context.fillStyle = gradient
                        parameters.context.fill()

                        parameters.context.beginPath()
                        parameters.path(graticule())
                        parameters.context.lineWidth = 0.2
                        parameters.context.strokeStyle = 'rgba(30,30,30, 0.5)'
                        parameters.context.stroke()
                    },
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 0.8 / parameters.scale
                        parameters.context.strokeStyle = "rgba(0,0,0, 0.6)"
                        parameters.context.stroke()

                        parameters.context.fillStyle = color(i)
                        parameters.context.fill()

                        i++
                    }
                }
            }
        ]
    })
    map.init()
})