Help with Formatting Hierarchical Data

New To Observable
1

Hey all,

I’m very new to data visualization, especially with D3 tools, and I’ve hit a very frustrating roadblock. I’m trying to visualize a database of community resources using a radial cluster tree diagram. My main challenge has been formatting my hierarchical data correctly and uploading it to Observablehq. To this poitn I have still not been able to visualize my data after days of trying.

Here’s what I’ve tried:

  1. I’ve spent countless hours trying to format my data, both in .csv and .json formats.
  2. Every time I attempt to upload these files to Observablehq, I encounter errors like “root errors” or “chart = RuntimeError: data is not defined”. My Radial Tree has never once appeared.
  3. I’ve sought help from ChatGPT and watched numerous tutorials, but I’m still struggling to grasp the exact steps.

I understand that I might be missing some fundamental steps or concepts, given my limited coding experience. I’m hoping that a kind soul could:

  1. Point me to a comprehensive, step-by-step tutorial suitable for a beginner…I’m talking baby steps
  2. Offer insights or tips on how to format hierarchical data correctly for a radial cluster tree diagram.
  3. Provide guidance on uploading data to Observablehq without errors from excel (which I am most comfortable with).

Thanks!!

1 Like
2

Hi,
I am sorry you are having a rough start. Let me try and describe how I would go about figuring this out (some steps are definitely not obvious…):

  • When I look at the radial cluster tree here I notice that the data used is a JSON object (Bottom of the notebook) so the issue is that you need to transform your data into that format from your csv file.
  • At the top of that notebook, the author mentions D3’s cluster layout, and when I click on that, it takes me to the D3 documentation for d3-hierarchy, which is probably where the data structure is documented… let’s keep going…
  • I see two pretty interesting links there…
    • Hierarchies - represent and manipulate hierarchical data
    • Stratify - organize tabular data into a hierarchy
  • I think the Stratify function is probably what will format your csv data to the right format

In general, it would be very helpful to supply a notebook with your data so that people can help you by forking the notebook and adding their solution. If you do that here, I am pretty sure someone can help you out!

(Updated links based on @mcmcclur comment, thanks!)

1 Like
3

The last few links that @Cobus posted seem to have a little error. Here are the correct links:

I agree that d3.stratify is most likely to be helpful for beginners!

1 Like