Add a d3js script inside a post

support
1

How could I add insert a d3js script inside a post which would show me the charts there .I see the results in a black window and it works on hover.

This is the correct one on a html page right now.

correctnfl.PNG2241×1314 184 KB 

  <svg width="900" height="640"></svg>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.4/d3.min.js" type="text/JavaScript"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.3/d3-queue.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/2.2.0/topojson.min.js"></script>
   <script>
   var svg = d3.select("svg"),
       width = +svg.attr("width"),
       height = +svg.attr("height");

   var projection = d3.geoAlbers()
       .translate([width / 2, height / 2])
       .scale(1280);

   var radius = d3.scaleSqrt()
       .domain([0, 100])
       .range([0, 14]);

   var path = d3.geoPath()
       .projection(projection)
       .pointRadius(2.5);

       var circles = svg.append("svg:nflteams")
    .attr("name", "circles");

   var voronoi = d3.voronoi()
       .extent([[-1, -1], [width + 1, height + 1]]);

          d3.queue()
              .defer(d3.json, "us.json")
              .defer(d3.csv, "nflteams.csv", typeTeam)
              .defer(d3.csv, "nflresults2017.csv", typeSeason)
              .await(ready);

              function typeTeam(d) {
              d[0] = +d.longitude;
              d[1] = +d.latitude;
              d.arcs = {type: "MultiLineString", coordinates: []};
              return d;
              }

  function ready(error, us, nflteams, nflresults2017) {
          if (error) throw error;


          var teambyName = d3.map(nflteams, function(d) { return d.name; });

          nflresults2017.forEach(function(nfl2017) {
            var source = teambyName.get(nfl2017.origin),
                target = teambyName.get(nfl2017.destination);
            source.arcs.coordinates.push([source, target]);
            target.arcs.coordinates.push([target, source]);
          });

          nflteams = nflteams
              .filter(function(d) { return d.arcs.coordinates.length; });



          svg.append("path")
              .datum(topojson.feature(us, us.objects.land))
              .attr("class", "land")
              .attr("d", path);

          svg.append("path")
              .datum(topojson.mesh(us, us.objects.states, function(a, b) {return a !== b;}))
              .attr("class", "state-boundary")
              .attr("d", path);

          svg.append("path")
            .datum({type: "MultiPoint", coordinates: nflteams})
            .attr("class", "nflteam-dots")
            .attr("d", path);

        var nflteam = svg.selectAll(".nflteam")
          .data(nflteams)
          .enter().append("g")
            .attr("class", "nflteam");

            nflteam.append("title")
      .text(function(d) { return d.name + "\n" + d.wins + " wins"; });

      nflteam.append("path")
      .attr("class", "nflteam-arc")
      .attr("d", function(d) { return path(d.arcs) })
        .text(function(d){return "test" + d.wins;});

  nflteam.append("path")
      .data(voronoi.polygons(nflteams.map(projection)))
      .attr("class", "nflteam-cell")
      .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; });

      circles.selectAll("circle")
       .data(nflteams)
     .enter().append("svg:circle")
        .attr("r", function(d) { return d.wins*100; });


      }



      function typeSeason(d) {
      d.result= +d.result
;
      return d;
      }


   </script><img src="//cdck-file-uploads-global.s3.dualstack.us-west-2.amazonaws.com/flex036/uploads/gohugo/original/2X/9/9b7d43fda298c59ee8ce2477491cebfa58dd2980.PNG" width="690" height="404">
2

Hey @senthil_thyagarajan,

Although I would not suggest you to do such a part as render-blocking inline-script, however you can simply change the file extension of your content from .md to .html and the content will be rendered as regular HTML. This should do the trick.

as far as I see you have var svg = d3.select("svg") - so also make sure you include an SVG-Tag in your content.

3

Thank you @rwi.

4

Is there any reason why an just changing the file to have an HTML extension wouldn’t work?

I’m experiencing a similar problem, but I have an HTML extension. My code works outside Hugo, but when I add it to a post I only get the code displayed.

This is probably a really stupid error, but in my defense I’ve only been using Hugo for a couple of days. My post code is as follows:

---
date: 2018-05-06T21:33:05-04:00
description: "Comorbitity Git HTML D3 Gist test"
featured_image: ""
tags: []
title: "Comorbitity Gist D3"
---
<!--script src="https://gist.github.com/wiederkehr/4691995.js"></script>
<!-- script src="//gist.github.com/spf13/7896402.js"></script-->
<script src="https://gist.github.com/shakethedata/d11264360167089cd2df92e1eb1a90a3.js"></script>

Any advice welcome!!

5

When you paste that script and/or any needed HTML into the markdown file, and render using hugo server what are you seeing in the browser console?

6

I just see the code where I would expect to see a graph:

image
image.png1520×637 23.1 KB

7

Hmm, looks like it’s just showing the content of that gist rather than running it. I’m not sure if you can run js directly from github gist. Have you tried copying the js to /static/js and sourcing it from there?

 <script src="/js/some.js...
8

Thanks

Since it’s html mixed with styling and js I’ve just copied it into the md file to get it working, but I was hoping to host the page by just providing a reference file rather than copy and pasting the code from one place to the other.

9

That was Rick’s suggestion. You can certainly do that, just move the code into a page in the appropriate subfolder of your /static folder.