### Initializing World Map with NPM using Datamaps

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This example illustrates how to integrate Datamaps into a project after installing it via NPM. It shows the correct script paths for D3.js, Topojson, and the Datamaps library located within the 'node_modules' directory, followed by map initialization.

```HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="node_modules/datamaps/dist/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
    var map = new Datamap({element: document.getElementById('container')});
</script>
```

--------------------------------

### Initializing World Map with Bower using Datamaps

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This snippet provides instructions for setting up Datamaps when installed via Bower. It specifies the paths to D3.js, Topojson, and the Datamaps library within the 'bower_components' directory, followed by the standard map initialization code.

```HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="bower_components/datamaps/dist/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
    var map = new Datamap({element: document.getElementById('container')});
</script>
```

--------------------------------

### Initializing Datamaps with jQuery - JavaScript

Source: https://github.com/markmarkoh/datamaps/blob/master/src/test.html

This snippet initializes a new Datamaps instance. It targets an HTML element with the ID 'container1' using jQuery and sets the map's scope to 'world'. Finally, it renders the map.

```JavaScript
new Map({ el: $("#container1"), scope: 'world' }).render();
```

--------------------------------

### Initializing Datamaps with Custom Popups and Data (jQuery)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/test.html

Initializes a Datamaps instance on '#container3' using jQuery. It configures custom popups for geography, defines fill colors for different data keys, and provides initial data for the USA. It also sets up a click event listener on map subunits.

```javascript
$('#container3').datamaps({ geographyConfig: { highlightOnHover: false, popupTemplate: function(geography, data) { if (data) { return "<div class='hoverinfo'>Name of War: " + data.warName + "</div>"; } } }, fills: { defaultFill: 'blue', war: 'red' }, data: { 'USA': { fillKey: 'war', warName: 'USA/Afgan War' } }, done: function(datamap) { var svg = datamap.svg; svg.selectAll('.datamaps-subunit').on('click', function(d) { debugger; }) } });
```

--------------------------------

### Updating Datamaps Bubbles Dynamically

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/test.html

This code snippet demonstrates how to update existing bubbles on a Datamaps instance after a delay of 5 seconds. It calls the `bubbles` method with new data and a callback function, allowing for dynamic visualization changes.

```javascript
window.setTimeout(function() { b.bubbles([{ name: 'Gerboise Bleue', radius: 55, yeild: 70, country: 'France', significance: 'First fission weapon test by France', date: '1960-02-13', fillKey: 'DEM', longitude: -0.2275, latitude: 51.807222 }], function(layer) { console.log('layer!', layer); }); }, 5000);
```

--------------------------------

### Configuring and Running Jasmine Tests - JavaScript

Source: https://github.com/markmarkoh/datamaps/blob/master/src/tests/SpecRunner.html

This JavaScript snippet initializes the Jasmine test environment, configures the HTML reporter, and sets up a `window.onload` event to execute the tests. It ensures that Jasmine tests run automatically once the page is fully loaded, providing a standard setup for a Jasmine spec runner.

```JavaScript
(function() { var jasmineEnv = jasmine.getEnv(); jasmineEnv.updateInterval = 1000; var htmlReporter = new jasmine.HtmlReporter(); jasmineEnv.addReporter(htmlReporter); jasmineEnv.specFilter = function(spec) { return htmlReporter.specFilter(spec); }; var currentWindowOnload = window.onload; window.onload = function() { if (currentWindowOnload) { currentWindowOnload(); } execJasmine(); }; function execJasmine() { jasmineEnv.execute(); } })();
```

--------------------------------

### Implementing Responsive Datamaps with Resize Handling (HTML/JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This comprehensive example demonstrates how to make a Datamaps instance responsive by setting the `responsive` option to `true` and handling window resize events. It provides three methods for attaching a resize listener (pure JavaScript, D3.js, and jQuery) to call `map.resize()`, ensuring the map adjusts to container size changes. It also advises using percentage-based container dimensions and setting `aspectRatio` for custom map proportions.

```html
<div id="container"></div>
<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        responsive: true
    });

    // Pure JavaScript
    window.addEventListener('resize', function() {
        map.resize();
    });

    // Alternatively with d3
    d3.select(window).on('resize', function() {
        map.resize();
    });

    // Alternatively with jQuery
    $(window).on('resize', function() {
       map.resize();
    });
</script>
```

--------------------------------

### Adding State Labels with Custom Options (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This example shows how to apply custom styling options, such as `labelColor` and `fontSize`, when adding state labels to a Datamaps instance. Other options like `lineWidth`, `fontFamily`, and `customLabelText` are also available.

```javascript
map.labels({labelColor: 'blue', fontSize: 12});
```

--------------------------------

### Initializing Datamaps for USA with Mercator Projection

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/test.html

Initializes a Datamaps instance on 'container2' with the scope set to 'usa' and using the 'mercator' projection. It defines default fill colors and specific colors for 'DEM' regions, and configures geography options like hiding Antarctica.

```javascript
var world = new Datamap({ element: document.getElementById('container2'), scope: 'usa', // setProjection: function(element, options) { // var projection, path; // var width = element.offsetWidth, // height = element.offsetHeight; // var projection = d3.geo.orthographic() // .scale(width / 4) // .rotate([50,0,0]) // .translate([width / 2, height / 2]) // .clipAngle(90) // .precision(.1); // path = d3.geo.path() // .projection( projection ); // return {path: path, projection: projection}; // }, projection: 'mercator', fills: { defaultFill: '#ABDDA4', 'DEM': 'blue' }, geographyConfig: { hideAntarctica: false } });
```

--------------------------------

### Initializing Datamaps Instance with Configuration

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/update-choropleth-reset.html

This JavaScript code initializes a new `Datamap` instance named `election` for the 'usa' scope, rendering it into the HTML element with ID 'container1'. It includes configurations for geography (border color/width), bubbles (animation, custom popup template, fill opacity), and defines custom fill keys. Initial data for New York is also provided.

```JavaScript
var election = new Datamap({ scope: 'usa', element: document.getElementById('container1'), geographyConfig: { //popupOnHover: false, //highlightOnHover: false, borderColor: '#444', borderWidth: 0.5 }, bubblesConfig: { animate: false, popupTemplate: function(geography, data) { return '<div class="hoverinfo">Some From New: data about ' + data.centered + '</div>' }, fillOpacity: 0.2 }, fills: { 'Visited': '#306596', 'neato': '#0fa0fa', 'Trouble': '#bada55', defaultFill: '#dddddd' }, data: { NY: { fillKey: 'neato', numbeers: 555 } } });
```

--------------------------------

### Initializing Datamaps for UK with Custom D3 Projection and Bubbles

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/test.html

Initializes a Datamaps instance for the UK scope on 'container1'. It uses a custom D3 Albers projection tailored for the UK, loads geography data from a URL, and defines custom popup templates for both geography and bubbles. It also sets up mouseenter and click events for map elements and renders initial bubbles.

```javascript
var b= new Datamap({ element: document.getElementById('container1'), scope: 'subunits', setProjection: function(element, options) { var projection = d3.geo.albers() .center([0, 55.4]) .rotate([4.4, 0]) .parallels([50, 60]) .scale(2000) .translate([element.offsetWidth / 2, element.offsetHeight / 2]); var path = d3.geo.path() .projection(projection); return {path: path, projection: projection}; }, geographyConfig: { dataUrl: '//' + window.location.host + '/public/js/data/uk.topo.json', popupTemplate: function(geography, data) { data = data || {}; return '<div class="hoverinfo"><strong>' + geography.properties.name + '</strong><br/>Electoral Votes: ' + data.electoralVotes + '</div>'; }, highlightBorderWidth: 5 }, bubbleConfig: { popupTemplate: function(geography, data) { return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>'; }, highlightFillOpacity: .85, }, fills: { defaultFill: '#ABDDA4', REP: '#ff0000', DEM: '#00ffdd' }, data:{ "AZ": { "fillKey": "REP", "electoralVotes": 5 }, "CA": { "fillKey": "DEM", "electoralVotes": 10 }, "USA": { "fillKey": "REP", "neat": 1991 } }, done: function(datamap) { var svg = datamap.svg; svg.selectAll('.datamaps-bubble').on('mouseenter', function(d) { console.log('yeahhh', d); }); svg.selectAll('.datamaps-subunit').on('click', function(d) { d3.select(this).classed('active'); }); b.bubbles([{ name: 'Gerboise Bleue', radius: 20, yeild: 70, country: 'France', significance: 'First fission weapon test by France', date: '1960-02-13', fillKey: 'DEM', longitude: -0.1275, latitude: 51.507222 }], { borderWidth: 2, borderColor: '#FFFFFF', popupOnHover: true, popupTemplate: function(geography, data) { return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>'; }, fillOpacity: 0.75, animate: true, highlightOnHover: true, highlightFillColor: '#FA0FA0', highlightBorderColor: 'rgba(250, 15, 160, 0.2)', highlightBorderWidth: 2, highlightFillOpacity: 0.85 }); } });
```

--------------------------------

### Initializing a World Datamap Instance (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/plugins.html

