Swiss Cantons and Municipalities with React

Re-implementation of this example combining React with D3 and TopoJSON. Map data from Swiss Maps.

<!DOCTYPE html>
<meta charset="utf-8">
<style>
 
.country {
  fill: #222;
}

.canton-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: 1;
}
 
.municipality-boundaries {
  fill: none;
  stroke: #fff;
  stroke-width: .3;
}
 
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://npmcdn.com/react@0.14/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@0.14/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/trafo"></script>
<script type="text/babel">
 
const width = 960;
const height = 500;
 
const path = d3.geo.path()
  .projection(null);

return (
  	<svg width={width} height={height}>
  		<path className='country' d={path(country)} />
  		<path className='municipality-boundaries' d={path(municipalityBoundaries)} />
  		<path className='canton-boundaries' d={path(cantonBoundaries)} />
  	</svg>
  );
};
 
d3.json('ch.json', (error, ch) => {
  ReactDOM.render(
    <Map ch={ch} />,
    document.body
  );
});
 
</script>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://npmcdn.com/react@0.14/dist/react.min.js

https://npmcdn.com/react-dom@0.14/dist/react-dom.min.js

https://npmcdn.com/trafo