🏠 back to Observable

chart label transference

I am attempting to chart out some aspects of ADB’s 2019 portfolio data using a basic d3.js bar chart:

I am having trouble with the axis information for one chart being repeated across several (specifically, the x-axis label ‘resettlement’ - which appears to be supplied in this line .attr("x", d => x_env(d.name))).

I have tried separating out each chart element and assigning unique names. All charts now appear to be separate elements; I don’t see why the labels would appear common for the charts.

Any insights?

Oh, and actually I’d really like to learn how also to correct get the different safeguard sub-component charts to render out in their correct corresponding place in the summary chart, as works for environment and indigenous peoples, but not resettlement, here. It was upon noticing the buggy rendering in the resettlement chart that I began trying to separate out all axes, leading to the repeated label behavior shown in the forked notebook, shared above.

Hello Aaron,

I don’t quite understand the problem but you say something is duplicated and while I was checking the `adb-sov-projects-20190119.csv’ to do some prototyping with vega voyager, I noticed that the header row is duplicated. Maybe this is part of the problem.

1 Like

Hello Malik, and thanks for helping me out!

Here’s where the chart labels are mismatched:



… in the corresponding data, I have different values for ‘name’, but these are all showing the same set of values. I am not sure why this is happening.

That vega voyager tool is pretty fabulous! Thank you.

As for the duplicate header row - are you referring to the ADB CSV file? I noticed that too, but in this case the data I am referencing for these ‘safeguard’ charts is a smaller subset of information the I extracted by way of a series of filter functions.

Happy for all the help! Thank you!

Ok,
In the xAxis_ip cell you have

xAxis_ip = g => g
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x_ir)  //  <-- x_ir should be x_ip no?
        .tickSizeOuter(0))

I found that mismatch searching through the notebook but as a module 's. This makes it easy to do text searches for variable names.

About vega voyager, yes it’s a really great and you can easily export its charts and embed them in an observable notebook to finalize them.

1 Like

Thank you so much! I clearly missed it. Now the charts are correctly labelled :slight_smile:

1 Like

What do you mean by this?

I mean that when you export the notebook as a module it gives you a file (like so) that you can open in your preferred JavaScript editor (in my case emacs) where it is usually easy to do text searches.

In the notebook module you have all the cell definition. A big and not very welcoming file at first but then with some colors and indentation, you can see that it is very repetitive and not complicated. It’s just (roughly speaking) a sequence of variable binding.
The xAxis_ip cell was written as:

    main.variable(observer("xAxis_ip")).define("xAxis_ip", ["height","margin","d3","x_ir"], function(height,margin,d3,x_ir){return(
	g => g
	    .attr("transform", `translate(0,${height - margin.bottom})`)
	    .call(d3.axisBottom(x_ir)
		    .tickSizeOuter(0))
    )});

while the xAxis_ir

    main.variable(observer("xAxis_ir")).define("xAxis_ir", ["height","margin","d3","x_ir"], function(height,margin,d3,x_ir){return(
	g => g
	    .attr("transform", `translate(0,${height - margin.bottom})`)
	    .call(d3.axisBottom(x_ir)
		    .tickSizeOuter(0))
    )});

Very similar to what you have in the notebook but, if your editor can highlight identical variables then the repetition of x_ir jumps to the eye. That’s what I mean.

Also, I’m really not a big fan of coding in the navigator and I very happy to have understood this module stuff (check my previous post) today :slight_smile:

2 Likes

Thanks Malik! This is very helpful!

Somewhat off topic for this thread, but out of curiosity - It is not currently possible to edit a notebook using a connection to a text editor, correct? There are often times where I want to rename a large number of cells in the same way, and currently to do this I have to click into each cell independently.

I would love that too but I think you are correct. It is not possible. Although I could be an interesting feature request to create or update a notebook from it’s module format. In that case for big edits one could download the notebook’s module, edit it then reupload it.