Skip to content

Instantly share code, notes, and snippets.

View TweededBadger's full-sized avatar

Will Jutsum TweededBadger

4 followers · 0 following
View GitHub Profile
@TweededBadger
TweededBadger / gist:dc3500298428bba3329f
Created September 17, 2014 20:41
@animlength: 5;
@from: 1;
@to: 12;
.loop (@index) when (@index =< @to) {
path:nth-of-type(@{index}){
-webkit-animation-delay: unit((@index/@to)*@animlength, s);
animation-delay: unit((@index/@to)*@animlength, s);
}
@TweededBadger
TweededBadger / gist:c142b797bd4325ac6d8e
Created October 16, 2014 10:15
sdffdadfdf
@TweededBadger
TweededBadger / index.html
Last active April 18, 2023 07:31
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Responsive SVG Map</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
@TweededBadger
TweededBadger / controllers.js
Created October 18, 2014 20:05
angular.module('SvgMapApp', [])
.controller('MainCtrl', ['$scope', function ($scope) {
}]);
@TweededBadger
TweededBadger / directives.js
Last active April 18, 2023 07:31
angular.module('SvgMapApp').directive('svgMap', ['$compile', function ($compile) {
return {
restrict: 'A',
templateUrl: 'img/Blank_US_Map.svg',
link: function (scope, element, attrs) {
}
}
}]);
@TweededBadger
TweededBadger / main.css
Last active April 18, 2023 07:30
svg .state {
stroke-width: 2;
stroke: #fff;
-webkit-transition: stroke 0.5s, stroke-width 0.5s;
-o-transition: stroke 0.5s, stroke-width 0.5s;
transition: stroke 0.5s, stroke-width 0.5s;
}
svg .state:hover , .state.active {
cursor: pointer;
@TweededBadger
TweededBadger / controllers.js
Created October 18, 2014 20:55
angular.module('SvgMapApp', [])
.controller('MainCtrl', ['$scope', function ($scope) {
var states = ["AL", "AK", "AS", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM", "FL", "GA", "GU", "HI", "ID", "IL",
"IN", "IA", "KS", "KY", "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", "NM",
"NY", "NC", "ND", "MP", "OH", "OK", "OR", "PW", "PA", "PR", "RI", "SC", "SD", "TN", "TX", "UT", "VT", "VI", "VA",
"WA", "WV", "WI", "WY"];
$scope.createDummyData = function () {
var dataTemp = {};
angular.forEach(states, function (state, key) {
dataTemp[state] = {value: Math.random()}
@TweededBadger
TweededBadger / directives.js
Last active April 18, 2023 07:30
// ...
angular.module('SvgMapApp').directive('region', [function () {
return {
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
scope.elementId = element.attr("id");
scope.regionClick = function () {
alert(scope.elementId);
@TweededBadger
TweededBadger / directives.js
Last active April 18, 2023 07:30
angular.module('SvgMapApp').directive('svgMap', ['$compile', function ($compile) {
return {
restrict: 'A',
templateUrl: 'img/Blank_US_Map.svg',
link: function (scope, element, attrs) {
var regions = element[0].querySelectorAll('.state');
angular.forEach(regions, function (path, key) {
var regionElement = angular.element(path);
regionElement.attr("region", "");
$compile(regionElement)(scope);
@TweededBadger
TweededBadger / dirctives.js
Last active April 18, 2023 07:30
angular.module('SvgMapApp').directive('svgMap', ['$compile', function ($compile) {
return {
restrict: 'A',
templateUrl: 'img/Blank_US_Map.svg',
link: function (scope, element, attrs) {
var regions = element[0].querySelectorAll('.state');
angular.forEach(regions, function (path, key) {
var regionElement = angular.element(path);
regionElement.attr("region", "");
regionElement.attr("dummy-data", "dummyData");