This JavaScript snippet initializes a new Datamap instance, 'election', configured to display a world map using the Mercator projection. It defines hover popups, highlight styles, custom fill colors, and initial data for specific countries, including detailed descriptions and a 'peaceTalks' property.

```javascript
var election = new Datamap({ scope: 'world', element: document.getElementById('container1'), projection: 'mercator', geographyConfig: { popupOnHover: true, highlightBorderColor: '#bada55', popupTemplate: function(geography, data) { if ( data ) return '<div class="hoverinfo" style="max-width: 300px;"><strong>' + geography.properties.name + '</strong> <br />' + data.peaceTalks + ' </div>' }, highlightBorderWidth: 1 }, fills: { 'Visited': '#306596', 'neato': '#0fa0fa', defaultFill: '#EDDC4E' }, data:{ "USA": { "fillKey": "Visited", desc: "Upon arriving in Tel Aviv, President Obama examined a battery of the \"Iron Dome\" defense system before traveling to Jerusalem for bilateral talks with Israeli President Shimon Peres and Prime Minister Benjamin Netanyahu, after which they held a joint press conference and attended a working dinner together." }, "GBR": { "fillKey": "Visited", desc: "The President attended the 39th G8 summit at Lough Erne Resort in County Fermanagh, Northern Ireland." }, "CAN": { "fillKey": "neato", peaceTalks: 1 } } });
```

--------------------------------

### Listening to Datamaps Events via Done Callback (HTML/JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This example demonstrates how to listen for events, such as clicks on map subunits, using the `done` callback function during Datamaps initialization. The `done` callback provides access to the `datamap` object, allowing event listeners to be attached to SVG elements like `.datamaps-subunit`.

```html
<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        done: function(datamap) {
            datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) {
                alert(geography.properties.name);
            });
        }
    });
</script>
```

--------------------------------

### Styling Active Map Units with CSS

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/test.html

This CSS rule defines a style for map units (e.g., countries or states) that have the 'active' class applied, typically in response to user interaction. It forces the fill color to blue, overriding other styles.

```css
.active { fill: blue !important;}
```

--------------------------------

### Adding Dynamic Bubbles to Datamaps (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This example initializes a Datamaps instance and then adds interactive bubbles to it. It defines a set of bubble data, including latitude, longitude, radius, and custom properties, and uses the map.bubbles() method to render them. A custom popupTemplate is provided to display detailed information for each bubble on hover.

```JavaScript
var bombMap = new Datamap({
    element: document.getElementById('map_bombs'),
    scope: 'world',
    geographyConfig: {
        popupOnHover: false,
        highlightOnHover: false
    },
    fills: {
        'USA': '#1f77b4',
        'RUS': '#9467bd',
        'PRK': '#ff7f0e',
        'PRC': '#2ca02c',
        'IND': '#e377c2',
        'GBR': '#8c564b',
        'FRA': '#d62728',
        'PAK': '#7f7f7f',
        defaultFill: '#EDDC4E'
    },
    data: {
        'RUS': {fillKey: 'RUS'},
        'PRK': {fillKey: 'PRK'},
        'PRC': {fillKey: 'PRC'},
        'IND': {fillKey: 'IND'},
        'GBR': {fillKey: 'GBR'},
        'FRA': {fillKey: 'FRA'},
        'PAK': {fillKey: 'PAK'},
        'USA': {fillKey: 'USA'}
    }
});

     var bombs = [{
        name: 'Joe 4',
        radius: 25,
        yield: 400,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First fusion weapon test by the USSR (not "staged")',
        date: '1953-08-12',
        latitude: 50.07,
        longitude: 78.43
      },{
        name: 'RDS-37',
        radius: 40,
        yield: 1600,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
        date: '1955-11-22',
        latitude: 50.07,
        longitude: 78.43

      },{
        name: 'Tsar Bomba',
        radius: 75,
        yield: 50000,
        country: 'USSR',
        fillKey: 'RUS',
        significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
        date: '1961-10-31',
        latitude: 73.482,
        longitude: 54.5854
      }
    ];
//draw bubbles for bombs
bombMap.bubbles(bombs, {
    popupTemplate: function (geo, data) {
            return ['<div class="hoverinfo">' +  data.name,
            '<br/>Payload: ' +  data.yield + ' kilotons',
            '<br/>Country: ' +  data.country + '',
            '<br/>Date: ' +  data.date + '',
            '</div>'].join('');
    }
});
```

--------------------------------

### Styling Active Map Regions with CSS

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/update-choropleth-reset.html

This CSS snippet defines a style for elements with the class `active`, setting their fill color to blue with high importance. It also contains commented-out rules for positioning and floating elements related to `.datamaps-key`, which are currently inactive.

