These are chat archives for FreeCodeCamp/DataScience

11th
Nov 2017
Timothy Javins
@timjavins
Nov 11 2017 00:30
Another very good podcast and community: Becoming a Data Scientist.
evaristoc
@evaristoc
Nov 11 2017 00:40
@timjavins, @GoldbergData, @mcbarlowe, @becausealice2 thanks to all for sharing!
CamperBot
@camperbot
Nov 11 2017 00:40
evaristoc sends brownie points to @timjavins and @goldbergdata and @mcbarlowe and @becausealice2 :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 136 | @mcbarlowe |http://www.freecodecamp.com/mcbarlowe
:cookie: 138 | @timjavins |http://www.freecodecamp.com/timjavins
:cookie: 122 | @goldbergdata |http://www.freecodecamp.com/goldbergdata
evaristoc
@evaristoc
Nov 11 2017 00:41
@Rhistina I am in Europe.
Josh Goldberg
@GoldbergData
Nov 11 2017 00:54
@evaristoc you’re welcome. I like this community. It’s small enough to feel like an individual.
Alice Jiang
@becausealice2
Nov 11 2017 01:22
@GoldbergData SO! For D3 a good start for someone coming from zero is the Square D3 tutorial's explanation of web standards. You'll eventually want to have a better understanding of everything, but it's enough to at least get you started
For JavaScript, I recommend YDKJS, particularly hoisting and asynchrony as those tend to be issues that sometimes even D3 can't hide
Josh Goldberg
@GoldbergData
Nov 11 2017 01:25
I see. I go deep with R and data analysis. It seems for something like D3 that I would be comfortable with abstraction, since the goal would be to have an interactive visualization just work. I don’t need to understand the frame work
Alice Jiang
@becausealice2
Nov 11 2017 01:26
V4 is still young enough that most tutorials use V3, so you're going to have to spend time digging through documentation. Most changes between the two versions are straightforward (d3.scale.linear() becomes d3.scaleLinear(), etc etc) but some things not so much. What I do when I have to convert to V4 is google the V3 method, and follow the top link that goes to D3's github wiki.
Josh Goldberg
@GoldbergData
Nov 11 2017 01:26
@becausealice2 👆🏽
Alice Jiang
@becausealice2
Nov 11 2017 01:26
It will be a "this page moved!" thing, but it has links to V3's documentation, changes to V4, and V4 documentation
Abstraction in D3 can be tricky
I still advise all of the above, and if that's enough and you don't need more that's fine.
Josh Goldberg
@GoldbergData
Nov 11 2017 01:28
Cool awesome. I’m going to check out these two links. How much JS do I need to know to use D3? Or is D3 in JS? What are the benefits of making something in D3 over using shiny for R, or some other interactive tool? @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 01:28
The more in depth your visuals will be, the more JS knowledge you'll need, just a heads up
D3 can be used in R and offers more flexibility
Rmd, to be specific
D3 in Rmd One of two Medium articles I did more than just think about writing xD
I don't know a lot about Shiny, but I know that when rendering with D3 into a browser with Rmd (I know it can do PDFs too, but I've never experimented with that) you have all the freedom of any other JS script. To my knowledge, Shiny is more restrictive, especially with regards to interactivity.
Alice Jiang
@becausealice2
Nov 11 2017 01:35
Of everyone I have personally met who uses D3 professionally, we all just Frankenstein bl.ocks.org examples together. If you don't need to do overly fancy work, all you really need is enough to understand what the code you're copying is doing so you can customize as necessary
Josh Goldberg
@GoldbergData
Nov 11 2017 02:51
@becausealice2 thanks so much..this is very informing. I had no idea you can use D3 in Rmd. I will definitely add this to the my arsenal. You seem to be one of the resident experts, so if you don’t mind if I check my learning in with you :D
CamperBot
@camperbot
Nov 11 2017 02:51
goldbergdata sends brownie points to @becausealice2 :sparkles: :thumbsup: :sparkles:
api offline
Josh Goldberg
@GoldbergData
Nov 11 2017 02:55
@becausealice2 I am looking at blocks.org site…man these visuals are sharp. I guess I have to learn JS & D3 if I want to get fancy?
@becausealice2 Doesn’t FCC have a D3 section? Is it worth checking out?
Holy..I have to learn how to make this.. lol https://bl.ocks.org/mbostock/1256572 @becausealice2
Josh Goldberg
@GoldbergData
Nov 11 2017 03:05
my mind is literally blown away right now by this d3 page lol. I have to learn this. Do I basically need to be proficient in JS & DS? @evaristoc @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:13
I'm not an expert, honestly. I've just had enough experience approaching D3 the wrong way that I know how to teach others how to be productive D3 learners
Josh Goldberg
@GoldbergData
Nov 11 2017 03:14
I’m happy I met you. Please don’t disappear. How quickly can I reasonably be expected to become decent enough to build my own D3 stuff, and copy other’s code and insert my own data. 3 months? 6 months? Say 10 hours a week.
@becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:15
The line I use when I teach is "If you want to D3, you need to know how to copy/paste from bl.ocks; if you want to D3 well, you need to know D3; if you want to D3 exceptionally well, you need to know JavSCript"
Josh Goldberg
@GoldbergData
Nov 11 2017 03:15
that’s fair
Alice Jiang
@becausealice2
Nov 11 2017 03:15
A basic visualization, like Bostock's barchart you could figure out in an hour
Josh Goldberg
@GoldbergData
Nov 11 2017 03:15
Say I want the latter. Would I then start with JS? Before even doing D3?
Alice Jiang
@becausealice2
Nov 11 2017 03:16
it's what I teach including brief intros to HTML, CSS, SVGs (and their CSS), The DOM, JS, and then we go into the barchart
Josh Goldberg
@GoldbergData
Nov 11 2017 03:16
There’s probably no difference (benefit) in building a basic visualization like a barchart in D3 compared to ggplot? The benefit seems to be the flexibility in interaction? @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:16
Get JavaScript to a point where you can read throught the D3 code and know what it does, with a little docs lookup to see what specific methods are for as necessary
Then focus D3, and you can pick up JS as you go
interactivity and flexibility. in D3 you can customize down to each individual tick mark if you need
Josh Goldberg
@GoldbergData
Nov 11 2017 03:17
Okay…so study JS to a certain point. Then pivot to D3 once comfortable enough. Then concurrently learn D3 and any remaining relevant JS? @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:17
And D3 renders SVG elements, ggplot makes images
Josh Goldberg
@GoldbergData
Nov 11 2017 03:18
SVG are super flexible and high quality, from what I hear. But you can export a ggplot by SVG. 538.com does it
Alice Jiang
@becausealice2
Nov 11 2017 03:19
Yeah. You really only need to know "enough" JavaScript. It's a BS copout answer to "how much JS" but honestly, it's a waste of time to learn more than you need, and as long as you know how to search for questions you have about how to do things in JavaScript, it's not hard at all to pick up as you go
Josh Goldberg
@GoldbergData
Nov 11 2017 03:19
I wonder if flowingdata.com using D3 at all. Their charts remind me of D3’s allure. I know it’s an R site ran by one guy.
Alice Jiang
@becausealice2
Nov 11 2017 03:19
You'll never make it to JS mastery that way, but if that was your goal then you'd be able to do everything in Vanilla JS and D3 would be worthless.
I used to have that site bookmarked but I'm low-key rage quitting visualization so I've lost the bookmark xD
Josh Goldberg
@GoldbergData
Nov 11 2017 03:20
lol wait. What do you mean? @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:20
OH!
Josh Goldberg
@GoldbergData
Nov 11 2017 03:20
low-key quoting??? :/ @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:20
I know that site. I've used their tutorials before, but they were in V3
low-key ragequitting
Josh Goldberg
@GoldbergData
Nov 11 2017 03:21
V3, which is the old version of D3?
Alice Jiang
@becausealice2
Nov 11 2017 03:21
an old version... technically the second version of D3
(V0 - V2 were a different project)
Josh Goldberg
@GoldbergData
Nov 11 2017 03:21
that means you’re sick of visualizations, moving on @becausealice2 ? I was considering signing up for his website. He has some quick visualization classes in R, and possibly D3…but if it’s old D3 it’s worthless? @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:21
It's not
Mike Bostock is incredible
Best documentation I have ever encountered
Josh Goldberg
@GoldbergData
Nov 11 2017 03:22
Mike is the first site you sent?
Nathan is the guy who runs flowingdata.com
oh Mike is on that block website
Alice Jiang
@becausealice2
Nov 11 2017 03:23
Most of the change from V3 to V4 is semantic as far as us mere mortals are concerned d3.scale.linear() in V3 is d3.scaleLinear() in V4
Mike is one of the three original creators of D3
Josh Goldberg
@GoldbergData
Nov 11 2017 03:23
Does this Mike guy make all of these visualizations on block.org…………?
Alice Jiang
@becausealice2
Nov 11 2017 03:23
The Beyonce, because most people don't even know there were others he worked with
Josh Goldberg
@GoldbergData
Nov 11 2017 03:24
the beyonce, lmfao
Alice Jiang
@becausealice2
Nov 11 2017 03:24
No, but always always always favor any block by him over other people
Josh Goldberg
@GoldbergData
Nov 11 2017 03:24
So it’s fair to take this code and use it for whatever you want?
Alice Jiang
@becausealice2
Nov 11 2017 03:24
nobody knows D3 like he does, but also he includes information on which D3 modules (which can be downloaded individually as needed) he uses so you can go in and learn what the code is doing
it's 70% of how I learned everything I know about D3 is his blocks and documentation
Josh Goldberg
@GoldbergData
Nov 11 2017 03:25
Would going through FCC’s JS module be enough JS to move onto D3? @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:25
it is fair, but it's a douche move to not give credit
if he didn't want people to use his code it wouldn't be available, but put a comment in your files saying where you got it.
I haven't seen their D3 module since the day they released it and I wasn't too thrilled about it. I'll have another look
I haven't scrolled far enough to find the D3, but it looks like the basic JavaScript would be good to get you familiar enough with JS to get started
Also the HTML5 and CSS section might be more than you need but it should go by fast and give some decent insight into webdev, which is what D3 is
(just data-driven web dev)
I only see data visualization projects, and no learning challenges now...
Alice Jiang
@becausealice2
Nov 11 2017 03:31
and their beta website is super slow loading
Josh Goldberg
@GoldbergData
Nov 11 2017 03:33
Sorry my computer crashed, let me read what you said @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 03:34
Okay it loaded. I'm not wild about their D3 curriculum structure, and without actually doing any of the challenges I'm not convinced they cover some super important basic concepts
Interactivity isn't covered too well...
It's a good start, but it's not how I would teach it
But my approach is to teach people how to read bl.ock code, google search D3 questions, and read documentation... I'm not big on step-by-step tutorials. I'm not a fan of hand-holding
Josh Goldberg
@GoldbergData
Nov 11 2017 03:44
Sorry I had to step away. I’m catching up now @becausealice2
@becausealice2 so if I start with that tutorial website for D3 you sent earlier. Well I guess I shouldn’t start with that. I should start with JS right? So I should read all those books on that github link?
Alice Jiang
@becausealice2
Nov 11 2017 03:46
You don't need all of them before you can start, but JavaScript does some weird things that even D3 can't hide that you need to know about so you can avoid them and/or understand what's going on when they happen
"Hoisting" from scope & closures (you'll see a lot of blocks where functions are being called before being declared, that explains why)
Josh Goldberg
@GoldbergData
Nov 11 2017 03:47
Okay. Point me to step 1 tutorial or book. (I assume it’s JS focused, based on your discussion). And I will go there and tackle it. Lol @becausealice2
FYI I have had brief encounters with HTML5 and CSS. Finished both modules on FCC, although it was a while ago
Alice Jiang
@becausealice2
Nov 11 2017 03:48
All of async and performance (D3 has D3-queue module that does a good job of padding that, but if you wanna know what it's doing...)
Go through the square.github.io tutorial I linked before. It's maybe 5 minute read and a good refresher. Tells you everything you'll need to remember to get started
Josh Goldberg
@GoldbergData
Nov 11 2017 03:49
Yeah. I’m not a superficial person. Especially with cool stuff like this (D3). So hopefully that helps you recommend a learning path for me
Okay, then after that?
Alice Jiang
@becausealice2
Nov 11 2017 03:49
Eventually you'll want to read all YDKJS because it's such a .... strange language ....
Josh Goldberg
@GoldbergData
Nov 11 2017 03:50
JS is strange?*
Alice Jiang
@becausealice2
Nov 11 2017 03:50
It's a logical language.
No one knows what the logic is
Josh Goldberg
@GoldbergData
Nov 11 2017 03:50
lol
Alice Jiang
@becausealice2
Nov 11 2017 03:50
but there is logic
Josh Goldberg
@GoldbergData
Nov 11 2017 03:50
funny
Alice Jiang
@becausealice2
Nov 11 2017 03:50
lemme show you what I mean
Josh Goldberg
@GoldbergData
Nov 11 2017 03:50
JS was a mistake anyway. It wasn’t supposed to be big as it is now
Alice Jiang
@becausealice2
Nov 11 2017 03:51
You can open up your browser console and follow along with him. it's all true
yeah, it's a cruel joke :(
Josh Goldberg
@GoldbergData
Nov 11 2017 03:53
this is funny lol
Alice Jiang
@becausealice2
Nov 11 2017 03:54
right?
Josh Goldberg
@GoldbergData
Nov 11 2017 03:54
empty array + empty array = EMPTY string lmfao
Alice Jiang
@becausealice2
Nov 11 2017 03:54
when he says "Let's talk about JavaScript" the first time, the laugh was louder than any of the laughs for ruby. It's because if you've worked with javascript you know
Josh Goldberg
@GoldbergData
Nov 11 2017 03:55
my god this is hilarious 😂
Alice Jiang
@becausealice2
Nov 11 2017 03:55
btw, D3 has a gitter, but it's not active, but they do have a slack channel with one or two enthusiastic experts and a few others who stop in on occasion
Josh Goldberg
@GoldbergData
Nov 11 2017 03:55
what’s the slack link?
the watman was hilarious
So, yeah. JavaScript is logical, just not to mere mortals.
It does some stuff that's not intuitive, so it's important to understand what so you can work around it
Most of its.... quirks.... can be hidden by D3, you just gotta know when you need to and how to :)
Josh Goldberg
@GoldbergData
Nov 11 2017 04:02
Okay. So I guess from this conversation, I should start with those JS books on that github YSDK or whatever? @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 04:02
I'd start with square, and read through the github books as you have time
OH! Do you know about chaining in javascript?
Josh Goldberg
@GoldbergData
Nov 11 2017 04:03
Looks like I’ll get through square pretty quickly @becausealice2 So I need a quick followup to square?
Alice Jiang
@becausealice2
Nov 11 2017 04:03
That's a big ol' part of D3
Josh Goldberg
@GoldbergData
Nov 11 2017 04:03
No, I don’t.
Alice Jiang
@becausealice2
Nov 11 2017 04:03
okay another quick followup to square
Josh Goldberg
@GoldbergData
Nov 11 2017 04:03
Should we take this private? I don’t want to completely blow up this chat.
Alice Jiang
@becausealice2
Nov 11 2017 04:03
sure hahaha
evaristoc
@evaristoc
Nov 11 2017 10:01

Wow, @GoldbergData @becausealice2 nice conversation! @becausealice2 thanks for the intro! I didn't know about Rmd!

@GoldbergData Answering some of your questions:

  • D3.js is not a framework! It is a library. People make frameworks out of D3.js.
  • Learning D3.js you have to learn JS.
  • Although many people say D3.js is essential for DS, IMO I would say no unless you are into web development projects or want to show things that are not in the available packages.
  • use D3.js mostly for interactivity - although BBC Team shows D3.js graphs for simple non-interactive charts too.
  • use D3.js when you want to add things that are not in a package.
  • For rendering very large amount of data, D3.js might not be enough - learn canvas.
  • Plans for 3D, AR and VR? Three.js.
  • For any kind of visualizations, you might want to get a bit more into design to actually explore D3.js, canvas and three.js fully. It is an specialization on its own actually. Many people in the field prefer to be called visualization expert or similar.
CamperBot
@camperbot
Nov 11 2017 10:01
evaristoc sends brownie points to @goldbergdata and @becausealice2 :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @goldbergdata |http://www.freecodecamp.com/goldbergdata
api offline
evaristoc
@evaristoc
Nov 11 2017 10:06
Mike Bostock is the creator of D3.js.
Josh Goldberg
@GoldbergData
Nov 11 2017 14:31
@evaristoc thanks for the run down! I think I determined to start learning JS first and then at some point of comfortability, start learning D3. Yeah I want to pick and choose when to use it. For like interactivity. Can you give an example “use D3 when you want to add things not in a package.” Is three.js and canvas similar to D3?
CamperBot
@camperbot
Nov 11 2017 14:31
goldbergdata sends brownie points to @evaristoc :sparkles: :thumbsup: :sparkles:
api offline
Josh Goldberg
@GoldbergData
Nov 11 2017 14:46
This book seems to have gotten high praise. What do you think of me starting with it? @evaristoc @becausealice2
Alice Jiang
@becausealice2
Nov 11 2017 14:49
I've not read it, I don't know anything about it
Josh Goldberg
@GoldbergData
Nov 11 2017 14:54
Okay
evaristoc
@evaristoc
Nov 11 2017 16:06

@GoldbergData

I think you already showed an example when to use d3.js to customise the charts.

Another one:

http://www.thefunctionalart.com/2014/07/an-elegant-visualization-about-latest.html

No. Three.js is a framework and canvas is html manipulated by vanilla js.

An example of three.js and d3.js? http://www.6constellation.com/
https://github.com/iris-qu/Constellation-Guide/blob/master/index.html

evaristoc
@evaristoc
Nov 11 2017 16:14
@GoldbergData I have that book and I wouldn't say it is wow. It is ok for starters. From 1 to 10, 6.5.
Josh Goldberg
@GoldbergData
Nov 11 2017 16:56
@evaristoc wow. funny thing about d3 is the code isn’t that extensive to render cool visualizations.
@evaristoc so if you were me and wanted to make meaningful interactive web visualizations (because that’s where your content gets shared most of the time), where would you start to learn D3 well? I’ve gotten other’s opinion, just curious about yours. It seems go to JS. But what’s a good first resource?
Josh Goldberg
@GoldbergData
Nov 11 2017 17:04
@evaristoc I actually just thought of an interesting side project to do. And the interactivity I am imaging will require D3 at bare minimum.
imagining*