Problems adding a local data set to Zoomable Sunburts

Community Help
1

Hi. I’m an Observable beginner and I’m hitting problems trying to insert local CSV data into the Zoomable Sunburst chart. (I’ve also tried this on the normal Sunburst chart.) I’m starting with just a template for my actual data, to see if I can just get it working. I’ll paste what I inserted below. It throws all kinds of errors throughout the source of the chart and I’m not sure why or how to begin fixing it. Any suggestions?

[{"name":"SmartSystems 2018-2026",
"children":[
	{"name":"Buildings & Facilities",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]}]}
			{"name":"Resources",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]},
	{"name":"Industrial Manufacturing",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]},
	{"name":"Infrastructure",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]},
	{"name":"Healthcare",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]},
	{"name":"Professional IT",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]},
	{"name":"Consumer IT",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]},
	{"name":"Retail, Commercial & Institutional Services",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}]},
	{"name":"Transportation",
		"children":[
			{"name":"2018","value":3938},
			{"name":"2019","value":3938},
			{"name":"2020","value":3938},
			{"name":"2021","value":3938},
			{"name":"2022","value":3938},
			{"name":"2023","value":3938},
			{"name":"2024","value":3938},
			{"name":"2025","value":3938},
			{"name":"2026","value":3938}
	]
}

]

2

Hi, there was a comma missing after “Buildings & Facilities”, 2026 and I added a root node to your data.

1 Like
3

Thanks very much! Hard to believe it was that simple. I didn’t realize I needed a root node. I was copying the structure of data I’d downloaded from other notebooks here, and they didn’t have a root.

Now let me see if I can go forward from here without shooting myself in the foot again.

4

You’re welcome! The d3 tutorials and github docs are very helpful also if you haven’t seen them.


group and rollup maybe useful to you also as you’re working with your data

5

Quick question. I successfully did a version of Zoomable Sunburst. I want to embed it on a web page to show some colleagues to get feedback, but I can’t get “embed code” on it. I tried “link sharing” but now can’t undo that. Tried to find answers in the docs, but can’t. You probably know right off the top of your head, or have a ref for me. Thanks.

6

Hi Ralph,

If you’ve turned on “link sharing” for the notebook, you should be able to just send the notebook URL to your colleagues, and they’ll be able to see the page.

But if you would prefer to embed it, click on the dotted menu to the left of the Zoomable Sunburst cell in order to generate the embed code.

image
image.png1406×762 293 KB

(Note that the cell needs to be named for this option to be offered.)

7

Jeremy, thanks! I see the “embed code” link there now. I think the last time I tried to embed a notebook (couple of months ago), it wasn’t this easy.