```CSS
.active { fill: blue !important;} /*.datamaps-key dt, .datamaps-key dd {float: none !important;} .datamaps-key {right: -50px; top: 0;}*/
```

--------------------------------

### Rendering Multiple Bubbles on a Datamaps Instance

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/test.html

This code renders multiple bubble markers on the 'world' Datamaps instance. Each bubble represents a historical event with properties like name, radius, country, and coordinates. It also configures visual properties for the bubbles, including border, popup behavior, and highlight effects.

```javascript
world.bubbles([ { name: 'Gerboise Bleue', radius: 20, yeild: 70, country: 'France', significance: 'First fission weapon test by France', date: '1960-02-13', fillKey: 'DEM', latitude: 30.99128, longitude: -97.13858 },{ name: 'Canopus', radius: 10, yeild: 2600, country: 'France', significance: 'First "staged" thermonuclear test by France', fillKey: 'REP', date: '1968-08-24', latitude: 30.29128, longitude: 497.73858 }, { name: 'Canopus', radius: 10, yeild: 2600, country: 'France', significance: 'First "staged" thermonuclear test by France', fillKey: 'REP', date: '1968-08-24', latitude: 30.29128, longitude: -97.73858 } ], { borderWidth: 2, borderColor: '#FFFFFF', popupOnHover: true, popupTemplate: function(geography, data) { return '<div class="hoverinfo"><strong>' + data.name + '</strong></div>'; }, fillOpacity: 0.75, animate: true, highlightOnHover: true, highlightFillColor: '#FA0FA0', highlightBorderColor: 'rgba(250, 15, 160, 0.2)', highlightBorderWidth: 2, highlightFillOpacity: 0.85 })
```

--------------------------------

### Styling Active Datamaps Regions (CSS)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/update-choropleth.html

This CSS snippet defines a style for elements with the class 'active', forcing their fill color to blue. The commented-out section suggests additional styling for Datamaps key elements, potentially adjusting their layout and position.

```CSS
.active { fill: blue !important;} /*.datamaps-key dt, .datamaps-key dd {float: none !important;} .datamaps-key {right: -50px; top: 0;}*/
```

--------------------------------

### Initializing Datamaps World Map with Custom Fills and Filters

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/hi-res.html

This JavaScript snippet initializes a new Datamap instance, setting its scope to 'world' and attaching it to the 'container1' element. It configures geography borders, defines various fill patterns (including URL-based SVG patterns), and sets up filters for bubbles. A default data point for 'TX' is also included, demonstrating initial data setup.

```JavaScript
var election = new Datamap({ scope: 'world', element: document.getElementById('container1'), geographyConfig: { borderColor: '#444', borderWidth: 0.5 }, bubblesConfig: { //animate: false, borderColor: '#000', borderWidth: 1, fillOpacity: 1.0, filterKey: 'dropShadow', popupTemplate: function(geography, data) { return '<div class="hoverinfo">Some From New: data about ' + data.centered + '</div>' } }, fills: { 'defaultFill': '#dddddd', 'good': 'url(#good)', 'medium': 'url(#medium)', 'bad': 'url(#bad)', 'horizontalStripe': 'url(#horizontal-stripe)', 'diagonalStripe': 'url(#diagonal-stripe)' }, filters: { 'dropShadow': 'url(#dropShadow)', 'bigShadow': 'url(#bigShadow)' }, data:{ 'TX': {fillKey: 'diagonalStripe'} } });
```

--------------------------------

### Scheduled Datamaps Choropleth Update (Commented Out)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/update-choropleth-reset.html

This JavaScript snippet sets a `window.setTimeout` for 2 seconds. The `election.updateChoropleth` call within the timeout function is commented out, indicating a placeholder or disabled feature that would have updated California's color and potentially reset other regions.

```JavaScript
window.setTimeout(function() { //election.updateChoropleth({CA: 'blue'}, {reset: true}) }, 2000)
```

--------------------------------

### Updating Datamap Choropleth After 3 Seconds (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/plugins.html

This JavaScript snippet uses `setTimeout` to perform another choropleth update on the 'election' Datamap after a 3-second delay. It sets new colors and data for USA, Canada, Japan, and Russia, demonstrating dynamic map updates.

```javascript
window.setTimeout(function() { election.updateChoropleth({ 'USA': { color: 'green', peaceTalks: 4 }, 'CAN': { fillKey: 'neato', peaceTalks: 10 }, 'JPN': {color: 'pink'}, 'RUS': 'blue' }) }, 3000);
```

--------------------------------

