Tell us what’s happening:
hello guys ma having trouble parsing this text in my Choropleth Map under Data visualization third project. test number 6
6. My Choropleth should have a county for each provided data point
expected 6284 to equal 3142
AssertionError: expected 6284 to equal 3142
at n.equal (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:556:320)
at n.<anonymous> (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:581:210885)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:265533
at Kb.run (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:265828)
at CC.runTest (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:280794)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:281730
at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:280133)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:280203
at o (https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:278952)
at https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js:575:280018
//test :var e=document.querySelectorAll(".county");n.equal(e.length,_e.length)
the code seems to suggest we have 6284 states which shouls be 3142 , it suggesting we have double the number of states . so decided to do some debugging
console.log('data',(topojson.feature(mapData,mapData.objects.counties).features).length); (3142)
the logged value of the above is 3142 stating that we have 3142 data points representing 3142 states
am not sure were the error stems from i would like to know your view on this anybody who did this project using React. or the frame work might be coursing the discrepancy ? have used React on all of my projects regarding D3 visualization and never encountered an issue
Your code so far
import * as d3 from 'd3'
import * as topojson from 'topojson';
import { useEffect, useRef } from 'react';
const Ui=()=>{
const svgRef=useRef()
const USA_MAPDATA='https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json';
const EDUCCATIONDATA ='https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json';
const w=960
const h= 600
useEffect(()=>{
// data fetching
Promise.all([d3.json(USA_MAPDATA),d3.json(EDUCCATIONDATA)])
.then(data=>ready(data[0],data[1]))
.catch(err=>console.log(err))
// function for data mapping
function ready(mapData,educationData){
const mappedEducationData=new Map();
const mappedStateCode=new Map();
const mappedCountyName= new Map();
educationData.forEach(element => {
mappedEducationData.set(element.fips,element.bachelorsOrHigher)
mappedStateCode.set(element.fips,element.state)
mappedCountyName.set(element.fips,element.area_name)
});
const min=d3.min( mappedEducationData.values());
const max=d3.max( mappedEducationData.values());
const colorScale = d3.scaleThreshold()
.domain(d3.range(min ,max ,(max-min)/8))
.range(d3.schemeGreens[9])
console.log(mappedCountyName.size);
// USA map rendaring logic
const svg= d3.select(svgRef.current)
.attr('viewBox', `0 0 ${w} ${h}`)
console.log('data',(topojson.feature(mapData,mapData.objects.counties).features).length);
svg
.append('g')
.selectAll('path')
.data(topojson.feature(mapData,mapData.objects.counties).features)
.enter()
.append('path')
.attr('class',"county")
.attr('d', d3.geoPath())
.attr('data-fips',d=>
{
return d.id
})
.attr('data-education',d=>mappedEducationData.get(d.id))
.attr('fill',d=>colorScale(mappedEducationData.get(d.id)))
.on('mouseover',(event,d)=>{
const countyName=mappedCountyName.get(d.id)
const stateCode=mappedStateCode.get(d.id)
const countyEduccationalData=mappedEducationData.get(d.id)
d3.select('#tooltip')
.style('opacity',1)
.attr('data-education',countyEduccationalData)
.html(`${countyName}, ${stateCode}: ${countyEduccationalData}%`)
.style('left',`${event.pageX+20}px`)
.style('top',`${event.pageY-50}px`)
})
.on('mouseleave',()=>{
d3.select('#tooltip')
.style('opacity',0)
})
// rendaring the states borders
svg.append('path')
.datum(topojson.mesh(mapData,mapData.objects.states,(a,b)=>a !==b))
.attr('d',d3.geoPath())
.attr( 'fill','none')
.attr('stroke','white')
// color legend
const legendScale = d3.scaleLinear()
.domain([min, max])
.range([600, 860]);
const legendAxis = d3.axisBottom(legendScale)
.tickSize(13)
.tickValues(colorScale.domain())
.tickFormat(d=>`${Math.round(d)}%`);
const g=svg.append('g')
.attr('transform', 'translate(0,50)')
.attr('id','legend');
g.selectAll('rect')
.data(colorScale.range().map(element => {
const d = colorScale.invertExtent(element);
if (d[0] == null) d[0] = legendScale.domain()[0];
return d;
}))
.enter()
.append('rect')
.attr('height', 8)
.attr('x', d => legendScale(d[0]))
.attr('width', d => (d[0] && d[1]) ? legendScale(d[1]) - legendScale(d[0]):legendScale(null))
.attr('fill',d=> colorScale(d[0]))
g.call(legendAxis)
.select('.domain').remove();
}
},
[])
return(
<div className='ui'>
<div className="viewbox">
<div className="title" id="title">
<h1>United States Educational Attainment</h1>
<div className="subtitle" id="description">Percentage of adults age 25 and older with a bachelor's degree or higher (2010-2014)</div>
</div>
<svg ref={svgRef}></svg>
<div id="tooltip">
</div>
</div>
</div>
)
}
export default Ui;
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0
Challenge Information:
Data Visualization Projects - Visualize Data with a Choropleth Map
and a happy Valentines day!