Old school D3 from simpler times

All examples By author By category About

jerstucki

Full window Github gist

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);

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>

xxxxxxxxxx
 
<!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);
​
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>
    

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