Visualize Data with a Choropleth Map - freeCodeCamp Data Visualization Project Tutorial

[@danielli3288]

freecodecamp tends to throw you in the deep end, but this is on a completely different level

[@ganeshh123]

I feel the same, I made these videos for when people found it unapproachable like me.

[@スイ-o3r]

just started the project. had no clue of what to do so had to google lots of things lol it is gone take me a while to finish

[@allabtsmiles]

Thank you so much for sharing! I like how organized this video is and the notes/guide on notion are so helpful.

[@ganeshh123]

Thanks bro, glad you found it helpful :)

[@snowie030]

thanks so much for the series, cant imagine how much time is needed for reading the documentation and coding it to work

[@ganeshh123]

You're Welcome! Yeah thes projects take a long time, but you learn a lot!

[@johndol9549]

Man this one was a tough one... would be screwed without your help. thank you also for your additional resources on notion

[@ganeshh123]

You're welcome bro! I agree this was way too tough haha

[@danutzz8]

Congrats Ganesh, another awesome video with in depth details. I hope you'll add some nice JavaScript projects to your channel . I've noticed that the views and subscribers are going up in the last couple of days since I've discovered your channel . Good luck!

[@ganeshh123]

Thanks a lot for the kind words Marius, glad to know it was useful. Really busy with University these days but I hope I can do some fun project builds too! Thanks a lot for your support :)

[@danutzz8]

@@ganeshh123 Wish you all the best Ganesh with the Uny. and you deserve the kind words because you put a lot of time/work in this projects.(what goes around coms around), and now i'll finish my last project as well from this series :)

[@ganeshh123]

@@danutzz8 Dude you won't believe me if I said how much I needed to hear that at this time. Been really unmotivated with work recently, and I really appreciate the nice message, it will help me get back on track. Good luck for the last project, hope you've enjoyed it so far.What are your plans after Data Viz, are you going to complete the rest of the FCC course?

[@victorlazaro6331]

This project got me stumped for days. thanks (I actually finished all the JS certifications then returned to this)

[@ganeshh123]

You're welcome. Honestly one of the hardest freeCodeCamp projects, so much research required!

[@victorlazaro6331]

@@ganeshh123 Yeah. I did a lot of research, but I was not able to understand what I was handed to start with. I had no idea that the map was already there in the data given by fCC, I had no idea that the map was not actually a map of the us, but the combination of all the counties would recreate the country. To me, D3 was the hardest thing to assimilate, but I'm getting. Thanks to your video I was able to create the map, but you also helped me understand what I was doing instead of following the steps blindly.

[@ganeshh123]

@@victorlazaro6331 Glad to hear you understand it now! I really think they need to provide documentation or at least some challenges that teach SVG paths and Geo/TopJSON, almost everyone has no idea with this challenge.

[@victorlazaro6331]

@@ganeshh123 Agreed. The two spots I got completely lost in the fCC syllabus is at the end of JS algorithms, I had no idea how to interact with the DOM from JS, and here. But hey for a free lesson it's pretty good. Done with the map, onto the next one then I have the full stack cert!!

[@ganeshh123]

@@victorlazaro6331 Congrats man, just a few steps to go. How was the journey?

[@kusholh7095]

