Skip to content

Instantly share code, notes, and snippets.

@jstcki

jstcki/README.md

Last active May 25, 2021 11:36
Show Gist options
  • Save jstcki/9204795 to your computer and use it in GitHub Desktop.
Save jstcki/9204795 to your computer and use it in GitHub Desktop.
Download ZIP
Swiss Cantons and Municipalities with React
Raw
README.md
Display the source blob
Display the rendered blob
Raw
ch.json
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!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="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://npmcdn.com/[email protected]/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);
const Map = ({ch}) => {
const country = topojson.feature(ch, ch.objects.country);
const municipalityBoundaries = topojson.mesh(ch, ch.objects.municipalities, function(a, b) { return a !== b; });
const cantonBoundaries = topojson.mesh(ch, ch.objects.cantons, function(a, b) { return a !== b; });
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment