Data Visualization with D3, JavaScript, React - Full Course [2021]

[@freecodecamp]

Curran will be starting a new livestream series on D3 Data Visualization on March 6th! Learn more here: vizhub.com/blog/2021/02/20/new-livestream-series-get-it-right-in-black-and-white/

[@musictheory286]

Sir how can I save my tribute page progress on freecodecamp - codepen

[@sairadha674]

Kindly advice on course pre requisites. I have basic knowledge of HTML. Is that enough.

[@currankelleher]

@@sairadha674 Yes, that is enough.

[@sanjaygalami]

It would be better if you use combination of reactjs and d3js.

[@pradeep7573]

Hi Do I need to complete previous video of yours --> kzbin.info/www/bejne/lWm5ZqJoiq16Zqc ?

[@hirok6649]

After watching this 11 hours, I was able to visualize whole genome alignments of myself

[@noman8189]

lol

[@jpm1911]

Lmao.

[@kreendurron]

He's beginning to believe...

[@WiserMiser]

Please share your git repo

[@FelipeVillegas76]

Who in their right mind would watch a 17-hour, 2-part KZbin course!? One week and many Codepens later, I am ever so glad I did. Thank you, Curran. I completed all my freeCodeCamp data visualization projects in React & D3 while following along with your fabulous tutorial.

[@akinyemitestimonyibenjamin]

how do u know what am thinking

[@bc87146]

This is still relevant 2 years after it was made. I'm almost done watching and I've learned so much. Thanks for this!

[@sab0004]

Thank you so much! you guys rock, Curran, you are an amazing human being!

[@sanghvian]

1hr into the course and I am already in love with Curran. What an amazing teacher !

[@lejlaela9206]

I agree 100%! Thank you freeCodeCamp and Curran.

[@robertovalle655]

He's the Keanu of Data Science!! 😭

[@juancastaneda3481]

Thanks for all the great content you guys create! and free!

[@scottmacnevin3555]

Thanks - brilliant tutorials!

[@Spreadswings]

Eleven hours and 37 minutes, not the full 17 as indicated. I watched from front to back and worked through all his examples. He is extraordinarily skilled and communicates with precision and clarity. I feel more than ever like I'm drowning in complexity, but at the same time, I've gained insight into what to look for and possible approaches to explore when trying to move forward. Also gained new awarenesses into sources of reliable data bases and studies, along with tools for coding and coding patches which are essentially shortcuts and hurdle leaps.

[@ernestj8000]

Incredibly helpful, thorough, and well explained! This is the best tutorial I have found from both paid and free sites! I have used Udemy and Oreilly Books and nothing comes close to the clarity and knoweldge displayed by this instructor!

[@basiccoder2166]

Curran is one of the best programming teacher IMO It's been 3 hours and I'm still enjoying his teaching

[@rembautimes8808]

3:42:50 Been watching this at 2x speed while chilling Really good lecture series . Thanks for waking us through .

[@jakedeng2288]

This has turned out to be both great tutorial on React and D3 js, amazing!

[@r4m1r40]

Agradecemos sua compra!

[@quincylarsonmusic]

I'm only 15 minutes in, and already I have a deeper appreciation for the power of data visualization as a tool for augmenting my own cognition. "Think on paper" indeed.

[@currankelleher]

Noice

[@frogsngrandmothers1593]

10:44:00 if your 'event' is not exported from d3, just use the event that's passed directly to the listener, like this: brush.on("brush", (event) => console.log(event.selection)) cheers

[@currankelleher]

Ah yes, the API changed!

[@giantqtipz6577]

THANK YOU

[@matt-g-recovers]

This is freaking outstanding!!! So much information, and brilliant wisdom. Thank you so much

[@currankelleher]

Thanks!

[@severedghost]

Ah, 2 weeks of new learning. This channel is a library for programmers

[@mwanikimwaniki6801]

Ikr lol

[@senelburak]

Curran, you're an amazing teacher as well as an amazing human being. I can't tell you how helpful this will be for those who need it. Thank you!

[@currankelleher]

Thanks!

[@Jr_2132oo]

Thanks

[@alem182]

This course is perfect! Great job Curran and thank you so much!!

[@bhargavpatel1992]

YOU GUYS ARE LITERALLY THE BEST!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@domemvs]

Amazing! This guy knows what he‘s talking about. Thanks a lot.

[@DaljeetSingh-jm4sh]

This man has really awesome teaching skills.

[@phamduytrung9163]

Wow, the resources given in only first 40mins is huge, lots of joy to watch. I love the Internet

Great course. Curran is such a great presenter and teacher.

[@robertjcliu]

I am watching in Taiwan. This video helps me a lot. Thank you.

[@theNobelONE_]

Just what I needed to relax and learn while sitting at home

[@armaneshaghi6732]

Curran is an amazing teacher - thank you.

[@johnconnor9787]

