score:2
I ended up working off of project to bounding box and created a clipping path around the state I wanted to display.
score:2
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.org/d3.v4.min.js" charset="utf-8"></script>
<script src="https://d3js.org/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.com/deldersveld/topojson/master/countries/united-states/us-albers-counties.json "the counties are included in this file".
score:5
Once 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
Source: stackoverflow.com
Related Query
- Display only a single state with counties from a full US counties map
- Geojson map with D3 only rendering a single path in a feature collection
- Only display 20 rows of data from a csv file with d3.js
- d3 - how to resize an individual state map drawn from a full US clipPath
- d3 US state map with markers, zooming transform issues
- Display only values from the data set into X axis ticks
- Drawing map with d3js from openstreetmap geojson
- Display icons/image instead of circle/path on map made with d3.js
- In D3.js How to draw a map with full screen width?
- only display certain hours with d3.js
- Create map that combines data from two files with common column - but data doesn't match one to one
- Trying to make vector map of US counties with d3.js render fast
- Generating multiple DOM elements from a single data point with D3.js
- Using d3 in meteor on windows 8.1, how can I display a world map, zoomed in on the US, with country borders and US state borders?
- how to display state counties in d3
- How to display each state name in d3 india map using GeoJSON
- How to display country name labels on an SVG map drawn with d3?
- D3 with Topojson only renders parts of the map
- d3.js: map with concentric circles emanating from dots
- Impossible to display a TopoJson map with Svelte
- How to create multiple pie charts with D3 from a single array with multiple objects?
- How to show d3.js usa map with some state name outside the state pointing to it
- D3.js load US Map with Initial Zoom on one State by SVG
- Resize projection in d3JS in only one axis with a geojson map
- How to display data with a specific property value in d3.js only on click/hover
- Map created from geojson file just fills the entire canvas with the color of the path fill
- Map data from an array for only some keys (not filtered)
- D3js chart with 2 lines - display only lines
- Updating map polygons and map legend with selected color option from dropdown menu?
- Collapsible tidy horizontal tree from obervablehq migrated to html is rendering only a single large node in the middle
More Query from same tag
- The use of a data array in the d3.js scatter file instead of an external data file
- Conditionally change background image of D3 circles
- NVD3 Scatter Chart Circle Radius
- how to make a radial line segment using D3.js
- SVG, D3: Understanding stop offset attribute
- D3 make stacked bar chart dynamic
- d3js multipoint line displayed as a closed shape
- D3 Zoom TypeError: t.apply is not a function
- d3 transition circles to a json data value
- c3.js how to place the y label inside the bar in a horizontal bar graph?
- date format in d3, would like to have month as an integer instead of decimal
- Best way/s to position d3 visualizations without an iframe?
- float d3 SVG element to top right corner CSS
- D3js and Variables Based on Percentages
- Best practice example to design a moderate complicated data viz app in React with Redux
- Draw the progress path from right to left in semi circle donut chart using d3js
- Line chart using nvd3
- Placement of SVG circle that lacks center coordinates
- Draw gridline/tickline at a specific tick in d3.js
- update line when dragging point in grouped multiline chart
- ForeignObject not working in IE
- D3js filter selection
- Onclick not working with outside .JS file
- Creating X-Axis with Array of Date() Objects - D3.js
- D3.js animation for donut labels
- D3-Tile Not All Tiles Load
- How to configure nvd3 for Europe number formatting?
- Using XML as a datasource in d3js layout doesn't work in firefox
- Plotted lat/long points on map are being placed incorrectly
- Multiple Y-axis on graph not aligned