### Styling Active Map Regions (CSS)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/highmaps_world.html

This CSS snippet defines a style rule for elements with the 'active' class, forcing their fill color to blue. It also includes commented-out rules that would adjust the positioning and floating behavior of the Datamaps legend (key).

```CSS
.active { fill: blue !important;} /*.datamaps-key dt, .datamaps-key dd {float: none !important;} .datamaps-key {right: -50px; top: 0;}*/
```

--------------------------------

### Initializing Datamaps and Updating Choropleth (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/update-choropleth.html

This JavaScript code initializes a Datamap instance for the USA scope, associating it with an HTML element 'container1'. It configures geography and bubble popups, defines custom fill colors, and initially sets New York's fill. After a 1.5-second delay, it updates the choropleth to change colors for NY, NJ, TX, and FL.

```JavaScript
var election = new Datamap({ scope: 'usa', element: document.getElementById('container1'), geographyConfig: { popupOnHover: false, highlightOnHover: false, borderColor: '#444', borderWidth: 0.5 }, bubblesConfig: { animate: false, popupTemplate: function(geography, data) { return '<div class="hoverinfo">Some From New: data about ' + data.centered + '</div>' }, fillOpacity: 0.2 }, fills: { 'Visited': '#306596', 'neato': '#0fa0fa', 'Trouble': '#bada55', defaultFill: '#dddddd' }, data: { NY: { fillKey: 'neato' } } }); window.setTimeout(function() { election.updateChoropleth({ NY: 'blue', NJ: 'blue', TX: { fillKey: 'Trouble' }, FL: { fillColor: 'blue' } }) }, 1500)
```

--------------------------------

### Styling Active Map Regions (CSS)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/plugins.html

This CSS snippet defines a style for elements with the 'active' class, forcing their fill color to blue. It also includes commented-out styles for the datamaps-key legend, which would adjust its floating behavior and positioning if uncommented.

```css
.active { fill: blue !important;} /*.datamaps-key dt, .datamaps-key dd {float: none !important;} .datamaps-key {right: -50px; top: 0;}*/
```

--------------------------------

### Creating a Bubble Map for India with Custom TopoJSON and Mercator Projection (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This example illustrates how to create a Datamap specifically for India, utilizing a custom TopoJSON file from a URL. It configures `geographyConfig` for hover effects and border styling, defines custom `fills` for data visualization, and provides sample `data` for states. A custom `setProjection` method uses D3.js's `mercator` projection, centered on India's coordinates, to accurately display the country.

```javascript
 var bubble_map = new Datamap({
            element: document.getElementById('india'),
            scope: 'india',
            geographyConfig: {
                popupOnHover: true,
                highlightOnHover: true,
                borderColor: '#444',
                borderWidth: 0.5,
                dataUrl: 'https://rawgit.com/Anujarya300/bubble_maps/master/data/geography-data/india.topo.json'
                //dataJson: topoJsonData
            },
            fills: {
                'MAJOR': '#306596',
                'MEDIUM': '#0fa0fa',
                'MINOR': '#bada55',
                defaultFill: '#dddddd'
            },
            data: {
                'JH': { fillKey: 'MINOR' },
                'MH': { fillKey: 'MINOR' }
            },
            setProjection: function (element) {
                var projection = d3.geo.mercator()
                    .center([78.9629, 23.5937]) // always in [East Latitude, North Longitude]
                    .scale(1000);
                var path = d3.geo.path().projection(projection);
                return { path: path, projection: projection };
            }
});
```

--------------------------------

### Initializing D3.js Format and Rotation Test Data

Source: https://github.com/markmarkoh/datamaps/blob/master/src/js/components/d3/test/math/transform-rotate-test.html

This JavaScript snippet initializes a D3.js number formatter and defines an array of test cases. Each test case includes 'start' and 'end' rotation values, and an 'expected' array of intermediate rotation values, used to validate interpolation logic.

```javascript
var format = d3.format(",.2f"); var tests = [ {start: 170, end: 225, expected: [ 170.00, -176.25, -162.50, -148.75, -135.00]}, {start: 225, end: 170, expected: [-135.00, -148.75, -162.50, -176.25, 170.00]}, {start: -170, end: -225, expected: [-170.00, 176.25, 162.50, 148.75, 135.00]}, {start: -225, end: -170, expected: [ 135.00, 148.75, 162.50, 176.25, -170.00]}, {start: -170, end: 170, expected: [-170.00, -175.00, 180.00, 175.00, 170.00]}, {start: -170, end: 0, expected: [-170.00, -127.50, -85.00, -42.50, 0.00]}, {start: 170, end: 0, expected: [ 170.00, 127.50, 85.00, 42.50, 0.00]}, {start: -180, end: 90, expected: [ 180.00, 157.50, 135.00, 112.50, 90.00]}, {start: 180, end: 90, expected: [ 180.00, 157.50, 135.00, 112.50, 90.00]}, {start: -180, end: -90, expected: [-180.00, -157.50, -135.00, -112.50, -90.00]}, {start: 180, end: -90, expected: [ 180.00, -157.50, -135.00, -112.50, -90.00]}, {start: 780, end: -90, expected: [ 60.00, 22.50, -15.00, -52.50, -90.00]} ];
```

