How can I get this chart to render locally? (D3.js)

Question

I'm sorry if this is incredibly easy/basic, but I'm completely new to D3.js and I just want to get this example loaded so I can try to modify it with my own data.

I'm trying to replicate the following chart from the d3fc library: https://bl.ocks.org/ColinEberhardt/3ce92a3eef9f97ab4700868896414679

I created three different files as per the example:

|- index.html
|- chart.js
|- data.csv

But then when I try to load index.html, nothing appears in the browser. Am I doing something wrong (or not doing / missing something)?

I haven't installed anything, just copied the code into the files.

Thank you!

Edit:

When I try loading an example that I download directly from the author's github, it looked like this locally:

https://i.sstatic.net/POkSl.jpg

When it should look like this:

https://colineberhardt.github.io/yahoo-finance-d3fc/

Answer 1

Just copy the whole code block and into your index.html file and the script in to the js file and include using the script src path. then declare the chart handler i.e <div id="chartIdHandle"> </div> in your html file and pass to the d3.select function i.e d3.select("#chartIdHandle") You can load the data.csv file within the same function i.e d3.csv("file url") in your if the file is in the local directory you can just use d3.csv("/data.csv") Give it a try.

First I changed all script url to https

<script src="https://unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
<script src="https://unpkg.com/d3@5.5.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/d3fc@14.0.3/build/d3fc.js"></script>

Then the chart js file

<script src='chart.js' type='text/babel'></script>

Give it a try and let me know