Skip to content

Instantly share code, notes, and snippets.

@jowang0319

jowang0319/countries.json

Created November 5, 2015 19:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jowang0319/d31f5412213d214c60e7 to your computer and use it in GitHub Desktop.
Save jowang0319/d31f5412213d214c60e7 to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
countries.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
d3-legend.min.js
!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var v=d.d3_calcType(c,t,j,k,o,r),w=a.append("g").attr("class",l+"legendCells"),x=w.selectAll("."+l+"cell").data(v.data),y=x.enter().append("g",".cell").attr("class",l+"cell").style("opacity",1e-6);shapeEnter=y.append(e).attr("class",l+"swatch"),shapes=x.select("g."+l+"cell "+e),d.d3_addEvents(y,u),x.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(e,shapes,g,f,h,b),d.d3_addText(w,y,v.labels,l);var z=x.select("text"),A=shapes[0].map(function(a){return a.getBBox()});m?shapes.attr("class",function(a){return l+"swatch "+v.feature(a)}):"line"==e?shapes.style("stroke",v.feature):shapes.style("fill",v.feature);var B,C,D="start"==q?0:"middle"==q?.5:1;"vertical"===s?(B=function(a,b){return"translate(0, "+b*(A[b].height+i)+")"},C=function(a,b){return"translate("+(A[b].width+A[b].x+p)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===s&&(B=function(a,b){return"translate("+b*(A[b].width+i)+",0)"},C=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(A[b].height+A[b].y+p+8)+")"}),d.d3_placement(s,x,B,z,C,q),d.d3_title(a,w,n,l),x.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=15,h=10,i=2,j=[5],k=[],l="",m=!1,n="",o=d3.format(".01f"),p=10,q="middle",r="to",s="vertical",t=!1,u=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(j=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c||"path"==c&&"string"==typeof d)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapeHeight=function(b){return arguments.length?(g=+b,a):a},a.shapeRadius=function(b){return arguments.length?(h=+b,a):a},a.shapePadding=function(b){return arguments.length?(i=+b,a):a},a.labels=function(b){return arguments.length?(k=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(q=b),a):a},a.labelFormat=function(b){return arguments.length?(o=b,a):a},a.labelOffset=function(b){return arguments.length?(p=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(r=b,a):a},a.useClass=function(b){return arguments.length?((b===!0||b===!1)&&(m=b),a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(s=b),a):a},a.ascending=function(b){return arguments.length?(t=!!b,a):a},a.classPrefix=function(b){return arguments.length?(l=b,a):a},a.title=function(b){return arguments.length?(n=b,a):a},d3.rebind(a,u,"on"),a}},{"./legend":2}],2:[function(a,b,c){b.exports={d3_identity:function(a){return a},d3_mergeLabels:function(a,b){if(0===b.length)return a;a=a?a:[];for(var c=b.length;c<a.length;c++)b.push(a[c]);return b},d3_linearLegend:function(a,b,c){var d=[];if(b.length>1)d=b;else for(var e=a.domain(),f=(e[e.length-1]-e[0])/(b-1),g=0;b>g;g++)d.push(e[0]+g*f);var h=d.map(c);return{data:d,labels:h,feature:function(b){return a(b)}}},d3_quantLegend:function(a,b,c){var d=a.range().map(function(d){var e=a.invertExtent(d);b(e[0]),b(e[1]);return b(e[0])+" "+c+" "+b(e[1])});return{data:a.range(),labels:d,feature:this.d3_identity}},d3_ordinalLegend:function(a){return{data:a.domain(),labels:a.domain(),feature:function(b){return a(b)}}},d3_drawShapes:function(a,b,c,d,e,f){"rect"===a?b.attr("height",c).attr("width",d):"circle"===a?b.attr("r",e):"line"===a?b.attr("x1",0).attr("x2",d).attr("y1",0).attr("y2",0):"path"===a&&b.attr("d",f)},d3_addText:function(a,b,c,d){b.append("text").attr("class",d+"label"),a.selectAll("g.cell text").data(c).text(this.d3_identity)},d3_calcType:function(a,b,c,d,e,f){var g=a.ticks?this.d3_linearLegend(a,c,e):a.invertExtent?this.d3_quantLegend(a,e,f):this.d3_ordinalLegend(a);return g.labels=this.d3_mergeLabels(g.labels,d),b&&(g.labels=this.d3_reverse(g.labels),g.data=this.d3_reverse(g.data)),g},d3_reverse:function(a){for(var b=[],c=0,d=a.length;d>c;c++)b[c]=a[d-c-1];return b},d3_placement:function(a,b,c,d,e,f){b.attr("transform",c),d.attr("transform",e),"horizontal"===a&&d.style("text-anchor",f)},d3_addEvents:function(a,b){var c=this;a.on("mouseover.legend",function(a){c.d3_cellOver(b,a,this)}).on("mouseout.legend",function(a){c.d3_cellOut(b,a,this)}).on("click.legend",function(a){c.d3_cellClick(b,a,this)})},d3_cellOver:function(a,b,c){a.cellover.call(c,b)},d3_cellOut:function(a,b,c){a.cellout.call(c,b)},d3_cellClick:function(a,b,c){a.cellclick.call(c,b)},d3_title:function(a,b,c,d){if(""!==c){a.append("text").attr("class",d+"legendTitle").text(c);var e=a.select("."+d+"legendTitle").map(function(a){return a[0].getBBox().height})[0],f=-b.map(function(a){return a[0].getBBox().x})[0];b.attr("transform","translate("+f+","+(e+10)+")")}}}},{}],3:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var s=d.d3_calcType(c,q,h,i,l,o),t=a.append("g").attr("class",j+"legendCells"),u=t.selectAll("."+j+"cell").data(s.data),v=u.enter().append("g",".cell").attr("class",j+"cell").style("opacity",1e-6);shapeEnter=v.append(e).attr("class",j+"swatch"),shapes=u.select("g."+j+"cell "+e),d.d3_addEvents(v,r),u.exit().transition().style("opacity",0).remove(),"line"===e?(d.d3_drawShapes(e,shapes,0,f),shapes.attr("stroke-width",s.feature)):d.d3_drawShapes(e,shapes,s.feature,s.feature,s.feature,b),d.d3_addText(t,v,s.labels,j);var w,x,y=u.select("text"),z=shapes[0].map(function(a,b){var d=a.getBBox(),f=c(s.data[b]);return"line"===e&&"horizontal"===p?d.height=d.height+f:"line"===e&&"vertical"===p&&(d.width=d.width),d}),A=d3.max(z,function(a){return a.height+a.y}),B=d3.max(z,function(a){return a.width+a.x}),C="start"==n?0:"middle"==n?.5:1;"vertical"===p?(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.height});return"translate(0, "+(c+b*g)+")"},x=function(a,b){return"translate("+(B+m)+","+(z[b].y+z[b].height/2+5)+")"}):"horizontal"===p&&(w=function(a,b){var c=d3.sum(z.slice(0,b+1),function(a){return a.width});return"translate("+(c+b*g)+",0)"},x=function(a,b){return"translate("+(z[b].width*C+z[b].x)+","+(A+m)+")"}),d.d3_placement(p,u,w,y,x,n),d.d3_title(a,t,k,j),u.transition().style("opacity",1)}var b,c=d3.scale.linear(),e="rect",f=15,g=2,h=[5],i=[],j="",k="",l=d3.format(".01f"),m=10,n="middle",o="to",p="vertical",q=!1,r=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(b){return arguments.length?(c=b,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(h=b),a):a},a.shape=function(c,d){return arguments.length?(("rect"==c||"circle"==c||"line"==c)&&(e=c,b=d),a):a},a.shapeWidth=function(b){return arguments.length?(f=+b,a):a},a.shapePadding=function(b){return arguments.length?(g=+b,a):a},a.labels=function(b){return arguments.length?(i=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(l=b,a):a},a.labelOffset=function(b){return arguments.length?(m=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(o=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(p=b),a):a},a.ascending=function(b){return arguments.length?(q=!!b,a):a},a.classPrefix=function(b){return arguments.length?(j=b,a):a},a.title=function(b){return arguments.length?(k=b,a):a},d3.rebind(a,r,"on"),a}},{"./legend":2}],4:[function(a,b,c){var d=a("./legend");b.exports=function(){function a(a){var t=d.d3_calcType(b,r,i,j,m,p),u=a.append("g").attr("class",k+"legendCells"),v=u.selectAll("."+k+"cell").data(t.data),w=v.enter().append("g",".cell").attr("class",k+"cell").style("opacity",1e-6);shapeEnter=w.append(c).attr("class",k+"swatch"),shapes=v.select("g."+k+"cell "+c),d.d3_addEvents(w,s),v.exit().transition().style("opacity",0).remove(),d.d3_drawShapes(c,shapes,f,e,g,t.feature),d.d3_addText(u,w,t.labels,k);var x,y,z=v.select("text"),A=shapes[0].map(function(a){return a.getBBox()}),B=d3.max(A,function(a){return a.height}),C=d3.max(A,function(a){return a.width}),D="start"==n?0:"middle"==n?.5:1;"vertical"===q?(x=function(a,b){return"translate(0, "+b*(B+h)+")"},y=function(a,b){return"translate("+(C+o)+","+(A[b].y+A[b].height/2+5)+")"}):"horizontal"===q&&(x=function(a,b){return"translate("+b*(C+h)+",0)"},y=function(a,b){return"translate("+(A[b].width*D+A[b].x)+","+(B+o)+")"}),d.d3_placement(q,v,x,z,y,n),d.d3_title(a,u,l,k),v.transition().style("opacity",1)}var b=d3.scale.linear(),c="path",e=15,f=15,g=10,h=5,i=[5],j=[],k="",l="",m=d3.format(".01f"),n="middle",o=10,p="to",q="vertical",r=!1,s=d3.dispatch("cellover","cellout","cellclick");return a.scale=function(c){return arguments.length?(b=c,a):a},a.cells=function(b){return arguments.length?((b.length>1||b>=2)&&(i=b),a):a},a.shapePadding=function(b){return arguments.length?(h=+b,a):a},a.labels=function(b){return arguments.length?(j=b,a):a},a.labelAlign=function(b){return arguments.length?(("start"==b||"end"==b||"middle"==b)&&(n=b),a):a},a.labelFormat=function(b){return arguments.length?(m=b,a):a},a.labelOffset=function(b){return arguments.length?(o=+b,a):a},a.labelDelimiter=function(b){return arguments.length?(p=b,a):a},a.orient=function(b){return arguments.length?(b=b.toLowerCase(),("horizontal"==b||"vertical"==b)&&(q=b),a):a},a.ascending=function(b){return arguments.length?(r=!!b,a):a},a.classPrefix=function(b){return arguments.length?(k=b,a):a},a.title=function(b){return arguments.length?(l=b,a):a},d3.rebind(a,s,"on"),a}},{"./legend":2}],5:[function(a,b,c){d3.legend={color:a("./color"),size:a("./size"),symbol:a("./symbol")}},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);
Raw
data.csv
Country Name Country Code 2015
Aruba ABW
Andorra AND 2.1
Afghanistan AFG 66.3
Angola AGO 96
Albania ALB 12.5
Arab World ARB 27.98348511
United Arab Emirates ARE 5.9
Argentina ARG 11.1
Armenia ARM 12.6
American Samoa ASM
Antigua and Barbuda ATG 5.8
Australia AUS 3
Austria AUT 2.9
Azerbaijan AZE 27.9
Burundi BDI 54.1
Belgium BEL 3.3
Benin BEN 64.2
Burkina Faso BFA 60.9
Bangladesh BGD 30.7
Bulgaria BGR 9.3
Bahrain BHR 5.3
Bahamas, The BHS 9.9
Bosnia and Herzegovina BIH 5.1
Belarus BLR 3.4
Belize BLZ 14.2
Bermuda BMU
Bolivia BOL 30.6
Brazil BRA 14.6
Barbados BRB 12
Brunei Darussalam BRN 8.6
Bhutan BTN 27.2
Botswana BWA 34.8
Central African Republic CAF 91.5
Canada CAN 4.3
Central Europe and the Baltics CEB 5.597553933
Switzerland CHE 3.4
Channel Islands CHI
Chile CHL 7
China CHN 9.2
Cote d'Ivoire CIV 66.6
Cameroon CMR 57.1
Congo, Rep. COG 33.2
Colombia COL 13.6
Comoros COM 55.1
Cabo Verde CPV 20.7
Costa Rica CRI 8.5
Caribbean small states CSS 16.76787416
Cuba CUB 4
Curacao CUW
Cayman Islands CYM
Cyprus CYP 2.5
Czech Republic CZE 2.8
Germany DEU 3.1
Djibouti DJI 54.2
Dominica DMA 19.6
Denmark DNK 2.9
Dominican Republic DOM 25.7
Algeria DZA 21.9
East Asia & Pacific (developing only) EAP 14.9
East Asia & Pacific (all income levels) EAS 14.18407019
Europe & Central Asia (developing only) ECA 17.8
Europe & Central Asia (all income levels) ECS 9.666804558
Ecuador ECU 18.4
Egypt, Arab Rep. EGY 20.3
Euro area EMU 3.272240384
Eritrea ERI 34.1
Spain ESP 3.5
Estonia EST 2.3
Ethiopia ETH 41.4
European Union EUU 3.71158091
Fragile and conflict affected situations FCS 55.39801438
Finland FIN 1.9
Fiji FJI 19.1
France FRA 3.5
Faeroe Islands FRO
Micronesia, Fed. Sts. FSM 28.6
Gabon GAB 36.1
United Kingdom GBR 3.5
Georgia GEO 10.6
Ghana GHA 42.8
Guinea GIN 61
Gambia, The GMB 47.9
Guinea-Bissau GNB 60.3
Equatorial Guinea GNQ 68.2
Greece GRC 3.6
Grenada GRD 10.8
Greenland GRL
Guatemala GTM 24.3
Guam GUM
Guyana GUY 32
High income HIC 5.8
Hong Kong SAR, China HKG
Honduras HND 17.4
Heavily indebted poor countries (HIPC) HPC 53.31691043
Croatia HRV 3.6
Haiti HTI 52.2
Hungary HUN 5.3
Indonesia IDN 22.8
Isle of Man IMN
India IND 37.9
Not classified INX
Ireland IRL 3
Iran, Islamic Rep. IRN 13.4
Iraq IRQ 26.5
Iceland ISL 1.6
Israel ISR 3.2
Italy ITA 2.9
Jamaica JAM 13.5
Jordan JOR 15.4
Japan JPN 2
Kazakhstan KAZ 12.6
Kenya KEN 35.5
Kyrgyz Republic KGZ 19
Cambodia KHM 24.6
Kiribati KIR 43.6
St. Kitts and Nevis KNA 8.4
Korea, Rep. KOR 2.9
Kosovo KSV
Kuwait KWT 7.3
Latin America & Caribbean (developing only) LAC 15.9
Lao PDR LAO 50.7
Lebanon LBN 7.1
Liberia LBR 52.8
Libya LBY 11.4
St. Lucia LCA 12.7
Latin America & Caribbean (all income levels) LCN 15.22166694
Least developed countries: UN classification LDC 51.3884512
Low income LIC 53.1
Liechtenstein LIE
Sri Lanka LKA 8.4
Lower middle income LMC 40
Low & middle income LMY 35.2
Lesotho LSO 69.2
Lithuania LTU 3.3
Luxembourg LUX 1.5
Latvia LVA 6.9
Macao SAR, China MAC
St. Martin (French part) MAF
Morocco MAR 23.7
Monaco MCO 2.8
Moldova MDA 13.6
Madagascar MDG 35.9
Maldives MDV 7.4
Middle East & North Africa (all income levels) MEA 19.6592789
Mexico MEX 11.3
Marshall Islands MHL 29.6
Middle income MIC 31.2
Macedonia, FYR MKD 4.8
Mali MLI 74.5
Malta MLT 5.1
Myanmar MMR 39.5
Middle East & North Africa (developing only) MNA 20.8
Montenegro MNE 4.3
Mongolia MNG 19
Northern Mariana Islands MNP
Mozambique MOZ 56.7
Mauritania MRT 65.1
Mauritius MUS 11.8
Malawi MWI 43.4
Malaysia MYS 6
North America NAC 5.486029559
Namibia NAM 32.8
New Caledonia NCL
Niger NER 57.1
Nigeria NGA 69.4
Nicaragua NIC 18.8
Netherlands NLD 3.2
High income: nonOECD NOC 10.18421434
Norway NOR 2
Nepal NPL 29.4
New Zealand NZL 4.7
High income: OECD OEC 4.10710099
OECD members OED 5.850804182
Oman OMN 9.9
Other small states OSS 45.47886773
Pakistan PAK 65.8
Panama PAN 14.6
Peru PER 13.1
Philippines PHL 22.2
Palau PLW 14.2
Papua New Guinea PNG 44.5
Poland POL 4.5
Puerto Rico PRI
Korea, Dem. Rep. PRK 19.7
Portugal PRT 3
Paraguay PRY 17.5
Pacific island small states PSS 22.2932575
French Polynesia PYF
Qatar QAT 6.8
Romania ROU 9.7
Russian Federation RUS 8.2
Rwanda RWA 31.1
South Asia SAS 41.9
Saudi Arabia SAU 12.5
Sudan SDN 47.6
Senegal SEN 41.7
Singapore SGP 2.1
Solomon Islands SLB 23.6
Sierra Leone SLE 87.1
El Salvador SLV 14.4
San Marino SMR 2.6
Somalia SOM 85
Serbia SRB 5.9
Sub-Saharan Africa (developing only) SSA 56.3
South Sudan SSD 60.3
Sub-Saharan Africa (all income levels) SSF 56.35347277
Small states SST 39.56158411
Sao Tome and Principe STP 34.6
Suriname SUR 19
Slovak Republic SVK 5.8
Slovenia SVN 2.1
Sweden SWE 2.4
Swaziland SWZ 44.5
Sint Maarten (Dutch part) SXM
Seychelles SYC 11.7
Syrian Arab Republic SYR 11.1
Turks and Caicos Islands TCA
Chad TCD 85
Togo TGO 52.3
Thailand THA 10.5
Tajikistan TJK 38.5
Turkmenistan TKM 43.7
Timor-Leste TLS 44.7
Tonga TON 14.4
Trinidad and Tobago TTO 18.2
Tunisia TUN 12.1
Turkey TUR 11.6
Tuvalu TUV 22.8
Taiwan, China TWN
Tanzania TZA 35.2
Uganda UGA 37.7
Ukraine UKR 7.7
Upper middle income UMC 15.2
Uruguay URY 8.7
United States USA 5.6
Uzbekistan UZB 33.9
St. Vincent and the Grenadines VCT 16.6
Venezuela, RB VEN 12.9
Virgin Islands (U.S.) VIR
Vietnam VNM 17.3
Vanuatu VUT 23.1
West Bank and Gaza PSE 18
World WLD 31.7
Samoa WSM 15
Yemen, Rep. YEM 33.8
South Africa ZAF 33.6
Congo, Dem. Rep. COD 74.5
Zambia ZMB 43.3
Zimbabwe ZWE 46.6
Raw
index.html
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="tipsy.css" rel="stylesheet" type="text/css" />
<style>
.countries {
stroke: #fff;
stroke-width:0.5px;
}
#ATA {
display:none;
}
.legendLinear text {
font-size: 9px;
}
.label{
stroke:lightgrey;
}
</style>
<body>
<div class="content">
<h1>Global Under Five Mortality Rate (Year2015)</h1>
<p><strong>Introduction: </strong> balabala </p>
<div id="map"></div>
</div>
</body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="d3-legend.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="jquery.tipsy.js"></script>
<script type="text/javascript">
var width = 1200,
height = 800;
var svg = d3.select('#map').append('svg')
.attr('width',width)
.attr('height',height);
var projection = d3.geo.mercator()
.scale(140)
.translate([width/2,height/2]);
var path = d3.geo.path()
.projection(projection);
var colors = d3.scale.linear().range(["#e0cfdd","#954586"])
.interpolate(d3.interpolateLab);
var countryById = d3.map();
queue()
.defer(d3.json,"countries.json")
.defer(d3.csv,'data.csv',typeAndSet)
.await(loaded);
function typeAndSet(d){
d.rate = +d["2015"]
d.country = d["Country Name"];
d.code = d["Country Code"];
countryById.set(d.code,d);
return d;
}
function getColor(d){
var dataRow = countryById.get(d.id);
if (dataRow){
console.log(dataRow);
return colors(dataRow.rate);
} else {
console.log("no dataRow", d);
return "#ccc";
}
}
function getText(d){
var dataRow = countryById.get(d.id);
if (dataRow){
console.log(dataRow);
return dataRow.country + ": " + dataRow.rate + "‰";
} else {
console.log("no dataRow",d);
return d.properties.name + ": no data";
}
}
function loaded(error,world,region){
console.log(world);
console.log(region);
colors.domain(d3.extent(region, function(d){return d.rate;}))
var countries = topojson.feature(world,world.objects.units).features;
svg.selectAll("path.countries")
.data(countries)
.enter()
.append("path")
.attr("class","countries")
.attr("id", function (d,i){return d.id;})
.attr('d',path)
.attr('fill',function(d,i){
console.log(d.properties.name);
return getColor(d);
})
.append("title")
.text(function(d){
return getText(d);
});
var linear = colors;
svg.append("g")
.attr("class","legendLinear")
.attr("transform","translate(20,20)");
var legendLinear = d3.legend.color()
.shapeWidth(30)
.orient('horizontal')
.scale(linear);
svg.select(".legendLinear")
.call(legendLinear);
$('svg path').tipsy({
gravity: 'nw',
fade: true,
html: true,
title: function() {
console.log(getText(this.__data__));
var name = getText(this.__data__)
return name;
}
});
};
</script>
</html>
Raw
jquery.tipsy.js
// tipsy, facebook style tooltips for jquery
// version 1.0.0a
// (c) 2008-2010 jason frame [jason@onehackoranother.com]
// released under the MIT license
(function($) {
function maybeCall(thing, ctx) {
return (typeof thing == 'function') ? (thing.call(ctx)) : thing;
};
function isElementInDOM(ele) {
while (ele = ele.parentNode) {
if (ele == document) return true;
}
return false;
};
function Tipsy(element, options) {
this.$element = $(element);
this.options = options;
this.enabled = true;
this.fixTitle();
};
Tipsy.prototype = {
show: function() {
var title = this.getTitle();
if (title && this.enabled) {
var $tip = this.tip();
$tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
$tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
$tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body);
var pos = $.extend({}, this.$element.offset(), {
width: this.$element[0].offsetWidth,
height: this.$element[0].offsetHeight
});
var actualWidth = $tip[0].offsetWidth,
actualHeight = $tip[0].offsetHeight,
gravity = maybeCall(this.options.gravity, this.$element[0]);
var tp;
switch (gravity.charAt(0)) {
case 'n':
tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 's':
tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
break;
case 'e':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
break;
case 'w':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
break;
}
if (gravity.length == 2) {
if (gravity.charAt(1) == 'w') {
tp.left = pos.left + pos.width / 2 - 15;
} else {
tp.left = pos.left + pos.width / 2 - actualWidth + 15;
}
}
$tip.css(tp).addClass('tipsy-' + gravity);
$tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0);
if (this.options.className) {
$tip.addClass(maybeCall(this.options.className, this.$element[0]));
}
if (this.options.fade) {
$tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity});
} else {
$tip.css({visibility: 'visible', opacity: this.options.opacity});
}
}
},
hide: function() {
if (this.options.fade) {
this.tip().stop().fadeOut(function() { $(this).remove(); });
} else {
this.tip().remove();
}
},
fixTitle: function() {
var $e = this.$element;
if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') {
$e.attr('original-title', $e.attr('title') || '').removeAttr('title');
}
},
getTitle: function() {
var title, $e = this.$element, o = this.options;
this.fixTitle();
var title, o = this.options;
if (typeof o.title == 'string') {
title = $e.attr(o.title == 'title' ? 'original-title' : o.title);
} else if (typeof o.title == 'function') {
title = o.title.call($e[0]);
}
title = ('' + title).replace(/(^\s*|\s*$)/, "");
return title || o.fallback;
},
tip: function() {
if (!this.$tip) {
this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
this.$tip.data('tipsy-pointee', this.$element[0]);
}
return this.$tip;
},
validate: function() {
if (!this.$element[0].parentNode) {
this.hide();
this.$element = null;
this.options = null;
}
},
enable: function() { this.enabled = true; },
disable: function() { this.enabled = false; },
toggleEnabled: function() { this.enabled = !this.enabled; }
};
$.fn.tipsy = function(options) {
if (options === true) {
return this.data('tipsy');
} else if (typeof options == 'string') {
var tipsy = this.data('tipsy');
if (tipsy) tipsy[options]();
return this;
}
options = $.extend({}, $.fn.tipsy.defaults, options);
function get(ele) {
var tipsy = $.data(ele, 'tipsy');
if (!tipsy) {
tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options));
$.data(ele, 'tipsy', tipsy);
}
return tipsy;
}
function enter() {
var tipsy = get(this);
tipsy.hoverState = 'in';
if (options.delayIn == 0) {
tipsy.show();
} else {
tipsy.fixTitle();
setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
}
};
function leave() {
var tipsy = get(this);
tipsy.hoverState = 'out';
if (options.delayOut == 0) {
tipsy.hide();
} else {
setTimeout(function() { if (tipsy.hoverState == 'out') tipsy.hide(); }, options.delayOut);
}
};
if (!options.live) this.each(function() { get(this); });
if (options.trigger != 'manual') {
var binder = options.live ? 'live' : 'bind',
eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus',
eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur';
this[binder](eventIn, enter)[binder](eventOut, leave);
}
return this;
};
$.fn.tipsy.defaults = {
className: null,
delayIn: 0,
delayOut: 0,
fade: false,
fallback: '',
gravity: 'n',
html: false,
live: false,
offset: 0,
opacity: 0.8,
title: 'title',
trigger: 'hover'
};
$.fn.tipsy.revalidate = function() {
$('.tipsy').each(function() {
var pointee = $.data(this, 'tipsy-pointee');
if (!pointee || !isElementInDOM(pointee)) {
$(this).remove();
}
});
};
// Overwrite this method to provide options on a per-element basis.
// For example, you could store the gravity in a 'tipsy-gravity' attribute:
// return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
// (remember - do not modify 'options' in place!)
$.fn.tipsy.elementOptions = function(ele, options) {
return $.metadata ? $.extend({}, options, $(ele).metadata()) : options;
};
$.fn.tipsy.autoNS = function() {
return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n';
};
$.fn.tipsy.autoWE = function() {
return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w';
};
/**
* yields a closure of the supplied parameters, producing a function that takes
* no arguments and is suitable for use as an autogravity function like so:
*
* @param margin (int) - distance from the viewable region edge that an
* element should be before setting its tooltip's gravity to be away
* from that edge.
* @param prefer (string, e.g. 'n', 'sw', 'w') - the direction to prefer
* if there are no viewable region edges effecting the tooltip's
* gravity. It will try to vary from this minimally, for example,
* if 'sw' is preferred and an element is near the right viewable
* region edge, but not the top edge, it will set the gravity for
* that element's tooltip to be 'se', preserving the southern
* component.
*/
$.fn.tipsy.autoBounds = function(margin, prefer) {
return function() {
var dir = {ns: prefer[0], ew: (prefer.length > 1 ? prefer[1] : false)},
boundTop = $(document).scrollTop() + margin,
boundLeft = $(document).scrollLeft() + margin,
$this = $(this);
if ($this.offset().top < boundTop) dir.ns = 'n';
if ($this.offset().left < boundLeft) dir.ew = 'w';
if ($(window).width() + $(document).scrollLeft() - $this.offset().left < margin) dir.ew = 'e';
if ($(window).height() + $(document).scrollTop() - $this.offset().top < margin) dir.ns = 's';
return dir.ns + (dir.ew ? dir.ew : '');
}
};
})(jQuery);
Raw
tipsy.css
.tipsy { font-size: 10px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner { background-color: #000; color: #FFF; max-width: 200px; padding: 5px 8px 4px 8px; text-align: center; }
/* Rounded corners */
.tipsy-inner { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
/* Uncomment for shadow */
/*.tipsy-inner { box-shadow: 0 0 5px #000000; -webkit-box-shadow: 0 0 5px #000000; -moz-box-shadow: 0 0 5px #000000; }*/
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed #000; }
/* Rules to colour arrows */
.tipsy-arrow-n { border-bottom-color: #000; }
.tipsy-arrow-s { border-top-color: #000; }
.tipsy-arrow-e { border-left-color: #000; }
.tipsy-arrow-w { border-right-color: #000; }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment