There is a lot to handle here, but I can give you a few pointers to get started.
First off, you may not need to do any of this data wrangling yourself. The data cell you have is already nicely tidy. By that I mean that it follows the ideals described in this blog post (this is for the R programming language, but it applies to JS too).
Taking advantage of the tidiness of the data, we can use Plot, which is Observable’s declarative tool to make charts. It is usually much simpler that d3, and I’d recommend using it wherever you can.
For conciseness, I’ve filtered the states to only show the 6 that were in your example.
Plot.plot({
x: { domain: company_sizes, tickRotate: 25 },
y: { percent: true, label: "% remote_work" },
marks: [
Plot.barY(
us_only.filter((d) =>
["CA", "TX", "FL", "NY", "IL", "PA"].includes(d.state)
),
Plot.groupX(
{
y: "mean"
},
{
x: "no_employees",
fill: "no_employees",
y: (d) => (d.remote_work === "Yes" ? 1 : 0),
fx: "state"
}
)
)
],
width,
marginBottom: 60
})
One tricky thing here is to generate a percent with from a group. I’ve mapped answers from Yes and No to 1 and 0, and then taken the average (mean) of the group.
For more details about Plot, you can see it’s documentation notebook and collection here: Observable Plot / Observable | Observable.
There are several other issues I can see with your code. I’ll point out a few here:
You wrote in one cell
company_sizes = {"1-5", "6-25" ,"26-100", "100-500","500-1000", "More than 1000"}
While this is valid JS, it doesn’t do what you want, and is a bit nonsensical. In JS, curly braces ({}) are used to declare objects (mappings from keys, usually strings, to values), and also to enclose blocks, groups of lines of code, usually seen in functions, if statements, and loops. The fact that the Observable inspector shows undefined above your cell should indicate that something has gone wrong. What you want, to declare an array of values, is square brackets:
company_sizes = ["1-5", "6-25" ,"26-100", "100-500","500-1000", "More than 1000"]
You repeat this in the large state_totals cell. At the top you say var state_totals = {}, and then later you say state_totals.push(...). push is a method on JS arrays, not on objects. You’ll want to again use square brackets here:
let state_totals = [];
for (...) {
...
state_totals.push(...);
}
return state_totals;
You may also notice that I used let instead of var. Using var is an older style of JS that isn’t often used anymore. The differences between the two are subtle, but I’d encourage you to always use let (or it’s sibling, const), and never use var.
Finally, I would gently guide you away from using classes right now, and recommend using plain objects. Instead of var c_state_obj = state_obj(), try let cState = {name: curr_state[0].state}. You can then fill in the rest of the fields in the further lines in the loop.
If you would like a fundamentals approach to learning about JS, I’d recommend reading through MDN’s JS tutorials. They are a bit wordy, but do a good job of covering the basics of JS.
