Cannot get background flags to appear in force layout

1

Hello, I have gone back and redone the D3 force directed layout, because when I originally did it, there was a different dataset (FCC camper hot news items), and my graph stopped displaying. I did the layout again with the contiguous borders data and got the flag sprites to dsplay locally.

However, now with the code up in Codepen, no matter what image hosting service I use (Google, Photobucket), I can’t get the flag sprites to display, so instead I just have a bunch of geometrically arranged lines. Can anyone help me to get the flag sprites to display? Thank you.

Codepen link is here.

2

You can’t have HTML tags like img in an SVG tag. Right now, you’re appending both flags and lines to the same container

var svg = container.append("svg")
              .attr("width", width)
              .attr("height", height)
              .append("g");

You’ll have to create another container for the flags.

3

Thanks for the help. I realized I had forgotten to add the inner div with id “flag-icons” inside of the graph container, in the HTML panel. Once I did that, flags appeared! Makes me happy!