I believe I’m missing a way of attaching the actual visualization to the DOM but I can’t quite figure out how to do that (I thought the async generator that produces the chart would do this but it doesn’t seem to execute for some reason). Any guidance appreciated
I am not the best at this, and I am very unfamiliar with CodePen… but at the end you commented out some lines that assign the SVG to a div element. Hopefully I am not way off base here (and hopefully someone more knowledgeable steps in to help), but each time I try to transcribe something to HTML I tend to get caught on this. In Observable, you can just “return()” an element (like I think you’re doing with chart() ) and that will render, but in HTML you have have to attach it to a DOM element.
Not sure this helps (or that it’s even correct). If I get more time I’ll see if I can solve it.
Hey Aaron, thank you so much for your comment! You are correct, I do have that line which is commented out. That appends an arbitrary blank svg element. It’s commented because I’m not sure how to append the chart itself in an SVG element.
My intention with chart() is to do exactly as you say - to return the chart element… but my tests show that chart() isn’t actually executing. I think because of something about it being an async generator. It could very well be that this chart() piece shouldn’t be in an async generator but that was the only combination of JS code I tried that didn’t produce an error due to the yield statement and later await statement that Mike had written.
Seems like you’re on the right track! Sorry that I haven’t managed a solution yet. Not much time this evening.
This is probably too much of an oversimplification for your purposes, but I wanted to share this notebook, which I found helpful / inspirational in my learning process this evening for very simply showing basic DOM manipulations:
I really expect that all you need to solve is the last bit of rendering your SVG into something…
In the linked notebook, the different compared to your codes is that this one shows D3.js selecting a given <div> element and appending to it a newly-created HTML element (in this case p) with some text.
In your code, I am seeing first all these functions that define what to do with an SVG. I then see the SVG get ‘created’ later down, and from there your pass it through the functions you define above. All of these looks like it should be yielded out at the bottom, e.g. via chart(), but as you indicate the final ‘glue’ isn’t there yet. I’ll keep trying…
Just in case you’re looking for the shortest path to victory
In these various examples, the SVG looks to be defined early on as a selection of some DOM element, e.g. (const svg = d3.select("#chart")). I am not sure the extent to which this matters in terms of your code organization. I’ll have another crack at adjusting your code if I get a chance this weekend (though I am pretty swamped now and also really clumsy at all this coding stuff, but it’s fun to learn and good practice). You are likely to solve this before me.
… On a bit of an aside, I wonder if in CodePen you can separate your data from your visualization code? It’s a lot to scroll through (though I suppose you’re trying how to get this all working in one HTML file, which I totally appreciate).
and then in your chart() function, do something like: const svg = d3.select("#chart").attr("viewBox", [-150, 0, width + currency_x_shift + 150, height]);
as Aaron suggested also.
I’ve successfully used that technique to override the data from Observable’s simple bar chart example in the below CodePen
Using this technique on the Bar Chart Race unexpectedly fails.
Above I try to override the data variable as I successfully did in the bar chart example, but in this case it fails to produce the bar chart race. Specifically, if I comment out the line main.redefine("data", newData); then the bar chart race plays as expected. Otherwise, nothing appears.