4:43:00 - D3 Barchart 5:18:00 - Refactor logic for Barchart, use separate modules for chunks of logic 5:29:00 - add style for Barchart 5:53:00 - Scatter Plot

[@awwtawnoo]

Thanks a lot. You guys serve humanity. 🤍

[@thezenithTG]

"layrhem biha lwalidin " may god bless your parents for this work (a Morrocan way to say thank you for this amazing work).

[@0xsh1v4m9]

Thanks a lot freecodecamp.... I hope you will continuously make video on interesting topics.

[@VivekRaj]

One of the best tutorials...to the point and succinct..

[@stoufa]

8:25:23 the "tickSize" prop is passed twice to the "ColorLegend" component, once with the literal value of 10, and a second time with the variable "circleRadius" 😁

[@amirnoorani5017]

You are Awesome! I really like your step by step approach from HTML to React then to complex animation, events, optimization ...

[@informationgiant7697]

The best ever teacher since big Bang :) , I just love Bau

[@Thiago1Marcio1]

6:45:35 I really ❤️ this course

[@brightsideofmaths]

Wow. Thank you very much for this upload!

[@VarunJoshi95]

I love this course, Curran makes it so interesting! I love the theory part of the course, where he discusses the horsepower vs mpg example, and the difference between categorical, time and size values.

[@jpm1911]

11:37:13 hahahhaa that impersonation killed me! Btw, I love the way of teaching. Super helpful, the teacher gained a spot in heaven!

[@sumabich721]

Oh thank you, this is exactly what I need for my upcoming internship.

[@vuarnet0318]

Really nice & clear tutorial for beginner👍👍 Thanks Curran

[@scottfranz8363]

Curran you are my hero!

[@shashishekhar----]

Mine too!

[@stoufa]

8:47:10 you mean columns. what's removed/kept here are the columns not the rows, unless the table was originally transposed 😁

[@naveenverma2951]

the ordinal quantitative categorical at 3:11:53 is too good. These kind of tutorial we need where we can see inter dependability of systems with each other. This stuff gives right threshold point to what length you have to prepare to be industry ready.

[@CRAETION_]

this is a FANTASTIC course! thank you for this, and covering data viz fundamentals

[@shervinmokthari1251]

wooooooohoooooo, just found this gem & it couldnt have came at a better time!

[@arnavmehta3669]

I was just Learning JavaScript... Almost done... HERE WE GO AGAIN

[@pedromoreira1311]

Really nice job! Congrats!

[@ted9097]

Fantastic contribution! Thanks for sharing.

[@marc536]

Curran is a legend!

[@YouDJeuR]

Thanks a lot for sharing your knowledge with such a high quality

[@matt-g-recovers]

This is absolute gold.

[@cloudsss83]

Now I know why there is so much noise in the background... you are in India or nearby haha Great content, thanks.

[@kevinwong4446]

Thank you for the amazing free resource

[@md.siddiq7165]

I haven't still watched it. But I know that it's the best. Just insane❤️❤️❤️

[@nisamlc4685]

Thank you for all wonderful courses

[@rahuljoshi8331]

Wow just completed it... Amazing 😍👏🙂🙏⭐

[@kevinkruse7743]

Excellent videos! Great combination of theory and code. The sequence of the videos and the detailed explanations throughout are very helpful. I was able to follow along and get it working step by step. One note: In "Multiple Views with Brushing" the event.selection did not work, because latest version of d3 does not have "event". Looks like event it go reworked. I was able to get it working by brush.on('brush end', (selection) => { setBrushExtent(selection.selection && selection.selection.map(xScale.invert)); }); Not sure if that is the right approach, but it works. Thanks Curran!

[@currankelleher]

Ah yes, the API changed! Tough to keep up. I'll have to re-do the whole thing now! lol

[@SARVidz]

Hey xScale is giving me invalid date. Can you please help?

[@SARVidz]

That is xScale.invert which is not working for me

[@AS-hm9km]

thank. you very much for this great course, really amazing

[@kurareii]

Thank you for this, great content so much information

[@MFewwy]

Thanks for the course!

[@DuyTran-ss4lu]

Pure gold!

[@danieltkach2330]

Where the video on how to do the animation with the scatterplot at 7:28:56?

[@pablopenia]

pro tip: at x1.5 speed works fine!!. x1.75 and you can also laugh with curran's movements.

[@alexawunor8853]

One word, Grateful

[@Yaaron_Zongo]

Does one need to already have some knowledge in javascript, react. . before they take this course?

[@mohitmathew1]

I think it does help to understand nodejs npm and react. there is a good tutorial for react here kzbin.info/www/bejne/rWjIm3eQbbiKrJo good luck!

[@TheVirtualArena24]

If they put ads on this video I'll play this video in loop without skipping.

[@romanhrechuk7775]

Thanks a lot for your work!

[@faraazali9589]

This is a great tutorial.

[@xpkareem]

This is great, but if you are as slow witted as I am it will take way more than 17 hours to get through. VERY information dense, very often I need to stop and go read about concepts as I go or I get lost. But, all in all I'd rather it be too dense than over explain things I already understand- so on the whole it's just right.

[@netsaosa4973]

2:44:00 handleMouse e

[@younesmakhchan2010]

Im so grateful for this

[@jrupp2823]

no fucking way you just posted this... i know what I’m doing today

[@xyz-pi4yy]

I'm literally crying ! love freecodecamp !

[@0000oooo100]

I'm watching this a 2x and I've only got today to learn it.

[@SupermanCrypto1]

After watching this i was able to hack the matrix and visualise its string based level components at 10 to 30cm :)

[@mouazsabagh6140]

Brilliant ❤️

[@mohitmathew1]

This course is great and very much appreciated. I got to using vega-lite-api example and trying to make a boiler plate app locally on my machine and get started. I was getting an error after importing the vega-lite-api and using it. Attempted import error: 'vl' is not exported from 'vega-lite-api'. I have been desperately wanting to analyze some data with the learning so far but stuck because of this error. Any help will be very much appreciated

[@mr.streetwear506]

try,e.g: import * as vega from 'vega'

[@go0ad]

01:09:39 is that JFX . do i write it correct?

[@hazychou5413]

Anyone knows how Curran Kelleher set his rollup plugins？I am so confused and stuck in this step in VScode.

[@ПётрПетров-д2ч4х]

Its extremly useful 4 me))

[@anmol_dot_ninja]

Okay guys Imma do it

[@dungphamtuan186]

Great !! Thanks so much !!

[@codewithmeer]

LISTEN HERE! YOU ALL ARE FUCKING CRAZY! HUGE MASSIVE RESPECT FOR WHAT YALL ARE DOING❤️❤️❤️❤️

[@grandpowr]

Gotta say, I love your voice, you could get rich just uploading videos reading books lol

[@userre85]

Thank you Curran

[@aamirsahil9339]

any body know how to set up rollup on VS code, so that it can convert from JSX to JS?\

[@amiteshwarmann7556]

Great video. Were you India when you filmed this course? I think I heard motorcycle and bus honks.

[@irlshrek]

this is awesome!! the internet fucking rocks. side note: he really reminds me of michael from Vsauce.

[@BarakAlmog]

So happy I found this remark lol (Vsauce...). It's not just me.

[@minewarz]

2:48:40 don't mind me, just leaving this here cause I'm gonna skip a bunch and get back to it later

[@JeanDAVID]

is there something about rollup.js in freeCodeCamp ?

[@elson_correia]

this should be independent videos. navigating this is very hard even though the content is good

[@blackcurrant0745]

Great lecture! I have a question about the usage of rollup.js. If I do the same as at 1:03:01 in VS Code instead of VizHub, like rollup index.js --file bundle.js --format iife I get the following error message: 14: const rootElement = document.getElementById('root'); 15: ReactDOM.render(Hello JSX, rootElement); ^ Error: Unexpected token at error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:5279:30) at Module.error (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:9996:16) at tryParse (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:9855:23) at Module.setSource (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:10303:19) at ModuleLoader.addModuleSource (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:18603:20) at async ModuleLoader.fetchModule (/usr/local/lib/node_modules/rollup/dist/shared/rollup.js:18659:9) at async Promise.all (index 0) where the ^ points at . What am I doing wrong?

[@MrMartinK]

I get the same error. Please help :-)

[@anitaschafer567]

me too :/

[@MrMartinK]

@@anitaschafer567 I „fixed“ it with a turnaround. Take a look at the react tutorial from the original react website, start to build a plain new react app and then execute “npm i d3” for installing d3. Then you can follow on, without importing the unpk libraries.

[@anitaschafer567]

@@MrMartinK it worked, thank you!

[@currankelleher]

Yes, the Rollup config that is included in the VizHub export will solve this. It requires that you include React from a CDN, then it looks for the browser global. This is so that the bundle does not include all of React and ReactDOM - but you could include them in your bundle if you want. You can also try starting a project with WebPack and moving the code from VizHub into that setup, and everything should work as long as you install dependencies. Sorry about the confusion!

[@MrVidimlic]

How to hover, zoom on the world map

[@TomNook.]

Absolute madlad

[@kiidiii]

Lesgoooo guys

[@corear]

Oh, please make a vue-version of the course. :p

[@currankelleher]

In the next version, I plan to decouple the rendering logic so it would be easier to make Vue wrappers. I might invite a Vue expert to work through creating one or two Vue wrappers for visualization techniques, to establish a pattern.

[@corear]

@@currankelleher I really enjoyed the react version. Thank you for a great course.

[@claytonparros2870]

I was curious about an error I am getting. 3:33.00 for scatter viz. I am in vs code. when I export and install dependencies and run build i get an error saying to us transforms: {asyncAwait: false} ...help lol