xxxxxxxxxx
<meta charset="utf-8" />
<style>
body {
max-width: 960px;
}
canvas {
cursor: crosshair
}
select {
display: table;
margin: 0 auto;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://unpkg.com/d3-geo-projection@0.2.16/d3.geo.projection.min.js"></script>
<script src="https://unpkg.com/rbush@1.4.3/rbush.js"></script>
<script src="https://unpkg.com/spamjs@1.1.0/spam.min.js"></script>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<script type='text/javascript'>
var hover = null;
var width = 960;
var height = 500;
var graticule = d3.geo.graticule();
// Get the list of the voices
var voicelist = responsiveVoice.getVoices();
// Create the selector
d3
.select("body")
.append("select")
.selectAll("option")
.data(voicelist)
.enter()
.append("option")
.text(function(d) {
return d.name;
})
.attr("value", function(d) {
return d.name;
});
// Fire the lang function according to the selector
d3.select("select").on("change", lang);
function lang() {
var selectedValue = d3.event.target.value;
// Set the voice
return responsiveVoice.setDefaultVoice(selectedValue);
}
d3.json("world.json", function(error, d) {
topojson.presimplify(d);
var map = new StaticCanvasMap({
element: "body",
width: width,
projection: d3.geo.robinson(),
data: [
{
features: topojson.feature(d, d.objects["countries"]),
static: {
prepaint: function(parameters) {
parameters.context.beginPath();
parameters.path(graticule());
parameters.context.lineWidth = 0.5;
parameters.context.strokeStyle = "rgb(200,200,200)";
parameters.context.stroke();
parameters.context.beginPath();
parameters.path({ type: "Sphere" });
parameters.context.lineWidth = 1;
parameters.context.strokeStyle = "rgb(30,30,30)";
parameters.context.stroke();
},
paintfeature: function(parameters, d) {
parameters.context.lineWidth = 0.5;
parameters.context.strokeStyle = "rgb(30,30,30)";
parameters.context.stroke();
parameters.context.fillStyle = "rgb(188, 223, 255)";
parameters.context.fill();
}
},
dynamic: {
postpaint: function(parameters) {
if (!hover) return;
parameters.context.beginPath();
parameters.context.lineWidth = 1 / parameters.scale;
parameters.path(hover);
parameters.context.stroke();
}
},
events: {
click: function(parameters, d) {
// When clicking on a feature, say the name of that country
d && responsiveVoice.speak(d.id);
},
hover: function(parameters, d) {
hover = d;
parameters.map.paint();
}
}
}
]
});
map.init();
});
</script>
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js
https://d3js.org/topojson.v1.min.js
https://unpkg.com/d3-geo-projection@0.2.16/d3.geo.projection.min.js
https://unpkg.com/rbush@1.4.3/rbush.js
https://unpkg.com/spamjs@1.1.0/spam.min.js
https://code.responsivevoice.org/responsivevoice.js