This file shows how to use the geoConicConformalFrance projection from d3-composite-projections. without using node.
Click here to see the node version
forked from rveciana's block: conicConformalFrance linked directly example
xxxxxxxxxx
<meta charset="utf-8">
<style>
.states {
fill: #ccc;
stroke: #fff;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/1.0.1/d3-composite-projections.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.21.0/d3-legend.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geoConicConformalFrance();
var path = d3.geoPath()
.projection(projection);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var t = d3.transition();
d3.json("france.json", function(error, france) {
var france = topojson.feature(france, france.objects.regions);
svg.selectAll(".region")
.data(france.features)
.enter()
.append("path")
.attr("class", "region")
.attr("d", path)
.style("fill", "#eff5ef")
.style("stroke", "#000")
.style("stroke-width", "0.5px");
svg
.append("path")
.style("fill","none")
.style("stroke","#f00")
.attr("d", projection.getCompositionBorders());
d3.csv('parrainages-geocodes.csv', function(err, data) {
candidats = {};
data.map(d => d['Candidat-e'])
.map(d => candidats[d] = (candidats[d] || 0) + 1);
data = data.map(d => {
let p = projection([d.lon, d.lat]);
d.x = p[0];
d.y = p[1];
var c = d['Candidat-e'];
if (candidats[c] < 15) c = 'Autres'; else c += ' (' + candidats[c] + ')'
d.color = color(c);
return d;
});
svg.append('g')
.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('r', 3)
.attr('transform', d => `translate(${[d.x,d.y]})`)
.attr('fill', d => d.color)
.attr('fill-opacity', 0.6)
.attr('stroke', 'black')
.attr('stroke-width', 0.3)
.append('title')
.text(d => d['Candidat-e']);
var legend = d3.legendColor()
.labelFormat(d3.format(".2f"))
.title("Candidats")
.titleWidth(100)
.scale(color);
svg.append('g')
.attr("transform", "translate(20,20)")
.call(legend);
});
});
</script>
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v4.min.js
https://d3js.org/topojson.v1.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/1.0.1/d3-composite-projections.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.21.0/d3-legend.min.js