# Best place to learn React/D3 for Data Vis and Back-End?

**URL:** <https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389>\
**Category:** General\
**Created:** [June 14, 2017, 4:07pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389 "2017-06-14T16:07:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![njanne19](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/njanne19/32/29538_2.png) [@njanne19](https://forum.freecodecamp.org/u/njanne19)\
**Post date:** [June 14, 2017, 4:07pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/1 "2017-06-14T16:07:46Z")

</div>

As I’ve been making my way through the FCC map, I noticed that there’s no directional challenges for Data Visualisation libraries. I decided that I would just skip those projects and go right into the back end certificate. I’m almost done with the basic Back-End projects, and realize that not only have I not done the Data Vis Projects, the Advanced Back End looks like it requires Data Vis as well. Where is a good place I can go to learn everything I need for these projects? I’ve dabbled in some codecademy lessons, but they are oversimplified and the “run check” time for every project is way too long and frustrating. I haven’t been able to find anything like free code camp. Please let me know if you know of any good places to learn while Data Vis is being implemented into FCC

---

<div class="post-metadata">

**Author:** ![robcheatham](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/robcheatham/32/58337_2.png) [@robcheatham](https://forum.freecodecamp.org/u/robcheatham)\
**Post date:** [June 14, 2017, 4:18pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/2 "2017-06-14T16:18:24Z")

</div>

I can certainly recommend this resource for learning React - [https://reacttraining.com/online](https://reacttraining.com/online)  
However, doesn’t focus on D3

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [June 14, 2017, 4:29pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/3 "2017-06-14T16:29:18Z")

</div>

The [beta](http://beta.freecodecamp.com) includes data vis challenges.

There are also react challenges:

> **[Alpha of freeCodeCamp's React + Redux challenges is now live](https://forum.freecodecamp.org/t/alpha-of-freecodecamps-react-redux-challenges-is-now-live/64492)**
>
> Our long-awaited React + Redux challenges are now live in an early alpha form. @bonham000 and @no-stack-dub-sack have implemented the full React curriculum on a separate web app, where you can work through them here. If you have feedback on these,...

---

<div class="post-metadata">

**Author:** ![husheric](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/husheric/32/35449_2.png) [@husheric](https://forum.freecodecamp.org/u/husheric)\
**Post date:** [June 16, 2017, 9:31pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/4 "2017-06-16T21:31:50Z")

</div>

I just completed the front end certification, would you recommend starting over on beta, or just learn what you need to on beta and get the data visualization certification?

---

<div class="post-metadata">

**Author:** ![BenGitter](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/bengitter/32/12192_2.png) [@BenGitter](https://forum.freecodecamp.org/u/BenGitter)\
**Post date:** [June 16, 2017, 9:36pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/5 "2017-06-16T21:36:40Z")

</div>

Not sure if the projects on beta already have user stories. I would go with learning on the beta, but doing the projects of the current curriculum.

---

<div class="post-metadata">

**Author:** ![psychometry](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/psychometry/32/79114_2.png) [@psychometry](https://forum.freecodecamp.org/u/psychometry)\
**Post date:** [June 16, 2017, 11:39pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/6 "2017-06-16T23:39:28Z")

</div>

the D3 github wiki has a section call [tutorials](https://github.com/d3/d3/wiki/Tutorials), which should teach you anything you need to know about D3 in general.

---

<div class="post-metadata">

**Author:** ![sabrawer](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sabrawer/32/81790_2.png) [@sabrawer](https://forum.freecodecamp.org/u/sabrawer)\
**Post date:** [June 18, 2017, 3:17pm UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/7 "2017-06-18T15:17:01Z")

</div>

To be honest, I did not find a suitable tutorial which gave me confidence in using d3.js. There are many web sites with examples and explanations which show how to do simple things, and these are a good place to start (google is your best friend). FCC has (or at least had) a beta version, but - at least for me - it was a bit too superficial. But that probably is a good place to start (if it still exists).

A word of caution - many online examples use version 3 of d3, which is different enough from version 4 that they are not compatible. This caused me no end of confusion.

I went through a number of these tutorials/examples, but got to a point where, since I did not sufficiently understand what was going on, the choice was: (1) find something online, copy it, and remain dumb, or (2) figure out at least the basics in detail.

I chose the second way, and, after considerable anguish, I wrote a document which examines some of the complexities and,at least, allowed me to form a more complete internal model of what is going on. You might want to try it, though I don’t think it is easy going, and definitely not for a complete novice.

It is here

[https://github.com/sabrawer/Documentation/blob/master/d3js-v4-selections-part-1.pdf](https://github.com/sabrawer/Documentation/blob/master/d3js-v4-selections-part-1.pdf)

I haven’t done part 2, I hope to get to it in the fall after doing some machine learning courses, and then use d3 rather than python for visualizations (which should be good practice). But part 1 has plenty already, including (I believe) most of the basics.

It’s probably best to struggle for a while with what is online, and then try my document if you still need it. I would not start with my document from scratch.

I can give you some online references if you wish, but I think you will learn more about this huge area by looking yourself. Still, here is a good place to start. Click on “examples” for tons of examples. There are also tutorials.

> **[d3/d3](https://github.com/d3/d3/wiki)**
>
> d3 - Bring data to life with SVG, Canvas and HTML. :bar\_chart::chart\_with\_upwards\_trend::tada:

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:37am UTC](https://forum.freecodecamp.org/t/best-place-to-learn-react-d3-for-data-vis-and-back-end/127389/8 "2021-01-17T09:37:10Z")

</div>