The tooltip was not working for me until I passed in e the event object as the first argument for the callback function of the mouseover event --> .on('mouseover', (e, countyDataItem) => { tooltip.trans....etc} P.S. could be any variable name, e just for clarity

[@ganeshh123]

I think in newer versions of D3 the mousover callback has to take the "Event" object as the first argument which contains various information about the mouse event itself. Thanks a lot for posting the fix bro!

[@kusholh7095]

@@ganeshh123 np, thanks for the tutorial! Super helpful!

[@atiktook8591]

Hi! I really love your video and tutorials. I've been stuck with this project for last few days. Now I feel I have some clue to figure out ! Thanks !!

[@ganeshh123]

You're welcome! Really glad to hear it helped, this was a tricky project tbh. I appreciate the subscription :)

[@rafaeldesouza3812]

Great content. Also, how do you find these solutions? Are they your own?

[@ganeshh123]

Yeah haha, a lot of frustration and pain

[@user-q7760a]

Great work, helpful and insightful tutorial. Thank you.

[@ganeshh123]

Thanks man, glad it helped you!

[@doubleup4461]

Thank you for your helpful video Ganesh. If you want to define the states on your map you could also use Topojson's mesh method as follows, and btw the 'res' here is the data fetched with the countyURL in the video : dataStates = topojson.mesh(res, res.objects.states, function(a, b) { return a !== b; }); and then after you plotted the county data, SVG here is the same as canvas reference declared in the video: svg.append("path") .datum(dataStates) .attr("d", d3.geoPath()) .attr("class", "states"); then in the CSS file: .states { stroke: black; fill: none; stroke-width: 0.5%; }

[@ganeshh123]

Awesome, do you have an example of what it looks like?

[@doubleup4461]

@@ganeshh123 Yeah, it looks similar to the example they provided, but with thicker lines separating the states: codepen.io/freeCodeCamp/full/EZKqza

[@ganeshh123]

@@doubleup4461 Just saw this - Sweet, that's a really nice touch, I never noticed that or thought of it!

[@AlbertRayJuarez]

Hello Ganesh, Thank you for sharing your videos, they make learning a lot easier. I do have one question for you however: how can we make the end result project easier to view on a mobile screen? The few projects I have learned / followed with you don't seem to show up well on smaller screens. Do you have any ideas for this? Thank you.

[@ganeshh123]

I'm sorry but I don't think there's an easy way to do this. SVG is very difficult and tricky to work with dynamic layouts AFAIK, you would have to calculate dimensions and coordinate values using something like JavaScript if you want to make responsive graphs. It's even harder with stuff like maps which are shapes drawn on to a coordinate grid with fixed sizes. You could try CSS media queries to change the svg height although the contents might get squished.

[@AlbertRayJuarez]

@@ganeshh123 I understand what you're saying. Thank you Ganesh. I will look into a bit more. Thanks again for your videos, I appreciate you.

[@ganeshh123]

@@AlbertRayJuarez You're welcome mate, thanks for the kind words, all the best.

[@pauline4389]

under CSS you have tooltip set at -- visibility: hidden; then under 'mouseout' you also have -- .style('visibility' , 'hidden') Is it necessary to have the CSS one? Thank you.

[@ganeshh123]

Hi Pauline. The CSS one is there to hide it from the start, when mouseout hasn't happened. After the first mouseout even, where you hover over a county and then move your mouse out, it is no longer necessary. You can try removing it from the CSS, I just put it there because I wasn't sure how it's marked :)

[@The-Dev-Ninja]

Thanks, the topojson thing was my problem. Thanks a lot

[@ganeshh123]

You're welcome, all the best

[@xavierpierre5586]

just in case inside your article the snipet of code user story 11 have a capy past concern. like always very thank you to your good explaination that's was very helpfull and handy, completely straight-forward

[@ganeshh123]

You're welcome, happy to help, all the best.

[@abdoulayeleye5399]

Thanks for this work @Ganesh . I have question on how to insert a zoom function that allows to make zoom on each counties. Thanks again for greate Job.

[@ganeshh123]

I don't know, sorry

[@wobsoriano]

You can't resolve a promise with multiple properties. To capture the error when fetching data, you should use .catch instead.

[@ganeshh123]

Hmm, you could try an alternative approach using the classic XMLHttpRequest as seen in the previous projects...

[@null-lu8it]

Thanks for video! This challenge is difficult enough. It isn’t covers in freeCodeCamp data visualisation course…but why?? Maximum was rect and circle with basic methods…

[@ganeshh123]

You're welcome! This is one of the hardest challenges on freeCodeCamp in my opinion, pretty much impossible to do just from the course content. Hopefully they make it easier in the future.

[@goldberg888]

Hello, great video, but I have a problem. I have done everything according to the video, but user story 10 does not work, I have already tried to rewrite this code section myself, but I can't understand anything. Error Uncaught TypeError: cannot read properties of undefined (reading fips). Same with properties area_name state bachelorOrHigher. Again, I tried to rewrite this code fragment in a completely different way, but I got exactly the same error.... Help me understand what I am doing wrong.

[@goldberg888]

I tried copying your code in full, I saw the source in the description below the video, but I got the same error on codepen

[@goldberg888]

Oh, I have broken my head, the problem was in the new version of d3 7.8.5, when I changed to version 5.6.0 everything worked.... I couldn't find the reason why nothing works with the new version.

[@aikonfd]

Nice explanation^^ What kind of type can replace the' fips' if I want to use a world map? Thank you

[@ganeshh123]

Some kind of identifier that can connect a value in the geographic data array to the statistic data's array. Maybe the country name?

[@aikonfd]

@@ganeshh123 Got it!! Thanks for answering😃

[@hakor_]

Great explanation and high quality code. You deserve higher views than this. Keep going 💪

[@ganeshh123]

Thanks mate, glad you liked the explanation. All the best.

[@jeremy0x]

Thanks for this video. It really helped.

[@ganeshh123]

You're welcome Jeremiah!

[@badrirauniyar5227]

When I call geoPath , it says function doesn't exist? What should I do? great tutorial BTW thank you

[@ganeshh123]

Maybe try downgrading your D3 to version 5 -

[@badrirauniyar5227]

@@ganeshh123 Thank you, It worked. Hey please make a tutorial on how to put the name of the state inside the map? cz I m trying real hard, searched a lot, couldn't find anywhere .On Stack OVERFLOW it says there is not a process through svg attr? could you help me where on what should I do?

[@rivasativa]

You are the best!

[@ganeshh123]

Haha, glad I could help. All the best

[@tod670]

why in the countyData if error you console.log(log) and in the educationData if error you console.log(error) ???

[@ganeshh123]

Made a typo, should be console log(error) haha

[@andrewmukare3433]

Thank you for this. Was unable to understand anything from the documentation

[@ganeshh123]

You're welcome. I had the same experience, took me a long time!

[@Flame-on-f2p]

how do i know the type of json iam dealing with if makes sense, and the d3.geoPath i didnt understand does it exist in the docs for the d3, thank you .

[@ganeshh123]

Hi Mano, TopoJSON objects generally have a type field which is a String saying 'Topology' GeoJSON objects generally have a type field which is a String saying 'FeatureCollection' or 'Feature' You can see the docs for the geoPath here : github.com/d3/d3-geo#geoPath . From my understanding, it generates a set of instructions (lines and coordinates) for drawing a path (outline of the county) using a GeoJSON object that is bound to the element with the data() method.

[@null-lu8it]

What the program? 14:42.

[@ganeshh123]

Notion - www.notion.so/personal

[@junaidwaheed7566]

Hi can I make this map based on the UK?

[@ganeshh123]

Yeah mate, you just need to get Geo/Topo JSON data for the UK, and some kind of data source for education statistics (maybe govt publishes them?)

[@junaidwaheed7566]

@@ganeshh123 Can I please contact you in any way for help?

[@ganeshh123]

@@junaidwaheed7566 Sure, email your discord username and tag to [e-mail]

[@finnianthehuman]

fucking hardcore. Thank you so much!

[@ganeshh123]

Haha no worries

[@MultiSciGeek]

Very interesting accent tho

[@ganeshh123]

In what way? Haha