Goal

To fix the double-rendering of Javascript files in my Blog Post.

Notes

I'm currently working on writing my Spending Waaaaaaaaaaaay Too Much Time at Bars blog post and I want to be able to serve custom scripts to each post. To do this, I'm adding script{{pkid}}.js files to my ./DIMMiN/app/dimmin/blog/static/blog/js/ folder, where the {{pkid}} represents the primary key ID of the blog post I want the script for. In the example case I'm working in, that would be script3.js.

I was running into an error where the script was rendered twice (Something about VM:36), but I solved that by re-positioning the code for rendering the javascript at the top of the blog_details.html page:

{% block extra_js %}
    <script src="{% static 'blog/js/script' %}{{ post.pk }}.js"></script>
{% endblock %}

This is because the extra_js block is inserted into place in the base.html Django Template at the bottom of the page and doesn't need to be re-rendered (it takes the above code and puts it with the other JS). Now that I think about it, the VM part of the error could be referring to Virtual Machines, some kind of Cache technique for when js detects the same file being loaded into the HTML.

Then I got back to figuring out why my D3 code wouldn't render in the page. I used the raw HTML view of the CKeditor blog post to insert a div container called threeCircleChart. I found out that the reason I was unable to render components was because I was trying to select the threeCircleChart as if that was the div's id instead of its class. In other words, I was trying to call the container like this:

// Assign the container variable only if it's not already defined
var container = d3.select("#threeCircleChart");

but instead I needed to call it like this:

// Assign the container variable only if it's not already defined
var container = d3.select(".threeCircleChart");

tricky tricky. I wonder if I should make these containers accessible via class or ID when trying to build a D3 script into them. Given that the examples I'm seeing on the D3 Website use class names to define div containers, I think I'll stick to the class-based definitions instead of the id-based ones.

Now that I know I can insert custom D3 charts into my individual blog posts, things get much more interesting. I can now introduce interactive elements into my posts which should be more engaging and fun! Getting them to work on mobile may be a challenge though. Either way I'm not gonna let that stop me from developing this blog post.

Results

• Fixed the double-rendering issue!
• Enabled custom JS per blog post
• Spending Waaaaaaaaaaaay Too Much Time at Bars
  • Generated 3 sample D3 graphs to show off interactivity in D3
  • Did some additional writing for the blog post. I now know how to add in the interactive components.

Next Time

• Continue writing the Spending Waaaaaaaaaaaay Too Much Time at Bars post. Doesn't need to be too involved, just show off that I'm learning D3 and how to implement into the DIMMiN App.