🏠 back to Observable

Init in fetch


#1

I have been wandering from pages to pages for at least two days, wanting to understand what was I doing wrong for my init function in d3.json(url, init) not to transform my data ?
What programming concept am I missing ?

{
  let dataset1 = []; 

  await d3.json(url,normalize).then(processJSON); // the await to make sure everything is loaded before we proceed

  function processJSON(data){
    dataset1 = data;  // Why is data not normalized ?
  }

  return dataset1
}

After more that two days searching for what I guess is an evidence for you, I have a meta-question.
What strategy do you employ to find your answers. Could I be more efficient in learning ?or I’m asking myself too much… juste needing more time. As for now:

  • I take time to read the docs even when I can’t get much from it because it’s too technical for me, e.g the fetch.spec… Still I opened the fetch page a handful of times in the last months and read some more each time.
    • I admit sometime using a text to speech reader because tech spec style goes well with a robotic voice and it’s not as enjoyable as a Nabokov.
  • I search the Observable notebooks for code looking like mine, here: d3.fetch(data, init).then(...
  • I try stuff, explore, test… but start wondering if unstructured learning is what I need.
  • I sleep thinking of my problem and how to solve it
  • I wake up thinking that I have that problem to solve.
  • I can take online-course or follow tutorials to get started. Did most of Udacity d3 MOOC
  • I read and reproduce examples given in some books like Interactive Data Visualization for the Web*

(edit : - and I formulate questions, it helps a lot just to know that it could be answered. )

What I did not do is attend workshops and have face to face discussion with people using d3js, and I feel I’m missing a lot.

Thank you


how to overcome `uncaught (in promise)` when reconverting to 'regular' HTML?
#2

I think the issue is with the second argument to d3.json. It is not a callback function in d3v5 but is supposed to be an init object which contains options for the fetch call. The MDN web docs has an article which may be easier to read.

Here’s a minimal change to your first cell that does what you intend:

{
  let dataset1 = []; 

  await d3.json(url).then(d => d.map(normalize)).then(processJSON); // the await to make sure everything is loaded before we proceed

  function processJSON(data){
    dataset1 = data;  // Why is data not normalized ?
  }

  return dataset1
}

As for learning strategies, I think most of the ones you listed are on my list too (I’ll have to try the text-to-speech sometime :wink: ). I would also add “taking breaks to relax and do other things” as in my experience it’s important to let the subconscious mind do its work. Also I’ve found that often things that confuse me have been discussed elsewhere on the web e.g. StackOverflow or people’s blogs, so I also make an effort to do a thorough web search for sources outside official docs.


#3

You are good to me. Merci !

I see my error as sticking to the idea that introducing callback in d3.fetch was the change made from d3v4 to d3v5 when it was the opposite. Still a long way to go…