Last active
September 17, 2015 13:25
-
-
Save fabiomainardi/967918d24011a3e1a2c1 to your computer and use it in GitHub Desktop.
City Prosperity Index, with Slider
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
.d3-slider { | |
position: relative; | |
font-family: Verdana,Arial,sans-serif; | |
font-size: 1.1em; | |
border: 1px solid #aaaaaa; | |
z-index: 2; | |
} | |
.d3-slider-horizontal { | |
height: .8em; | |
} | |
.d3-slider-range { | |
background:#2980b9; | |
left:0px; | |
right:0px; | |
height: 0.8em; | |
position: absolute; | |
} | |
.d3-slider-range-vertical { | |
background:#2980b9; | |
left:0px; | |
right:0px; | |
position: absolute; | |
top:0; | |
} | |
.d3-slider-vertical { | |
width: .8em; | |
height: 100px; | |
} | |
.d3-slider-handle { | |
position: absolute; | |
width: 1.2em; | |
height: 1.2em; | |
border: 1px solid #d3d3d3; | |
border-radius: 4px; | |
background: #eee; | |
background: linear-gradient(to bottom, #eee 0%, #ddd 100%); | |
z-index: 3; | |
} | |
.d3-slider-handle:hover { | |
border: 1px solid #999999; | |
} | |
.d3-slider-horizontal .d3-slider-handle { | |
top: -.3em; | |
margin-left: -.6em; | |
} | |
.d3-slider-axis { | |
position: relative; | |
z-index: 1; | |
} | |
.d3-slider-axis-bottom { | |
top: .8em; | |
} | |
.d3-slider-axis-right { | |
left: .8em; | |
} | |
.d3-slider-axis path { | |
stroke-width: 0; | |
fill: none; | |
} | |
.d3-slider-axis line { | |
fill: none; | |
stroke: #aaa; | |
shape-rendering: crispEdges; | |
} | |
.d3-slider-axis text { | |
font-size: 11px; | |
} | |
.d3-slider-vertical .d3-slider-handle { | |
left: -.25em; | |
margin-left: 0; | |
margin-bottom: -.6em; | |
} |
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
/* | |
D3.js Slider | |
Inspired by jQuery UI Slider | |
Copyright (c) 2013, Bjorn Sandvik - http://blog.thematicmapping.org | |
BSD license: http://opensource.org/licenses/BSD-3-Clause | |
*/ | |
(function (root, factory) { | |
if (typeof define === 'function' && define.amd) { | |
// AMD. Register as an anonymous module. | |
define(['d3'], factory); | |
} else if (typeof exports === 'object') { | |
if (process.browser) { | |
// Browserify. Import css too using cssify. | |
require('./d3.slider.css'); | |
} | |
// Node. Does not work with strict CommonJS, but | |
// only CommonJS-like environments that support module.exports, | |
// like Node. | |
module.exports = factory(require('d3')); | |
} else { | |
// Browser globals (root is window) | |
root.d3.slider = factory(root.d3); | |
} | |
}(this, function (d3) { | |
return function module() { | |
"use strict"; | |
// Public variables width default settings | |
var min = 0, | |
max = 1, | |
step = 0.1, | |
animate = true, | |
orientation = "horizontal", | |
axis = false, | |
margin = 50, | |
value, | |
active = 1, | |
snap = false, | |
scale; | |
// Private variables | |
var axisScale, | |
dispatch = d3.dispatch("slide", "slideend"), | |
formatPercent = d3.format(".2%"), | |
tickFormat = d3.format(".0"), | |
handle1, | |
handle2 = null, | |
divRange, | |
sliderLength; | |
function slider(selection) { | |
selection.each(function() { | |
// Create scale if not defined by user | |
if (!scale) { | |
scale = d3.scale.linear().domain([min, max]); | |
} | |
// Start value | |
value = value || scale.domain()[0]; | |
// DIV container | |
var div = d3.select(this).classed("d3-slider d3-slider-" + orientation, true); | |
var drag = d3.behavior.drag(); | |
drag.on('dragend', function () { | |
dispatch.slideend(d3.event, value); | |
}) | |
// Slider handle | |
//if range slider, create two | |
// var divRange; | |
if (toType(value) == "array" && value.length == 2) { | |
handle1 = div.append("a") | |
.classed("d3-slider-handle", true) | |
.attr("xlink:href", "#") | |
.attr('id', "handle-one") | |
.on("click", stopPropagation) | |
.call(drag); | |
handle2 = div.append("a") | |
.classed("d3-slider-handle", true) | |
.attr('id', "handle-two") | |
.attr("xlink:href", "#") | |
.on("click", stopPropagation) | |
.call(drag); | |
} else { | |
handle1 = div.append("a") | |
.classed("d3-slider-handle", true) | |
.attr("xlink:href", "#") | |
.attr('id', "handle-one") | |
.on("click", stopPropagation) | |
.call(drag); | |
} | |
// Horizontal slider | |
if (orientation === "horizontal") { | |
div.on("click", onClickHorizontal); | |
if (toType(value) == "array" && value.length == 2) { | |
divRange = d3.select(this).append('div').classed("d3-slider-range", true); | |
handle1.style("left", formatPercent(scale(value[ 0 ]))); | |
divRange.style("left", formatPercent(scale(value[ 0 ]))); | |
drag.on("drag", onDragHorizontal); | |
var width = 100 - parseFloat(formatPercent(scale(value[ 1 ]))); | |
handle2.style("left", formatPercent(scale(value[ 1 ]))); | |
divRange.style("right", width+"%"); | |
drag.on("drag", onDragHorizontal); | |
} else { | |
handle1.style("left", formatPercent(scale(value))); | |
drag.on("drag", onDragHorizontal); | |
} | |
sliderLength = parseInt(div.style("width"), 10); | |
} else { // Vertical | |
div.on("click", onClickVertical); | |
drag.on("drag", onDragVertical); | |
if (toType(value) == "array" && value.length == 2) { | |
divRange = d3.select(this).append('div').classed("d3-slider-range-vertical", true); | |
handle1.style("bottom", formatPercent(scale(value[ 0 ]))); | |
divRange.style("bottom", formatPercent(scale(value[ 0 ]))); | |
drag.on("drag", onDragVertical); | |
var top = 100 - parseFloat(formatPercent(scale(value[ 1 ]))); | |
handle2.style("bottom", formatPercent(scale(value[ 1 ]))); | |
divRange.style("top", top+"%"); | |
drag.on("drag", onDragVertical); | |
} else { | |
handle1.style("bottom", formatPercent(scale(value))); | |
drag.on("drag", onDragVertical); | |
} | |
sliderLength = parseInt(div.style("height"), 10); | |
} | |
if (axis) { | |
createAxis(div); | |
} | |
function createAxis(dom) { | |
// Create axis if not defined by user | |
if (typeof axis === "boolean") { | |
axis = d3.svg.axis() | |
.ticks(Math.round(sliderLength / 100)) | |
.tickFormat(tickFormat) | |
.orient((orientation === "horizontal") ? "bottom" : "right"); | |
} | |
// Copy slider scale to move from percentages to pixels | |
axisScale = scale.ticks ? scale.copy().range([0, sliderLength]) : scale.copy().rangePoints([0, sliderLength], 0.5); | |
axis.scale(axisScale); | |
// Create SVG axis container | |
var svg = dom.append("svg") | |
.classed("d3-slider-axis d3-slider-axis-" + axis.orient(), true) | |
.on("click", stopPropagation); | |
var g = svg.append("g"); | |
// Horizontal axis | |
if (orientation === "horizontal") { | |
svg.style("margin-left", -margin + "px"); | |
svg.attr({ | |
width: sliderLength + margin * 2, | |
height: margin | |
}); | |
if (axis.orient() === "top") { | |
svg.style("top", -margin + "px"); | |
g.attr("transform", "translate(" + margin + "," + margin + ")"); | |
} else { // bottom | |
g.attr("transform", "translate(" + margin + ",0)"); | |
} | |
} else { // Vertical | |
svg.style("top", -margin + "px"); | |
svg.attr({ | |
width: margin, | |
height: sliderLength + margin * 2 | |
}); | |
if (axis.orient() === "left") { | |
svg.style("left", -margin + "px"); | |
g.attr("transform", "translate(" + margin + "," + margin + ")"); | |
} else { // right | |
g.attr("transform", "translate(" + 0 + "," + margin + ")"); | |
} | |
} | |
g.call(axis); | |
} | |
function onClickHorizontal() { | |
if (toType(value) != "array") { | |
var pos = Math.max(0, Math.min(sliderLength, d3.event.offsetX || d3.event.layerX)); | |
moveHandle(scale.invert ? | |
stepValue(scale.invert(pos / sliderLength)) | |
: nearestTick(pos / sliderLength)); | |
} | |
} | |
function onClickVertical() { | |
if (toType(value) != "array") { | |
var pos = sliderLength - Math.max(0, Math.min(sliderLength, d3.event.offsetY || d3.event.layerY)); | |
moveHandle(scale.invert ? | |
stepValue(scale.invert(pos / sliderLength)) | |
: nearestTick(pos / sliderLength)); | |
} | |
} | |
function onDragHorizontal() { | |
if ( d3.event.sourceEvent.target.id === "handle-one") { | |
active = 1; | |
} else if ( d3.event.sourceEvent.target.id == "handle-two" ) { | |
active = 2; | |
} | |
var pos = Math.max(0, Math.min(sliderLength, d3.event.x)); | |
moveHandle(scale.invert ? | |
stepValue(scale.invert(pos / sliderLength)) | |
: nearestTick(pos / sliderLength)); | |
} | |
function onDragVertical() { | |
if ( d3.event.sourceEvent.target.id === "handle-one") { | |
active = 1; | |
} else if ( d3.event.sourceEvent.target.id == "handle-two" ) { | |
active = 2; | |
} | |
var pos = sliderLength - Math.max(0, Math.min(sliderLength, d3.event.y)) | |
moveHandle(scale.invert ? | |
stepValue(scale.invert(pos / sliderLength)) | |
: nearestTick(pos / sliderLength)); | |
} | |
function stopPropagation() { | |
d3.event.stopPropagation(); | |
} | |
}); | |
} | |
// Move slider handle on click/drag | |
function moveHandle(newValue) { | |
var currentValue = toType(value) == "array" && value.length == 2 ? value[active - 1]: value, | |
oldPos = formatPercent(scale(stepValue(currentValue))), | |
newPos = formatPercent(scale(stepValue(newValue))), | |
position = (orientation === "horizontal") ? "left" : "bottom"; | |
if (oldPos !== newPos) { | |
if (toType(value) == "array" && value.length == 2) { | |
value[ active - 1 ] = newValue; | |
if (d3.event) { | |
dispatch.slide(d3.event, value ); | |
}; | |
} else { | |
if (d3.event) { | |
dispatch.slide(d3.event.sourceEvent || d3.event, value = newValue); | |
}; | |
} | |
if ( value[ 0 ] >= value[ 1 ] ) return; | |
if ( active === 1 ) { | |
if (toType(value) == "array" && value.length == 2) { | |
(position === "left") ? divRange.style("left", newPos) : divRange.style("bottom", newPos); | |
} | |
if (animate) { | |
handle1.transition() | |
.styleTween(position, function() { return d3.interpolate(oldPos, newPos); }) | |
.duration((typeof animate === "number") ? animate : 250); | |
} else { | |
handle1.style(position, newPos); | |
} | |
} else { | |
var width = 100 - parseFloat(newPos); | |
var top = 100 - parseFloat(newPos); | |
(position === "left") ? divRange.style("right", width + "%") : divRange.style("top", top + "%"); | |
if (animate) { | |
handle2.transition() | |
.styleTween(position, function() { return d3.interpolate(oldPos, newPos); }) | |
.duration((typeof animate === "number") ? animate : 250); | |
} else { | |
handle2.style(position, newPos); | |
} | |
} | |
} | |
} | |
// Calculate nearest step value | |
function stepValue(val) { | |
if (val === scale.domain()[0] || val === scale.domain()[1]) { | |
return val; | |
} | |
var alignValue = val; | |
if (snap) { | |
alignValue = nearestTick(scale(val)); | |
} else{ | |
var valModStep = (val - scale.domain()[0]) % step; | |
alignValue = val - valModStep; | |
if (Math.abs(valModStep) * 2 >= step) { | |
alignValue += (valModStep > 0) ? step : -step; | |
} | |
}; | |
return alignValue; | |
} | |
// Find the nearest tick | |
function nearestTick(pos) { | |
var ticks = scale.ticks ? scale.ticks() : scale.domain(); | |
var dist = ticks.map(function(d) {return pos - scale(d);}); | |
var i = -1, | |
index = 0, | |
r = scale.ticks ? scale.range()[1] : scale.rangeExtent()[1]; | |
do { | |
i++; | |
if (Math.abs(dist[i]) < r) { | |
r = Math.abs(dist[i]); | |
index = i; | |
}; | |
} while (dist[i] > 0 && i < dist.length - 1); | |
return ticks[index]; | |
}; | |
// Return the type of an object | |
function toType(v) { | |
return ({}).toString.call(v).match(/\s([a-zA-Z]+)/)[1].toLowerCase(); | |
}; | |
// Getter/setter functions | |
slider.min = function(_) { | |
if (!arguments.length) return min; | |
min = _; | |
return slider; | |
}; | |
slider.max = function(_) { | |
if (!arguments.length) return max; | |
max = _; | |
return slider; | |
}; | |
slider.step = function(_) { | |
if (!arguments.length) return step; | |
step = _; | |
return slider; | |
}; | |
slider.animate = function(_) { | |
if (!arguments.length) return animate; | |
animate = _; | |
return slider; | |
}; | |
slider.orientation = function(_) { | |
if (!arguments.length) return orientation; | |
orientation = _; | |
return slider; | |
}; | |
slider.axis = function(_) { | |
if (!arguments.length) return axis; | |
axis = _; | |
return slider; | |
}; | |
slider.margin = function(_) { | |
if (!arguments.length) return margin; | |
margin = _; | |
return slider; | |
}; | |
slider.value = function(_) { | |
if (!arguments.length) return value; | |
if (value) { | |
moveHandle(stepValue(_)); | |
}; | |
value = _; | |
return slider; | |
}; | |
slider.snap = function(_) { | |
if (!arguments.length) return snap; | |
snap = _; | |
return slider; | |
}; | |
slider.scale = function(_) { | |
if (!arguments.length) return scale; | |
scale = _; | |
return slider; | |
}; | |
d3.rebind(slider, dispatch, "on"); | |
return slider; | |
} | |
})); |
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
City | lon | lat | Infrastructure_Index | Country | Quality_of_Life_Index | CPI-4 | CPI-5 | Environmental_Index | ukey | Productivity_Index | Equity_Index | |
---|---|---|---|---|---|---|---|---|---|---|---|---|
Vienna | 16.374 | 48.208 | 0.996 | Austria | 0.882 | 0.936 | 0.925 | 0.932 | Austria-Vienna | 0.939 | 0.883 | |
New York | -74.006 | 40.713 | 0.994 | United States | 0.866 | 0.934 | 0.825 | 0.941 | United States-New York | 0.94 | 0.502 | |
Toronto | -79.383 | 43.653 | 0.997 | Canada | 0.907 | 0.934 | 0.89 | 0.963 | Canada-Toronto | 0.874 | 0.733 | |
London | -0.100 | 51.520 | 0.997 | United Kingdom | 0.898 | 0.934 | 0.904 | 0.92 | United Kingdom-London | 0.923 | 0.793 | |
Stockholm | 18.070 | 59.330 | 0.995 | Sweden | 0.925 | 0.934 | 0.898 | 0.921 | Sweden-Stockholm | 0.896 | 0.767 | |
Helsinki | 24.940 | 60.170 | 0.997 | Finland | 0.905 | 0.933 | 0.924 | 0.944 | Finland-Helsinki | 0.89 | 0.89 | |
Dublin | -6.250 | 53.330 | 0.996 | Ireland | 0.867 | 0.929 | 0.913 | 0.958 | Ireland-Dublin | 0.901 | 0.85 | |
Oslo | 10.750 | 59.910 | 0.997 | Norway | 0.914 | 0.929 | 0.924 | 0.939 | Norway-Oslo | 0.87 | 0.903 | |
Paris | 2.340 | 48.860 | 0.996 | France | 0.925 | 0.927 | 0.897 | 0.895 | France-Paris | 0.895 | 0.788 | |
Tokyo | 139.770 | 35.670 | 0.989 | Japan | 0.931 | 0.925 | 0.905 | 0.936 | Japan-Tokyo | 0.85 | 0.828 | |
Melbourne | 144.960 | -37.810 | 0.996 | Australia | 0.875 | 0.925 | 0.903 | 0.967 | Australia-Melbourne | 0.867 | 0.82 | |
Auckland | 174.763 | -36.848 | 0.994 | New Zealand | 0.889 | 0.922 | 0.862 | 0.958 | New Zealand-Auckland | 0.854 | 0.657 | |
Amsterdam | 4.890 | 52.370 | 0.995 | Netherlands | 0.872 | 0.915 | 0.895 | 0.933 | Netherlands-Amsterdam | 0.866 | 0.818 | |
Zurich | 8.542 | 47.377 | 0.997 | Switzerland | 0.858 | 0.914 | 0.884 | 0.941 | Switzerland-Zurich | 0.868 | 0.772 | |
Copenhagen | 12.568 | 55.676 | 0.997 | Denmark | 0.871 | 0.911 | 0.913 | 0.928 | Denmark-Copenhagen | 0.855 | 0.922 | |
Brussels | 4.330 | 50.830 | 0.997 | Belgium | 0.864 | 0.91 | 0.883 | 0.922 | Belgium-Brussels | 0.862 | 0.783 | |
Barcelona | 2.1734034999999494 | 41.3850639 | 0.995 | Spain | 0.912 | 0.909 | 0.876 | 0.908 | Spain-Barcelona | 0.829 | 0.755 | |
Milan | 9.190 | 45.480 | 0.997 | Italy | 0.895 | 0.908 | 0.87 | 0.876 | Italy-Milan | 0.868 | 0.733 | |
Warsaw | 21.02 | 52.26 | 0.99 | Poland | 0.864 | 0.901 | 0.883 | 0.911 | Poland-Warsaw | 0.846 | 0.817 | |
Lisbon | -9.139 | 38.722 | 0.995 | Portugal | 0.867 | 0.899 | 0.853 | 0.916 | Portugal-Lisbon | 0.827 | 0.692 | |
Budapest | 19.08 | 47.51 | 0.99 | Hungary | 0.867 | 0.894 | 0.881 | 0.921 | Hungary-Budapest | 0.808 | 0.833 | |
Athens | 23.730 | 37.980 | 0.996 | Greece | 0.885 | 0.889 | 0.862 | 0.884 | Greece-Athens | 0.8 | 0.762 | |
Prague | 14.430 | 50.080 | 0.992 | Czech Republic | 0.771 | 0.882 | 0.871 | 0.926 | Czech Republic-Prague | 0.855 | 0.827 | |
Seoul | 126.978 | 37.567 | 0.989 | Republic of Korea | 0.903 | 0.876 | 0.861 | 0.822 | Republic of Korea-Seoul | 0.801 | 0.807 | |
Moscow | 37.62 | 55.75 | 0.96 | Russia | 0.813 | 0.87 | 0.793 | 0.908 | Russia-Moscow | 0.806 | 0.55 | |
São Paulo | -46.630 | -23.530 | 0.918 | Brazil | 0.803 | 0.836 | 0.757 | 0.894 | Brazil-São Paulo | 0.742 | 0.507 | |
Almaty | 76.920 | 43.320 | 0.872 | Kazakhstan | 0.822 | 0.833 | 0.83 | 0.897 | Kazakhstan-Almaty | 0.751 | 0.818 | |
Shanghai | 121.5 | 31.2 | 0.9 | China | 0.836 | 0.832 | 0.826 | 0.95 | China-Shanghai | 0.671 | 0.8 | |
Bucharest | 26.100 | 44.440 | 0.968 | Romania | 0.767 | 0.821 | 0.836 | 0.867 | Romania-Bucharest | 0.707 | 0.9 | |
Mexico City | -99.1 | 19.4 | 0.9 | Mexico | 0.764 | 0.816 | 0.709 | 0.866 | Mexico-Mexico City | 0.743 | 0.405 | |
Ankara | 32.850 | 39.930 | 0.842 | Turkey | 0.802 | 0.806 | 0.78 | 0.891 | Turkey-Ankara | 0.699 | 0.683 | |
Amman | 35.930 | 31.950 | 0.887 | Jordan | 0.79 | 0.796 | 0.771 | 0.824 | Jordan-Amman | 0.697 | 0.68 | |
Bangkok | 100.500 | 13.730 | 0.871 | Thailand | 0.747 | 0.794 | 0.733 | 0.85 | Thailand -Bangkok | 0.719 | 0.533 | |
Kyïv | 30.523 | 50.450 | 0.968 | Ukraine | 0.757 | 0.781 | 0.798 | 0.874 | Ukraine-Kyïv | 0.579 | 0.873 | |
Hà Noi | 105.840 | 21.030 | 0.912 | Viet Nam | 0.761 | 0.776 | 0.756 | 0.733 | Viet Nam-Hà Noi | 0.712 | 0.683 | |
Yerevan | 44.52 | 40.17 | 0.87 | Armenia | 0.85 | 0.769 | 0.779 | 0.745 | Armenia-Yerevan | 0.635 | 0.817 | |
Beijing | 116.407 | 39.904 | 0.911 | China | 0.836 | 0.762 | 0.799 | 0.663 | China-Beijing | 0.667 | 0.967 | |
Cape Town | 18.460 | -33.930 | 0.933 | South Africa | 0.645 | 0.758 | 0.59 | 0.875 | South Africa-Cape Town | 0.628 | 0.217 | |
Jakarta | 106.830 | -6.180 | 0.741 | Indonesia | 0.733 | 0.743 | 0.769 | 0.881 | Indonesia-Jakarta | 0.636 | 0.885 | |
Johannesburg | 28.04 | -26.19 | 0.88 | South Africa | 0.645 | 0.742 | 0.479 | 0.816 | South Africa-Johannesburg | 0.654 | 0.083 | |
Manila | 120.970 | 14.620 | 0.775 | Philippines | 0.647 | 0.737 | 0.723 | 0.868 | Philippines-Manila | 0.676 | 0.669 | |
Cairo | 31.250 | 30.060 | 0.916 | Egypt | 0.743 | 0.73 | 0.722 | 0.616 | Egypt-Cairo | 0.679 | 0.692 | |
Casablanca | -7.620 | 33.600 | 0.827 | Morocco | 0.513 | 0.7 | 0.647 | 0.891 | Morocco-Casablanca | 0.634 | 0.472 | |
Tegucigalapa | -87.220 | 14.090 | 0.709 | Honduras | 0.729 | 0.694 | 0.652 | 0.829 | Honduras-Tegucigalapa | 0.541 | 0.51 | |
Chisinau | 28.830 | 47.030 | 0.895 | Moldova | 0.85 | 0.693 | 0.698 | 0.894 | Moldova-Chisinau | 0.34 | 0.717 | |
Mumbai | 73.060 | 19.110 | 0.745 | India | 0.739 | 0.688 | 0.694 | 0.632 | India-Mumbai | 0.645 | 0.715 | |
Nairobi | 36.82 | -1.29 | 0.86 | Kenya | 0.559 | 0.673 | 0.593 | 0.889 | Kenya-Nairobi | 0.481 | 0.357 | |
Phnom Penh | 104.920 | 11.570 | 0.728 | Cambodia | 0.613 | 0.666 | 0.677 | 0.809 | Cambodia-Phnom Penh | 0.544 | 0.722 | |
Ulaanbaatar | 106.910 | 47.930 | 0.632 | Mongolia | 0.777 | 0.664 | 0.675 | 0.804 | Mongolia-Ulaanbaatar | 0.493 | 0.722 | |
Guatemala City | -90.550 | 14.630 | 0.823 | Guatemala | 0.556 | 0.646 | 0.614 | 0.866 | Guatemala-Guatemala City | 0.44 | 0.502 | |
Yaoundé | 11.520 | 3.870 | 0.666 | Cameroon | 0.555 | 0.623 | 0.618 | 0.827 | Cameroon-Yaoundé | 0.492 | 0.6 | |
New Delhi | 77.210 | 28.670 | 0.786 | India | 0.69 | 0.617 | 0.635 | 0.448 | India-New Delhi | 0.596 | 0.712 | |
Abidjan | -4.030 | 5.330 | 0.767 | Côte d’Ivoire | 0.44 | 0.599 | 0.578 | 0.842 | Côte d’Ivoire-Abidjan | 0.452 | 0.5 | |
Kathmundu | 85.31 | 27.71 | 0.74 | Nepal | 0.621 | 0.594 | 0.598 | 0.704 | Nepal-Kathmundu | 0.385 | 0.617 | |
Dhaka | 90.390 | 23.700 | 0.673 | Bangladesh | 0.539 | 0.593 | 0.633 | 0.627 | Bangladesh-Dhaka | 0.545 | 0.817 | |
Kampala | 32.580 | 0.320 | 0.507 | Uganda | 0.486 | 0.59 | 0.581 | 0.956 | Uganda-Kampala | 0.512 | 0.55 | |
Lagos | 3.350 | 6.500 | 0.576 | Nigeria | 0.634 | 0.582 | 0.496 | 0.659 | Nigeria-Lagos | 0.475 | 0.262 | |
Accra | -0.200 | 5.560 | 0.737 | Ghana | 0.592 | 0.576 | 0.56 | 0.728 | Ghana-Accra | 0.347 | 0.5 | |
La Paz | -68.150 | -16.500 | 0.745 | Bolivia | 0.621 | 0.565 | 0.551 | 0.606 | Bolivia-La Paz | 0.363 | 0.502 | |
Addis Abeba | 38.740 | 9.030 | 0.521 | Ethiopia | 0.534 | 0.564 | 0.501 | 0.724 | Ethiopia-Addis Ababa | 0.503 | 0.313 | |
Dakar | -17.480 | 14.720 | 0.794 | Senegal | 0.384 | 0.552 | 0.581 | 0.596 | Senegal-Dakar | 0.51 | 0.712 | |
Harare | 31.050 | -17.820 | 0.899 | Zimbabwe | 0.451 | 0.542 | 0.493 | 0.864 | Zimbabwe-Harare | 0.246 | 0.338 | |
Dar es Salaam | 39.280 | -6.820 | 0.607 | United Republic of Tanzania | 0.371 | 0.53 | 0.571 | 0.822 | United Republic of Tanzania-Dar es Salaam | 0.427 | 0.767 | |
Lusaka | 28.29 | -15.42 | 0.59 | Zambia | 0.463 | 0.507 | 0.434 | 0.766 | Zambia-Lusaka | 0.316 | 0.233 | |
Niamey | 2.120 | 13.520 | 0.485 | Niger | 0.426 | 0.456 | 0.482 | 0.521 | Niger-Niamey | 0.402 | 0.602 | |
Bamako | -7.990 | 12.650 | 0.544 | Mali | 0.416 | 0.452 | 0.491 | 0.46 | Mali-Bamako | 0.401 | 0.683 | |
Antananarivo | 47.510 | -18.890 | 0.511 | Madagascar | 0.558 | 0.446 | 0.465 | 0.812 | Madagascar-Antananarivo | 0.171 | 0.552 | |
Conakry | -13.670 | 9.550 | 0.607 | Guinea | 0.461 | 0.416 | 0.449 | 0.809 | Guinea-Conakry | 0.133 | 0.612 | |
Monrovia | -10.800 | 6.310 | 0.411 | Liberia | 0.381 | 0.285 | 0.313 | 0.886 | Liberia-Monrovia | 0.048 | 0.457 |
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
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" href="d3.slider.css" /> | |
<style> | |
.wrapper { | |
width: 300px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
.wrapper > div { | |
margin: 35px 0; | |
} | |
#slider8 { | |
height: 150px; | |
} | |
#slider9 { | |
height: 150px; | |
} | |
path { | |
stroke: white; | |
stroke-width: 0.25px; | |
fill: grey; | |
} | |
#tooltip-container { | |
position: absolute; | |
left: 350px; | |
top: 500px; | |
background-color: #fff; | |
color: #050; | |
padding: 10px; | |
border: 1px solid; | |
display: none; | |
} | |
.tooltip_key { | |
font-weight: bold; | |
} | |
.tooltip_value { | |
margin-left: 20px; | |
float: right; | |
} | |
</style> | |
<body> | |
<div id="tooltip-container"></div> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="d3.slider.css"></script> | |
<script src="http://d3js.org/topojson.v0.min.js"></script> | |
<script src="d3.slider.js"></script> | |
<div class="wrapper"> | |
<h3>Min: <span id="slider3textmin">0</span>, Max: <span id="slider3textmax">0.5</h3> | |
<div id="slider3"></span></div> | |
</div> | |
<script> | |
var width = 960, | |
height = 600; | |
var minIndex, | |
maxIndex; | |
var projection = d3.geo.mercator() | |
.scale((width + 1) / 3 / Math.PI) | |
.translate([width / 2, height /3.5]) | |
.center([0, 50 ]); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height); | |
var path = d3.geo.path() | |
.projection(projection); | |
function drawMap(minIndex,maxIndex){ | |
var g; | |
svg.select("g").remove(); | |
g = svg.append("g"); | |
// load and display the World | |
d3.json("world-topo-min.json", function(error, topology) { | |
// load and display the cities | |
d3.csv("data.csv", function(error, data) { | |
g.selectAll("circle") | |
.data(data) | |
.enter() | |
.append("circle") | |
.attr("cx", function(d) { | |
return projection([d.lon, d.lat])[0]; | |
}) | |
.attr("cy", function(d) { | |
return projection([d.lon, d.lat])[1]; | |
}) | |
.attr("r", function(d){if(d["CPI-5"]>=minIndex && d["CPI-5"]<=maxIndex){ | |
return 8*d["CPI-5"]; | |
} | |
else{ | |
return 0; | |
}}) | |
.style("fill", "blue") | |
.style("opacity", function(d){ | |
if(d["CPI-5"]>=minIndex && d["CPI-5"]<=maxIndex){ | |
return .7;} | |
else{ | |
return 0; | |
} | |
}) | |
.on("mouseover", function(d) { | |
var html = ""; | |
html += "<div class=\"tooltip_kv\">"; | |
html += "<span class=\"tooltip_key\">"; | |
html += d.City+": "+d["CPI-5"]; | |
html += "</span>"; | |
html += "<br>"; | |
html += "<span class=\"tooltip_value\">"; | |
html += "<table border=\"1\">"; | |
html += "<tr>"; | |
html += "<td>"+"Infrastructure"+"</td>"; | |
html += "<td>"+"Quality of Life"+"</td>"; | |
html += "<td>"+"Environment"+"</td>"; | |
html += "<td>"+"Productivity"+"</td>"; | |
html += "<td>"+"Equity"+"</td>"; | |
html += "</tr>"; | |
html += "<tr>"; | |
html += "<td>"+d["Infrastructure_Index"]+"</td>"; | |
html += "<td>"+d["Quality_of_Life_Index"]+"</td>"; | |
html += "<td>"+d["Environmental_Index"]+"</td>"; | |
html += "<td>"+d["Productivity_Index"]+"</td>"; | |
html += "<td>"+d["Equity_Index"]+"</td>"; | |
html += "</tr>"; | |
html += "</table>"; | |
html += "</span>"; | |
html += "<br>"; | |
html += "</div>"; | |
$("#tooltip-container").html(html); | |
$(this).attr("stroke", "red"); | |
$(this).attr("fill-opacity", "0.8"); | |
$("#tooltip-container").show(); | |
}) | |
.on("mouseout", function(d) { | |
$(this).attr("fill-opacity", "1.0"); | |
$(this).attr("stroke", "blue"); | |
$("#tooltip-container").hide(); | |
}); | |
}); | |
g.selectAll("path") | |
.data(topojson.object(topology, topology.objects.countries) | |
.geometries) | |
.enter() | |
.append("path") | |
.attr("d", path) | |
}); | |
// zoom and pan | |
var zoom = d3.behavior.zoom() | |
.on("zoom",function() { | |
g.attr("transform","translate("+ | |
d3.event.translate.join(",")+")scale("+d3.event.scale+")"); | |
g.selectAll("circle") | |
.attr("d", path.projection(projection)); | |
g.selectAll("path") | |
.attr("d", path.projection(projection)); | |
}); | |
svg.call(zoom) | |
} | |
minIndex=0.0; | |
maxIndex=0.5; | |
drawMap(minIndex,maxIndex); | |
d3.select('#slider3').call(d3.slider().axis(true).value( [minIndex, maxIndex] ).on("slide", | |
function (evt, value) { | |
d3.select('#slider3textmin').text(value[ 0 ].toFixed(1)); | |
d3.select('#slider3textmax').text(value[ 1 ].toFixed(1)); | |
minIndex=value[0]; | |
maxIndex=value[1]; | |
drawMap(minIndex,maxIndex); | |
}) | |
); | |
</script> | |
</body> | |
</html> |
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
{ | |
"name": "d3.slider", | |
"version": "0.1.0", | |
"description": "D3.js Slider", | |
"main": "d3.slider.js", | |
"scripts": { | |
"test": "echo \"Error: no test specified\" && exit 1" | |
}, | |
"repository": { | |
"type": "git", | |
"url": "git://github.com/turban/d3.slider" | |
}, | |
"author": "turban", | |
"license": "BSD", | |
"bugs": { | |
"url": "https://github.com/turban/d3.slider/issues" | |
}, | |
"homepage": "https://github.com/turban/d3.slider", | |
"browserify": { | |
"transform": [ | |
"cssify" | |
] | |
}, | |
"dependencies": { | |
"d3": "~3.4.8", | |
"browserify": "~4.1.5", | |
"cssify": "~0.5.1" | |
}, | |
"devDependencies": {} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment