Comments (26)
oweneverbinde
Jul 25, 2020I'm a beginner, so please forgive me for the beginner questions, but: why are some lines written twice? Are you doing the same thing twice to illustrate different approaches?
Jul 25, 2020
wait: never mind. I just found out that one of the lines acts as a title, while the other is the actual, editable text of the cell.
Mike Bostock
Jul 26, 2020The gray blocks are the editable source code, while the white text above is the runtime value of the cell. So for example if the gray block says “foo = 1 + 2” then the white output will say “foo = 3”. (The name is repeated in the output for clarity, since with unpinned cells, the gray source code for the cell will not be shown.)
Jacob Bogers
Jan 5, 2021import {chart as chart2} with {values as data, height} from "@d3/histogram"
First time i am sying this syntax import {...} WITH {...} from "..."
What does the "with" clause do???
kalmdown
May 8, 2021Before diving into D3 it would be nice to point out things like this about Observable.
Blake Bell
Sep 3, 2020I'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.
Cristian
Sep 3, 2020I 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
Blake Bell
Sep 4, 2020Okay. That is helpful feedback, thank you!
Gorm
Sep 20, 2020Blake, 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
Josh Schlesser
Jan 12, 2021A 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
1999foxes
Mar 28, 2021these 'observable specific' things really make the tutorial off the point. I just want to learn d3, why observable?????
xask
Jan 29, 2022i 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
Cristian
Sep 3, 2020You mean version 6?
Fil
Mar 28, 2021yes. thank you!
jarakama
Oct 25, 2020Hello, thank you for this great tool. I have the next message:
values3 = RuntimeError: mu is not defined
How could I fix it?
Thanks!!
jarakama
Oct 25, 2020got it!!! thanks!!!
Shineka Barnett
Dec 13, 2020an array of 3000 float intergers
Walter
Jun 10, 2021This cell contains the array 'values' after loading
Jon Freed
Jul 10, 2021I 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.
Steven Castro
Sep 11, 2021I 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. ?
Francisco Rodriguez
Dec 31, 2020No 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
Dec 31, 2020Tambié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
Jon Freed
Jul 10, 2021So, 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).
Jon Freed
Jul 10, 2021Just 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)
xask
Jan 29, 2022Agree 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
robertorolon
Apr 10, 2022Why 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.