I'm trying to do some Javascript development for the first time in roughly 15 years, and even then, it wasn't really something I was an expert in... I feel like what I'm trying to do should be fairly simple, but it feels like there's been a paradigm shift that I wasn't privy to, that's making all the documentation I've found online really confusing. Starting with my most basic goal -- i'm trying to include this code in my page, so that I can have a stacked area chart: https://observablehq.com/@d3/stacked-area-chart I've copied that function into a javascript file (d3.charts.js), along with https://observablehq.com/@d3/color-legend#Swatches which it also references. But Swatches calls htl, which I eventually figured out was this: https://github.com/observablehq/htl So then I was trying to figure out how to include that in the page as well which has opened a giant can of worms. Given that the last time I worked with javascript was 2007 or 2008, Node.js, and npm, and anything resembling a modern javascript framework did not exist. I learned that I could use

browserify

to bundle an application, and include it in an html page, which sounded like what I wanted, so I'm trying to do that, but this is also where things have gotten complicated. I was able to sort out that if I put this code at the top of my d3.charts.js file, it pulls in the correct dependencies.

const d3 = require("d3/dist/d3");
const htl = require("htl/dist/htl");

And I can use

browserify

to bundle all those dependencies into a single file. The charts depend on d3 per above. d3 depends on jquery. But I also use foundation-sites which also depends on jquery. So I figured that it would be a good idea™ to package jquery as one bundle, foundation as a second bundle, and d3 and the charts as a third bundle (so as not to have jquery duplicated, and to not include the chart bundle on pages that don't need it), and that somehow, I'd be able to set it up so that foundation and my chart bundle would be able to reference jquery. I was able to work out how to exclude jquery from my foundation and chart bundles (

browserify -x jquery

), but what I haven't successfully worked out is how to reference jquery in the HTML so that foundation and the charts can see and use it. It seems that

browserify --standalone

is involved somehow, because that's what's supposed to make things visible from outside the bundle. But I haven't figured out how to make this work. I'm not sure what additional code, etc. might be useful, so I'm going to leave it here, but can reply with whatever. Also, if anyone has a completely different approach, I'm also open to that. Like I said at the start -- I just want the chart in the page...

Maybe avoid the whole build process and get a jquery chart plugin? https://plugins.jquery.com had this little number: http://www.jchartfx.com/#free

How did you find that, because when I search on that page for "chart" it finds nothing... And the license on that particular plugin isn't really acceptable. I'm not going to get approval for a $1700 commercial license for the small number of graphs I'm using this for.

Google was my guiding light (https://www.google.com/search?q=jquery+plugin+chart) then on the 1st link (https://plugins.jquery.com/tag/chart/) it's the 6th one down on the list. Sorry I missed the $$ amt. I used to use one called jqplot which is now DOA. It looks like the jquery plugins are moving to npm, but you can search npmjs by keywords "keywords:jquery-plugin, chart" and see some options there. Another one I came across that actually looks opensource is Flot: https://github.com/flot/flot Sorry if I steered you in the wrong direction.

It's fine. Thanks for the help.