I have looked at several other posts about isolating by state in D3 (Display only a single state with counties from a full US counties map), and I can’t seem to integrate it successfully into this fiddle…
https://jsfiddle.net/hz7kea1y/
I’d like to filter the data by state first (including its counties) and then draw the map based on the state selected. Any help or advice is welcomed!
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.min.js" integrity="sha256-tHoAPGoNdhIR28YHl9DWLzeRfdwigkH7OCBXMrHXhoM=" crossorigin="anonymous"></script>
<title>Choropleth Map</title>
</head>
<body>
<h2 id='title'>Florida Adult Education</h2>
<div id='container'>
<svg id='canvas'>
</svg>
<div id='rightSide'>
<div id='tooltip'>
</div>
<svg id='legend'>
<g>
<rect x="10" y="0" width="40" height="40" fill="#f16842"></rect>
<text x="60" y="20" fill="white">Less than 15%</text>
</g>
<g>
<rect x="10" y="40" width="40" height="40" fill="#ffa927"></rect>
<text x="60" y="60" fill="white">15% than 30%</text>
</g>
<g>
<rect x="10" y="80" width="40" height="40" fill="#ffe92c"></rect>
<text x="60" y="100" fill="white">30% to 45%</text>
</g>
<g>
<rect x="10" y="120" width="40" height="40" fill="#7aca5c"></rect>
<text x="60" y="140" fill="white">More than 45%</text>
</g>
</svg>
<div id='description'>Percentage of adults age 25 and older with a bachelor's degree or higher (2010-2014). Source: <a href='https://www.ers.usda.gov/data-products/county-level-data-sets/download-data.aspx'>USDA Economic Research Service</a></div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
*{
font-family: 'Source Sans Pro', sans-serif;
}
html, body{
min-height: 100%
}
body {
background-color: #2A2D2D;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #FDF1E7;
margin: none;
}
svg{
background-color: #305555;
/*box-shadow: 0px 3px 15px rgba(0,0,0,0.2); */
/*border-radius: 5px; */
padding: 10px;
border-radius: 5px;
}
#canvas{
min-height: 600px;
min-width: 950px;
}
.county:hover{
fill: black
}
g{
color: #FDF1E7
}
#tooltip{
visibility: hidden;
height: auto;
width: auto;
margin-top: 2px;
color: #FDF1E7;
font-size: 24px;
margin-bottom: 5px;
}
#legend{
color: rgb(56, 58, 74);
font-size: 18px;
text-align: center;
min-height: 150px;
max-width: 180px;
margin-top: 40px;
margin-bottom: 40px;
}
#title{
font-size: 28px;
color: #FDF1E7;
text-transform: uppercase;
margin-top: 10px;
margin-bottom: 30px;
}
#description a{
text-decoration: none;
color: #FDF1E7;
text-align: center;
}
#container{
display: flex;
align-items: center;
width: 100%;
}
#rightSide{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 50px;
}
let countyURL = 'https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json'
let educationURL = 'https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json'
let countyData
let educationData
let canvas = d3.select('#canvas')
let tooltip = d3.select('#tooltip')
let drawMap = () => {
canvas.selectAll('path')
.data(countyData)
.enter()
.append('path')
.attr('d', d3.geoPath())
.attr('class', 'county')
.attr('fill', (countyDataItem) => {
let id = countyDataItem['id']
let county = educationData.find((item) => {
return item['fips'] === id
})
let percentage = county['bachelorsOrHigher']
if(percentage <= 15){
return '#f16842'
}else if(percentage <= 30){
return '#ffa927'
}else if(percentage <= 45){
return '#ffe92c'
}else{
return '#7aca5c'
}
})
.attr('data-fips', (countyDataItem) => {
return countyDataItem['id']
})
.attr('data-education', (countyDataItem) => {
let id = countyDataItem['id']
let county = educationData.find((item) => {
return item['fips'] === id
})
let percentage = county['bachelorsOrHigher']
return percentage
})
.on('mouseover', (countyDataItem)=> {
tooltip.transition()
.style('visibility', 'visible')
let id = countyDataItem['id']
let county = educationData.find((item) => {
return item['fips'] === id
})
tooltip.text(county['fips'] + ' - ' + county['area_name'] + ', ' +
county['state'] + ' : ' + county['bachelorsOrHigher'] + '%')
tooltip.attr('data-education', county['bachelorsOrHigher'] )
})
.on('mouseout', (countyDataItem) => {
tooltip.transition()
.style('visibility', 'hidden')
})
}
d3.json(countyURL).then(
(data, error) => {
if(error){
console.log(log)
}else{
countyData = topojson.feature(data, data.objects.counties).features
console.log(countyData)
d3.json(educationURL).then(
(data, error) => {
if(error){
console.log(error)
}else{
educationData = data
console.log(educationData)
drawMap()
}
}
)
}
}
)