Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Responsive, choropleth animations, readme and changelog
- Loading branch information
Drew Machat
committed
May 26, 2015
1 parent
a75027e
commit 4e484c8
Showing
7 changed files
with
147 additions
and
46 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| ## 0.1.0 | ||
| ###### _May 25, 2015_ | ||
|
|
||
| ##### Breaking Changes | ||
| - Refactored scope API variables | ||
| - `scope.map` is now the only required input, and maps directly to the object required by Datamaps | ||
|
|
||
| ##### General | ||
| - Updated Datamaps dependency to v0.4.0 | ||
| - Remove unneccessary non-semantic markup hindering Datamap rendering | ||
| - API for loading plugins for Datamaps has been added | ||
| - Example plugin with a custom legend included in Readme | ||
| - Responsive binding has been added | ||
| - Zoomable option has been added | ||
| - Allow updateChoropleth when geographies don't change | ||
| - Slightly cleaner watch |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,114 +1,166 @@ | ||
| 'use strict'; | ||
|
|
||
| angular.module('datamaps', []); | ||
|
|
||
| 'use strict'; | ||
| angular.module('datamaps').directive('datamap', [ | ||
| '$compile', | ||
| function ($compile) { | ||
|
|
||
| angular | ||
|
|
||
| .module('datamaps') | ||
|
|
||
| .directive('datamap', ['$window', function($window) { | ||
| return { | ||
| restrict: 'EA', | ||
| scope: { | ||
| map: '=', | ||
| plugins: '=?', | ||
| zoomable: '@?', | ||
| onClick: '&?' | ||
| map: '=', //datamaps objects [required] | ||
| plugins: '=?', //datamaps plugins [optional] | ||
| zoomable: '@?', //zoomable toggle [optional] | ||
| onClick: '&?', //geography onClick event [optional] | ||
| }, | ||
| link: function (scope, element, attrs) { | ||
| link: function(scope, element, attrs) { | ||
|
|
||
| // Generate base map options | ||
| function mapOptions() { | ||
| return { | ||
| element: element[0].children[0], | ||
| element: element[0], | ||
| scope: 'usa', | ||
| height: scope.height, | ||
| width: scope.width, | ||
| fills: { defaultFill: '#b9b9b9' }, | ||
| fills: { | ||
| defaultFill: '#b9b9b9' | ||
| }, | ||
| data: {}, | ||
| done: function (datamap) { | ||
| done: function(datamap) { | ||
| function redraw() { | ||
| datamap.svg.selectAll('g').attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')'); | ||
| datamap.svg.selectAll('g') | ||
| .attr('transform', 'translate(' + d3.event.translate + ')scale(' + d3.event.scale + ')'); | ||
| } | ||
| if (angular.isDefined(attrs.onClick)) { | ||
| datamap.svg.selectAll('.datamaps-subunit').on('click', function (geography) { | ||
| datamap.svg.selectAll('.datamaps-subunit').on('click', function(geography) { | ||
| scope.onClick()(geography); | ||
| }); | ||
| } | ||
| if (angular.isDefined(attrs.zoomable)) { | ||
| datamap.svg.call(d3.behavior.zoom().on('zoom', redraw)); | ||
| datamap.svg.call(d3.behavior.zoom() | ||
| .on('zoom', redraw)); | ||
| } | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| scope.api = { | ||
| refresh: function (map) { | ||
|
|
||
| // Fully refresh directive | ||
| refresh: function(map) { | ||
| scope.api.updateWithOptions(map); | ||
| }, | ||
| updateWithOptions: function (map) { | ||
|
|
||
| // Update chart with new options | ||
| updateWithOptions: function(map) { | ||
|
|
||
| // Clearing | ||
| scope.api.clearElement(); | ||
|
|
||
| // Update bounding box | ||
| scope.width = (map.options || {}).width || null; | ||
| scope.height = (map.options || {}).height || (scope.width ? scope.width * 0.5 : null); | ||
| scope.legendHeight = (map.options || {}).legendHeight || 50; | ||
|
|
||
| // Set a few defaults for the directive | ||
| scope.mapOptions = mapOptions(); | ||
|
|
||
| // Add the good stuff | ||
| scope.mapOptions = angular.extend(scope.mapOptions, map); | ||
|
|
||
| scope.datamap = new Datamap(scope.mapOptions); | ||
|
|
||
| // Add responsive listeners | ||
| if (scope.mapOptions.responsive) { | ||
| $window.addEventListener('resize', scope.api.resize); | ||
| } else { | ||
| $window.removeEventListener('resize', scope.api.resize); | ||
| } | ||
|
|
||
| // Update plugins | ||
| scope.api.updatePlugins(scope.datamap); | ||
|
|
||
| // Update options and choropleth | ||
| scope.api.refreshOptions(map.options); | ||
| scope.api.updateWithData(map.data); | ||
| }, | ||
| updatePlugins: function (datamap) { | ||
|
|
||
| // Add and initialize optional plugins | ||
| updatePlugins: function(datamap) { | ||
| if (!scope.plugins) { | ||
| return; | ||
| } | ||
| angular.forEach(scope.plugins, function (plugin, name) { | ||
| angular.forEach(scope.plugins, function(plugin, name) { | ||
| datamap.addPlugin(name, plugin); | ||
| datamap[name](); | ||
| }); | ||
| }, | ||
| refreshOptions: function (options) { | ||
|
|
||
| // Set options on the datamap | ||
| refreshOptions: function(options) { | ||
| if (!options) { | ||
| return; | ||
| } | ||
|
|
||
| // set labels | ||
| if (options.labels) { | ||
| scope.datamap.labels({ | ||
| labelColor: options.labelColor ? options.labelColor : '#333333', | ||
| fontSize: options.labelSize ? options.labelSize : 12 | ||
| }); | ||
| } | ||
|
|
||
| // set legend | ||
| if (options.legend) { | ||
| scope.datamap.legend(); | ||
| } | ||
| }, | ||
| updateWithData: function (data) { | ||
|
|
||
| // Trigger datamaps resize method | ||
| resize: function() { | ||
| console.log('resize attempt'); | ||
| scope.datamap.resize(); | ||
| }, | ||
|
|
||
| // Update chart with new data | ||
| updateWithData: function(data) { | ||
| scope.datamap.updateChoropleth(data); | ||
| scope.api.updatePlugins(scope.datamap); | ||
| }, | ||
|
|
||
| // Fully clear directive element | ||
| clearElement: function () { | ||
| scope.datamap = null; | ||
| element.empty(); | ||
| var mapContainer = $compile('<div style="position: relative; display: block; padding-bottom: {{ legendHeight }}px;"></div>')(scope); | ||
| element.append(mapContainer); | ||
| element | ||
| .empty() | ||
| .css({ | ||
| 'position': 'relative', | ||
| 'display': 'block', | ||
| 'padding-bottom': scope.legendHeight + 'px' | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| // Watch data changing | ||
| scope.$watch('map', function (map, old) { | ||
| scope.$watch('map', function(map, old) { | ||
| // Return if no data | ||
| if (angular.isUndefined(map) || angular.equals({}, map)) { | ||
| if (!map || angular.equals({}, map)) { | ||
| return; | ||
| } | ||
| // Init the datamap, or update data | ||
| if (!scope.datamap || angular.equals(old.data, map.data)) { | ||
| // Allow animated transition when geos don't change | ||
| // or fully refresh | ||
| if (!scope.datamap || angular.equals(map.data, old.data)) { | ||
| scope.api.refresh(map); | ||
| } else { | ||
| } else if ((map.options || {}).staticGeoData) { | ||
| scope.api.updateWithData(map.data); | ||
| } else { | ||
| scope.api.refresh(map); | ||
| } | ||
| }, true); | ||
| } | ||
| }; | ||
| } | ||
| ]); | ||
| }]); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters