Is it possible to display a single state from a full US counties map?
I know I can get each states shape file and counties and create the topojson, but I'd rather work with one file if thats possible.
For example take Mike Bostock's full US county map. US Counties Map Would it be possible to show just NY from this?
I haven't seen any examples showing that type of functionality.
Is it possible to display a single state from a full US counties map?
I know I can get each states shape file and counties and create the topojson, but I'd rather work with one file if thats possible.
For example take Mike Bostock's full US county map. US Counties Map Would it be possible to show just NY from this?
I haven't seen any examples showing that type of functionality.
Share Improve this question edited Sep 10, 2016 at 6:11 gregdevs asked Sep 7, 2016 at 21:16 gregdevsgregdevs 7132 gold badges11 silver badges38 bronze badges 5- 1 you would have to create a mask to filter out the rest of the map that wasn't in that state; how would you do that without each state's shape file? – Claies Commented Sep 7, 2016 at 21:25
- yup, you're right. I would need those files anyway. Thanks – gregdevs Commented Sep 7, 2016 at 21:55
- you would not need shape file of other counties if you want to show just NY, on the contrary, you need shape file containing just NY. Or if you could get topojson containing county names you could filter the selection based on name. – Chirag Kothari Commented Sep 8, 2016 at 4:06
- @ChiragKothari thanks. so If I understand correctly..with the full us counties json I could mask with the NY shape file then display just NY...with the counties of course – gregdevs Commented Sep 8, 2016 at 4:09
- 1 @Claies FYI I ended up creating a mask as you suggested along with some tinkering from a couple of other examples. Thanks again. bl.ocks/gregdevs/a73f8a16f129757c037e72ecdebdd8f2 – gregdevs Commented Sep 10, 2016 at 5:51
3 Answers
Reset to default 5Once you've established your d3.json wrapper, you can use JavaScript filter method, so if your data has a'state' field:
d3.json(filename, function(error, data){ var single=data.filter(function(d){
return d.state==='Ohio';}
}
And then use the new single variable as your data for d3
I ended up working off of project to bounding box and created a clipping path around the state I wanted to display.
NY State W/ Counties - Clipped
I know this is a very late answer. However, it might be helpful for other people in the future.
This is an example of how to extract one state from the USA map file:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: lightgray;
stroke: #000000;
stroke-width: 1.5;
}
path:hover {
fill:orange;
cursor:pointer;
}
#state-borders {
fill: white;
stroke: #000000;
stroke-width: 10.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
}
</style>
<body>
<script src="http://d3js/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js/topojson.v1.min.js"></script>
<script>
var width = 960,
height = 500,
centered;
var projection = d3.geoAlbersUsa()
.scale(1370)
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("us-counties-github.json",function(json){
console.log(json);
svg.selectAll("path")
.attr("id", "state_fips")
.data(topojson.feature(json, json.objects.collection).features.filter(function(d) { return d.properties.state_fips == 36; }))
.enter()
.append("path")
.attr("d", path)
.attr("stroke","white")
.attr("fill", "gray");
});
</script>
*I downloaded the dataset from https://raw.githubusercontent./deldersveld/topojson/master/countries/united-states/us-albers-counties.json "the counties are included in this file".