A guided tour of your first steps using D3.

Mike Bostock

Learn D3: Introduction

Learn D3: By Example

Learn D3: Data

Learn D3: Scales

Learn D3: Shapes

Learn D3: Animation

Learn D3: Joins

Learn D3: Interaction

Learn D3: Further Topics

D3 Documentation

Learn D3

No por coincidencia, Observable está diseñado para ayudarte a retocar. ¡Visita cualquier cuaderno, edita una celda, y mira lo que pasa! En muchos casos, todo lo que se necesita para sustituir sus datos es hacer clic para reemplazar un archivo. Si te gusta el resultado, guarda tu trabajo bifurcándolo.

Francisco Rodriguez

I'm newer to JavaScript. How can I put this in my javascript? What is required to use this statement? I have a basic html page setup with a javascript script.

Blake Bell

I think that if you want to use d3 in your own website (or html page, or whatever), you need to import the right JS files, either locally or by referencing them in the <head> of your html.

I think this tutorial teaches you how to use d3, and how to use it here in ObservableHQ, but not necessarily how to code in JS, which is what you will probably want to learn first.

Also, as the message above says, this feature is unique to Observable Javascript. So doing the same in your own HTML/JS app would probably look a lot different

Cristian

Okay. That is helpful feedback, thank you!

Blake, you can embed or download notebooks. Not sure this is what you're looking for, but it was a real eye-opener for me: https://observablehq.com/@observablehq/downloading-and-embedding-notebooks

Gorm

A quick note on the 'with' in the import statement for anybody who has come here without first reading through the Observable tutorials.  Its observable specific.  You can read about it here https://observablehq.com/@observablehq/introduction-to-imports?collection=@observablehq/notebook-fundamentals

Josh Schlesser

these 'observable specific' things really make the tutorial off the point. I just want to learn d3, why observable?????

i share the same frustration as above, I came here to learn about d3.js and how to use it in my HTML+JS project, what the hell are you promoting this observable hq ? seperate the 2 things !
extremely irritating

xask

Just when I thought I had things figured out.... the order now is apparently middle, top, bottom.  I'm sure that's obvious to anybody who's been working with Observable for a while, but that's most people who come to this page.  Also, I'm sorry to say, but we're not learning d3 by example.  "D3.js is a JavaScript library" (per https://d3js.org/) and what is being presented here is not Javascript.  Instead, we're learning how to use D3 within Observable.  We will have to learn a different syntax -- the Javascript syntax -- if our audience only wants to see the output and doesn't like the Observable paradigm of letting people see how the sausage is made.  (also known as the typical business person audience)

Jon Freed

Agree this mixing of observable + d3js is frustrating and time wasting for me,
i came here to learn d3.js and suddently i am learning this obvservable thing

También puedes importar ejemplos y retocarlos sin tener que sumergirte en el código. Esta es sin duda la forma más rápida de empezar con D3, y se hará más potente a medida que aprendas

So, these lines are also confusing, even though I'm pretty sure I know what's going on.  It appears that the order of execution is grey line 2 produces white line 1, and then grey line 4 produces white line 3.  My point is this:  I'm pretty much 100% confident that I've figured out that order, but the order is still counterintuitive for people who are used to reading top-to-bottom, which is pretty much everybody unless you communicate in "ancient Berber" or the "Batak, Hanunó’o, and Tagbanwa languages of the Philippines" (https://www.quora.com/Are-there-languages-which-write-from-bottom-to-top).

Shineka Barnett

This cell contains the array 'values' after loading

Walter

I am here in good faith after reading this post:  https://talk.observablehq.com/t/i-want-to-learn-d3-i-don-t-want-to-learn-observable-is-that-ok/1957    

These two lines above ^^^ that start with "values =" are the first time that readers are being presented with a code block (or whatever it is supposed to be called).  However, there is no explanation that goes with these two lines.  I don't see any reason why there are two lines, one white and one grey.  It feels like I'm expected to just know what's going on, but I've never seen an Observable notebook (or whatever this is) before.

The two lines look a little bit like somebody transpiled the second/grey line and then put the transpilation output in the preceding/first/white area.  But that is counterintuitive.  It goes against our natural way of reading from top to bottom.

I agree with Jon on this one, I've been using Observable for 24 hours now. Did the 3 tutorials, and got used to it. But why is the output of the code on top of the input. ?

Steven Castro

Why are there fewer ticks along the y-axis? 
By rerunning the histogram chart with a new height, the following code gets evaluated: 

 yRange = [height - marginBottom, marginTop] 
 const yScale = yType(yDomain, yRange); // this normalizes the domain to the new range
const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat); // the yAxis now conforms to the new scale.

Hello, thank you for this great tool. I have the next message:

values3 = RuntimeError: mu is not defined

How could I fix it?

Thanks!!