After a couple of failed attempts, I started learning D3.js again!! While Tableau works well enough at work, for my personal projects, it just doesn’t have the flexibility I need for more advanced interactive visualizations.
BTW, If you want to learn D3, I highly recommend Elijah Meeks’s book — D3 in Action. Not learning through this book probably was the reason why I failed before (Udemy courses suck…), so I am pretty confident I can power through it this time.
For the first post in the #LearningD3 series, I want to note down a solution for a problem D3 newbies might come across when running your first D3 script.
Problem: If your D3 script has a data file loaded in (e.g. d3.csv) when you open the HTML, it will fail to read the data because most browsers don’t allow
fetch requests to local files.
Solution 1: Set up a local server
There are a couple of options to set up a local server, but I used the HTTP-server in the command line below(Github page).
#run as an administrator to get around permission limitation
sudo -i#install http-server globally
npm install -g http-server#go to the directory of your D3 files
cd /Users/ChiHuang/Documents/d3#activate the http-server
You should see the link to the local servers now.
Go to either URL in the browser, then you can open files in the directory.
Solution 2: Use IDE’s extensions
If you use an IDE like Visual Studio Code (Free), you should be able to find extensions that allow you to debug/run on your local server and even see the changes live in a browser (Live Server).
Don’t stop here — more of my essays:
- Learning D3 — Books, Code Editor, and Other Resources to Help You Learn
- Visualizing Uncertainty for Decision -Making — Why and How?
- Metric Taxonomy — Which Ones Matter, to Whom, and When?
- The 50 Most Innovative Companies of 2020 — A Visualization
- Good Emails #2 — Subject Lines for Discovery Commerce
- AdPorn #5 — Viral Marketing
You can support me via buy me a coffee.