--------------------------------

### Preparing Data for Datamaps (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/highmaps_world.html

This JavaScript code block demonstrates how to transform a raw array of country data (ISO codes and values) into the specific object format required by the Datamaps library. It calculates the minimum and maximum values from the series to create a D3 linear color scale, which is then used to assign a unique fill color to each country based on its value.

```JavaScript
var series = [ ["BLR",75],["BLZ",43],["RUS",50],["RWA",88],["SRB",21],["TLS",43],
 ["REU",21],["TKM",19],["TJK",60],["ROU",4],["TKL",44],["GNB",38],
 ["GUM",67],["GTM",2],["SGS",95],["GRC",60],["GNQ",57],["GLP",53],
 ["JPN",59],["GUY",24],["GGY",4],["GUF",21],["GEO",42],["GRD",65],
 ["GBR",14],["GAB",47],["SLV",15],["GIN",19],["GMB",63],["GRL",56],
 ["ERI",57],["MNE",93],["MDA",39],["MDG",71],["MAF",16],["MAR",8],
 ["MCO",25],["UZB",81],["MMR",21],["MLI",95],["MAC",33],["MNG",93],
 ["MHL",15],["MKD",52],["MUS",19],["MLT",69],["MWI",37],["MDV",44],
 ["MTQ",13],["MNP",21],["MSR",89],["MRT",20],["IMN",72],["UGA",59],
 ["TZA",62],["MYS",75],["MEX",80],["ISR",77],["FRA",54],["IOT",56],
 ["SHN",91],["FIN",51],["FJI",22],["FLK",4],["FSM",69],["FRO",70],
 ["NIC",66],["NLD",53],["NOR",7],["NAM",63],["VUT",15],["NCL",66],
 ["NER",34],["NFK",33],["NGA",45],["NZL",96],["NPL",21],["NRU",13],
 ["NIU",6],["COK",19],["XKX",32],["CIV",27],["CHE",65],["COL",64],
 ["CHN",16],["CMR",70],["CHL",15],["CCK",85],["CAN",76],["COG",20],
 ["CAF",93],["COD",36],["CZE",77],["CYP",65],["CXR",14],["CRI",31],
 ["CUW",67],["CPV",63],["CUB",40],["SWZ",58],["SYR",96],["SXM",31]]; // Datamaps expect data in format:
// { "USA": { "fillColor": "#42a844", numberOfWhatever: 75
```

--------------------------------

### Dynamically Updating Datamaps Choropleth (First)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/update-choropleth-reset.html

This JavaScript snippet uses `window.setTimeout` to trigger an update to the `election` Datamap's choropleth data after 1.5 seconds. It updates the fill colors for New York and New Jersey to 'blue', applies a custom fill key and data to Texas, and sets Florida's fill color directly.

```JavaScript
window.setTimeout(function() { election.updateChoropleth({ NY: 'blue', NJ: 'blue', TX: { fillKey: 'Trouble', numbers: 555 }, FL: { fillColor: 'blue' } }) }, 1500)
```

--------------------------------

### Updating Datamap Choropleth After 1 Second (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/plugins.html

This JavaScript snippet uses `setTimeout` to update the 'election' Datamap's choropleth after a 1-second delay. It changes the color of the USA to blue and Canada to yellow, also updating Canada's 'peaceTalks' data property.

```javascript
window.setTimeout(function() { election.updateChoropleth({ 'USA': { color: 'blue' }, 'CAN': { color: 'yellow', peaceTalks: 40 } }) }, 1000);
```

--------------------------------

### Adding Delayed Bubbles to Datamap (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/plugins.html

This JavaScript snippet uses `setTimeout` to add another bubble, 'Tsar Bomba', to the 'election' Datamap after a 2-second delay. This bubble is larger and represents a different historical event, demonstrating how bubbles can be added dynamically with an exit delay.

```javascript
window.setTimeout(function() { election.bubbles([{ name: 'Tsar Bomba', radius: 70, yeild: 50000, country: 'USSR', fillKey: 'RUS', significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%', date: '1961-10-31', latitude: 73.482, longitude: 54.5854 }], {exitDelay: 1000}); }, 2000);
```

