|
<!DOCTYPE html> |
|
<!-- http://bost.ocks.org/mike/map/--> |
|
<meta charset="utf-8"> |
|
v. 08/13:12:30am. Last version on codio.com |
|
<style> |
|
svg { border: 5px solid #646464; background-color: #C6ECFF;} |
|
path.L0 { fill:#E0E0E0;} |
|
path.L1 { fill:#FEFEE9;} |
|
path.L1:hover { fill: #B10000 ;} |
|
.red { border: 5px solid red;} /* Class for tests */ |
|
|
|
.subunit-boundary { |
|
fill: none; |
|
stroke-width:1px; |
|
stroke: #646464; |
|
/* stroke-dasharray: 2,2; */ |
|
stroke-linejoin: round; |
|
} |
|
.place, |
|
.place-label { |
|
fill: #444; |
|
font-size:4px; |
|
} |
|
text { |
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
font-size: 6px; |
|
pointer-events: none; |
|
} |
|
.subunit-label { |
|
fill: #777; |
|
fill-opacity: .5; |
|
font-size: 11px; |
|
font-weight: 200; |
|
text-anchor: middle; |
|
} |
|
</style> |
|
<body> |
|
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script src="http://d3js.org/topojson.v0.min.js"></script> |
|
<script> |
|
// -------------- SETTINGS ------------- // |
|
// HTML frame: dimensions & colors |
|
var width = 525, |
|
height = 525, |
|
color = d3.scale.category10(); // d3.scale.ordinal().domain(["000000", "FFFFFF", "baz"]).range(colorbrewer.RdBu[9]); |
|
|
|
// Projection: New projection, center coord, scale(?): |
|
var projection = d3.geo.mercator() |
|
.center([2.2, 46.4]) // jap: [139, 35.4] |
|
.scale(2000) // behavioral definition welcome |
|
.translate([width / 2, height / 2]); //?? |
|
|
|
// SVG injection: |
|
var svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
// Path |
|
var path = d3.geo.path() |
|
.projection(projection) |
|
.pointRadius(4); |
|
|
|
// Data (getJSON: TopoJSON) |
|
d3.json("fra.json", showData); |
|
|
|
// ---------- FUNCTION ------------- // |
|
function showData(error, fra) { |
|
|
|
// var #Coord: projection formerly here |
|
|
|
// var #Path: formerly here |
|
var countries = topojson.object(fra, fra.objects.countries) |
|
subunits = topojson.object(fra, fra.objects.subunits), |
|
neighbors = topojson.neighbors(fra.objects.subunits.geometries); // coloring: full line |
|
|
|
//Append L0 polygons |
|
svg.append("path") |
|
.datum(countries) |
|
.attr("d", path) |
|
|
|
svg.selectAll(".countries") |
|
.data(topojson.object(fra, fra.objects.countries).geometries) |
|
.enter().append("path") |
|
.attr("class", function(d) { return "L0 " + d.properties.name; }) |
|
.attr("d", path) |
|
//.style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return subunits[n].color; }) + 1 | 0); }) // coloring: full line |
|
.on("click", click); |
|
|
|
//Append L1 polygons |
|
svg.append("path") |
|
.datum(subunits) |
|
.attr("d", path) |
|
|
|
svg.selectAll(".subunit") |
|
.data(topojson.object(fra, fra.objects.subunits).geometries) |
|
.enter().append("path") |
|
.attr("class", function(d) { return "L1 " + d.properties.name; }) |
|
.attr("d", path) |
|
//.style("fill", function(d, i) { return color(d.color = d3.max(neighbors[i], function(n) { return subunits[n].color; }) + 1 | 0); }) // coloring: full line |
|
.on("click", click); |
|
|
|
// Function Click > Console |
|
function click(a){ |
|
console.log(a.properties.name);} |
|
|
|
//Append [what that !!!?] |
|
svg.append("path") |
|
.datum(topojson.mesh(fra, fra.objects.subunits, function(a,b) { if (a!==b || a.properties.name === "Berlin"|| a.properties.name === "Bremen"){var ret = a;}return ret;})) |
|
.attr("d", path) |
|
.attr("class", "subunit-boundary"); |
|
|
|
// Append [??] |
|
svg.append("path") |
|
.datum(topojson.object(fra, fra.objects.places)) |
|
.attr("d", path) |
|
.attr("class", "place"); |
|
|
|
// Positioning: place-label |
|
svg.selectAll(".place-label") |
|
.data(topojson.object(fra, fra.objects.places).geometries) |
|
.enter().append("text") |
|
.attr("class", "place-label") |
|
.attr("transform", function(d) { return "translate(" + projection(d.coordinates) + ")"; }) |
|
.attr("dy", ".35em") |
|
.text(function(d) { if (d.properties.name!=="Paris"&&d.properties.name!=="Bremen"){return d.properties.name;} }) |
|
.attr("x", function(d) { return d.coordinates[0] > -1 ? 6 : -6; }) |
|
.style("text-anchor", function(d) { return d.coordinates[0] > -1 ? "start" : "end"; }); |
|
|
|
// Positioning: subunit-label |
|
svg.selectAll(".subunit-label") |
|
.data(topojson.object(fra, fra.objects.subunits).geometries) |
|
.enter().append("text") |
|
.attr("class", function(d) { return "subunit-label " + d.properties.name; }) |
|
.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; }) |
|
// Vertical adjustment: Champagne-Ardenne-- Languedoc-Roussillon-- Haute-Normandie- Loraine++ Île-de-france 0.5em franche-Comté-1.0em Limousin -1.0 |
|
.attr("dy", function(d){ |
|
if(d.properties.name==="Champagne-Arfranne"||d.properties.name==="Languedoc-Roussillon" || d.properties.name==="Limousin" ) |
|
{return "1.5em"} |
|
else if(d.properties.name==="Haute-Normandie" ) |
|
{return ".5em"} |
|
else if(d.properties.name==="Loraine"|| d.properties.name==="france-Comté") |
|
{return "-1.5em"} |
|
else if(d.properties.name==="Île-de-france" ) |
|
{return "-.5em"} |
|
else{return ".2em"}}) // frafault |
|
.text(function(d) { return d.properties.name; }); |
|
|
|
} |
|
</script> |
|
<br /> |
|
<div> |
|
<a class="download ac-icon-download" href="javascript:javascript: (function () { var e = document.createElement('script'); if (window.location.protocol === 'https:') { e.setAttribute('src', 'https://raw.github.com/NYTimes/svg-crowbar/gh-pages/svg-crowbar.js'); } else { e.setAttribute('src', 'http://nytimes.github.com/svg-crowbar/svg-crowbar.js'); } e.setAttribute('class', 'svg-crowbar'); document.body.appendChild(e); })();"><!--⤋--><big>⇩</big> Download</a> -- Works on Chrome. Feedback me for others web browsers ? |
|
</div> |
|
<br /> |
|
</body> |
|
</html> |