--------------------------------

### Adding Initial Bubbles to Datamap (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/plugins.html

This JavaScript snippet adds a bubble representing the 'Castle Bravo' nuclear test to the 'election' Datamap. The bubble is configured with properties like name, radius, yield, country, significance, fill key, date, latitude, and longitude, visualizing a specific event on the map.

```javascript
election.bubbles([ { name: 'Castle Bravo', radius: 25, yeild: 15000, country: 'USA', significance: 'First dry fusion fuel "staged" thermonuclear weapon; a serious nuclear fallout accident occurred', fillKey: 'USA', date: '1954-03-01', latitude: 11.415, longitude: 165.1619 } ], { });
```

--------------------------------

### Adding a Custom Legend to Datamap (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/plugins.html

This JavaScript snippet defines a configuration object 'l' for the Datamap legend, specifying a title, default fill name, and custom labels for different fill keys. It then applies this configuration to the 'election' Datamap, adding a custom legend to the visualization.

```javascript
var l = { legendTitle: "Where Have We Been", defaultFillName: "Whats left", labels: { Visited: "Fred", spouse: "Wilma", together: "Together", separately: "Separately", }, }; election.legend(l);
```

--------------------------------

### Styling Map Paths in Datamaps CSS

Source: https://github.com/markmarkoh/datamaps/blob/master/src/tests/SpecRunner_AllStripped.html

Defines the visual appearance of map paths, setting a white stroke and a 1px stroke width. The fill color is commented out but shows an example.

```CSS
path { /*fill: #BADA55;*/ stroke: #FFFFFF; stroke-width: 1px; }
```

--------------------------------

### Disabling Hover Effects and Popups in Datamaps

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This example illustrates how to disable interactive features such as highlighting on hover and popups. By setting 'highlightOnHover' and 'popupOnHover' to 'false' within the 'geographyConfig' object, you can control the user interaction with the map.

```JavaScript
var map = new Datamap({
        element: document.getElementById('container'),
        geographyConfig: {
            highlightOnHover: false,
            popupOnHover: false
        }
    });
```

--------------------------------

### Instantiating Datamap and Zoom Functionality - JavaScript

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/zoom-and-scale.html

Creates a new instance of the `Datamap` class, which in turn initializes the Datamaps library and sets up the interactive zoom and pan features upon map readiness.

```JavaScript
new Datamap();
```

--------------------------------

### Initializing World Map with CDN using Datamaps

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This snippet demonstrates how to set up a basic world map using Datamaps by including the necessary D3.js, Topojson, and Datamaps scripts from a CDN. It requires a container element with specified dimensions and relative positioning for the map to render correctly.

```HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>
<script>
    var map = new Datamap({element: document.getElementById('container')});
</script>
```

--------------------------------

### Styling SVG Paths in Datamaps (CSS)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/tests/SpecRunner_ClobberingTest.html

Defines the default stroke color and width for SVG path elements, typically representing countries or regions on a map. The `fill` property is commented out but shows an example of how to set the fill color.

```css
path { /*fill: #BADA55;*/ stroke: #FFFFFF; stroke-width: 1px; }
```

--------------------------------

### Initializing Responsive Datamap - JavaScript

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/responsive.html

This JavaScript snippet initializes a new Datamap instance, attaching it to an HTML element with the ID 'container1'. It also enables responsiveness and adds an event listener to resize the map whenever the browser window is resized.

```JavaScript
var map = new Datamap({ element: document.getElementById('container1'), responsive: true }); window.addEventListener('resize', function(event){ map.resize(); });
```

--------------------------------

### Initializing Datamaps with jQuery Plugin (HTML/JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This snippet shows how to initialize a Datamaps instance using the automatically created jQuery plugin. If jQuery is loaded before Datamaps, the `datamaps` plugin becomes available, allowing map creation by selecting an element and passing options.

```html
    <script>
        $("#container").datamaps(options);
    </script>
```

--------------------------------

### Styling SVG Paths in DataMaps (CSS)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/tests/SpecRunner_AllGlobal.html

This CSS rule targets SVG `path` elements, typically used to represent geographical regions in DataMaps. It sets a white stroke with a 1px width, and includes a commented-out fill color example for potential future use.

```CSS
path { /*fill: #BADA55;*/ stroke: #FFFFFF; stroke-width: 1px; }
```

--------------------------------

### Initializing Datamap with Custom Fills and Orthographic Projection (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/graticule.html

This snippet initializes a Datamap instance, setting up a world map within a specified HTML element. It defines custom fill colors based on data values and configures an orthographic projection with a specific rotation. It also includes sample data points to demonstrate the custom fills.

```JavaScript
//basic map config with custom fills, mercator projection
var map = new Datamap({
  scope: 'world',
  element: document.getElementById('container1'),
  projection: 'orthographic',
  fills: {
    defaultFill: 'rgba(0,0,0,0.7)',
    lt50: 'rgba(0,244,244,0.9)',
    gt50: 'red'
  },
  projectionConfig: {
    rotation: [97,-30]
  },
  data: {
    '071': {fillKey: 'lt50' },
    '001': {fillKey: 'gt50' }
  }
});
map.graticule();
```

--------------------------------

### Initializing a DataMaps Instance (JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/src/tests/SpecRunner_CountriesGlobal.html

This JavaScript function `makeMap` creates and returns a new DataMaps instance. It takes an HTML element `$el` as a parameter, which serves as the container for the map. The map is configured with a 'world' scope and includes geography options for highlighting borders on hover.

```JavaScript
function makeMap($el) { return new Map({ scope: 'world', el: $el, geography: { highlightBorderColor: '#222', highlightOnHover: true } }); }
```

--------------------------------

### Handling Datamaps Ready Event - JavaScript

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/zoom-and-scale.html

This callback function is executed once the Datamaps instance is fully loaded and ready. It initializes the `Zoom` functionality, passing the map container and the Datamaps instance to enable interactive zooming and panning.

```JavaScript
Datamap.prototype._handleMapReady = function(datamap) {
  this.zoom = new Zoom({
    $container: this.$container,
    datamap: datamap
  });
}
```

--------------------------------

### Initializing a Choropleth Map with Datamaps (HTML/JavaScript)

Source: https://github.com/markmarkoh/datamaps/blob/master/README.md

This HTML snippet initializes a Datamaps instance to create a choropleth world map. It defines custom fill colors for different data categories and assigns 'fillKey' values to specific countries (Ireland and USA). It also demonstrates drawing a legend for the map.

```HTML
<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },
        data: {
            IRL: {
                fillKey: 'LOW',
                numberOfThings: 2002
            },
            USA: {
                fillKey: 'MEDIUM',
                numberOfThings: 10381
            }
        }
    });

    // Draw a legend for this map
    map.legend();
</script>
```

--------------------------------

### Animating Expected Rotation Path with D3.js

Source: https://github.com/markmarkoh/datamaps/blob/master/src/js/components/d3/test/math/transform-rotate-test.html

This JavaScript function defines an animation for the 'expected' rotation. It uses `d3.transition` and `attrTween` to smoothly interpolate the `transform` attribute between the start and end rotation values, ensuring the shortest path is taken. The animation loops indefinitely by calling itself on 'end'.

```javascript
function animateExpected(d) { d3.select(this).transition()
 .duration(2500)
 .attrTween("transform", function(d) {
 var a = d.start % 360, b = d.end % 360;
 if (a - b > 180) b += 360;
 else if (b - a > 180) a += 360; // shortest path
 return d3.interpolateString("rotate(" + a + ")", "rotate(" + b + ")");
 })
 .each("end", animateExpected);
}
```

--------------------------------

### Capturing Mouse Coordinates with D3.js

Source: https://github.com/markmarkoh/datamaps/blob/master/src/js/components/d3/test/event/mouse-test.html

This snippet initializes a D3.js selection for the body, appends a styled div and a span element. It then attaches a 'mousemove' event listener to the window, using D3.js to get the mouse coordinates relative to the appended div and display them in the span. It requires the D3.js library.

```JavaScript
var body = d3.select("body");
var div = body.append("div")
 .style("width", "1000px")
 .style("height", "500px")
 .style("border", "solid black 1px")
 .style("cursor", "crosshair");
var span = body.append("span");
d3.select(window).on("mousemove", function() { span.text(d3.mouse(div[0][0])); });
```

--------------------------------

### Initializing Zoom Functionality for Datamaps - JavaScript

Source: https://github.com/markmarkoh/datamaps/blob/master/src/examples/zoom-and-scale.html

Initializes the `Zoom` class, setting up references to UI elements, defining scale limits, and storing the Datamaps instance. It extends the instance with provided arguments and calls the `init` method to set up event listeners and D3.js zoom behavior.

```JavaScript
function Zoom(args) {
  $.extend(this, {
    $buttons: $(".zoom-button"),
    $info: $("#zoom-info"),
    scale: {
      max: 50,
      currentShift: 0
    },
    $container: args.$container,
    datamap: args.datamap
  });
  this.init();
}
```