Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
   <h1>National Contiguity</h1>
   <h2>Free Code Camp Force-Directed Graph</h2>
<div id='graph'> 
   <div id='flags'>
     </div>
</div>
   </body>
              
            
!

CSS

              
                /*!
 * Generated with CSS Flag Sprite generator (https://www.flag-sprites.com/)
 */
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');

body {
   text-align: center;
   font-family: 'Yanone Kaffeesatz', sans-serif;
}

h2 {
   font-size: 25px;
}

#flags {
   position: absolute;
}

.links{
   stroke: gray;
   stroke-width: 1;
}

.flag {
    display: inline-block;
    width: 32px;
    height: 32px;
    position: absolute;
    background: url('https://s28.postimg.org/ndze98l8t/flags.png') no-repeat;
}

.flag.flag-nz {
    background-position: -224px -320px;
}

.flag.flag-pa {
    background-position: -288px -320px;
}

.flag.flag-cd {
    background-position: -128px -64px;
}

.flag.flag-cn {
    background-position: -384px -64px;
}

.flag.flag-dk {
    background-position: -192px -96px;
}

.flag.flag-vu {
    background-position: -288px -448px;
}

.flag.flag-gy {
    background-position: -288px -160px;
}

.flag.flag-cl {
    background-position: -320px -64px;
}

.flag.flag-st {
    background-position: -320px -384px;
}

.flag.flag-no {
    background-position: -128px -320px;
}

.flag.flag-tw {
    background-position: -352px -416px;
}

.flag.flag-dm {
    background-position: -224px -96px;
}

.flag.flag-kz {
    background-position: -320px -224px;
}

.flag.flag-ec {
    background-position: -320px -96px;
}

.flag.flag-to {
    background-position: -224px -416px;
}

.flag.flag-tm {
    background-position: -160px -416px;
}

.flag.flag-bd {
    background-position: -64px -32px;
}

.flag.flag-ht {
    background-position: -416px -160px;
}

.flag.flag-je {
    background-position: -352px -192px;
}

.flag.flag-ie {
    background-position: -32px -192px;
}

.flag.flag-ck {
    background-position: -288px -64px;
}

.flag.flag-an {
    background-position: -224px 0;
}

.flag.flag-sd {
    background-position: 0 -384px;
}

.flag.flag-om {
    background-position: -256px -320px;
}

.flag.flag-sy {
    background-position: -384px -384px;
}

.flag.flag-kp {
    background-position: -192px -224px;
}

.flag.flag-ao {
    background-position: -256px 0;
}

.flag.flag-ws {
    background-position: -320px -448px;
}

.flag.flag-ky {
    background-position: -288px -224px;
}

.flag.flag-id {
    background-position: 0 -192px;
}

.flag.flag-tz {
    background-position: -384px -416px;
}

.flag.flag-dj {
    background-position: -160px -96px;
}

.flag.flag-vi {
    background-position: -224px -448px;
}

.flag.flag-za {
    background-position: -384px -448px;
}

.flag.flag-km {
    background-position: -128px -224px;
}

.flag.flag-bw {
    background-position: 0 -64px;
}

.flag.flag-ga {
    background-position: -224px -128px;
}

.flag.flag-az {
    background-position: -448px 0;
}

.flag.flag-ba {
    background-position: 0 -32px;
}

.flag.flag-nr {
    background-position: -192px -320px;
}

.flag.flag-gb {
    background-position: -256px -128px;
}

.flag.flag-li {
    background-position: -448px -224px;
}

.flag.flag-pk {
    background-position: -448px -320px;
}

.flag.flag-sc {
    background-position: -448px -352px;
}

.flag.flag-me {
    background-position: -320px -256px;
}

.flag.flag-pf {
    background-position: -352px -320px;
}

.flag.flag-cg {
    background-position: -192px -64px;
}

.flag.flag-tr {
    background-position: -256px -416px;
}

.flag.flag-na {
    background-position: -416px -288px;
}

.flag.flag-ge {
    background-position: -320px -128px;
}

.flag.flag-uz {
    background-position: -64px -448px;
}

.flag.flag-py {
    background-position: -160px -352px;
}

.flag.flag-cm {
    background-position: -352px -64px;
}

.flag.flag-sl {
    background-position: -160px -384px;
}

.flag.flag-gu {
    background-position: -224px -160px;
}

.flag.flag-ci {
    background-position: -256px -64px;
}

.flag.flag-gw {
    background-position: -256px -160px;
}

.flag.flag-hr {
    background-position: -384px -160px;
}

.flag.flag-si {
    background-position: -96px -384px;
}

.flag.flag-ps {
    background-position: -64px -352px;
}

.flag.flag-nc {
    background-position: -448px -288px;
}

.flag.flag-bz {
    background-position: -64px -64px;
}

.flag.flag-gh {
    background-position: -416px -128px;
}

.flag.flag-jm {
    background-position: -384px -192px;
}

.flag.flag-sb {
    background-position: -416px -352px;
}

.flag.flag-kn {
    background-position: -160px -224px;
}

.flag.flag-mk {
    background-position: -416px -256px;
}

.flag.flag-de {
    background-position: -128px -96px;
}

.flag.flag-tj {
    background-position: -96px -416px;
}

.flag.flag-sa {
    background-position: -384px -352px;
}

.flag.flag-mg {
    background-position: -352px -256px;
}

.flag.flag-eg {
    background-position: -384px -96px;
}

.flag.flag-lc {
    background-position: -416px -224px;
}

.flag.flag-mo {
    background-position: -64px -288px;
}

.flag.flag-sg {
    background-position: -64px -384px;
}

.flag.flag-at {
    background-position: -352px 0;
}

.flag.flag-ma {
    background-position: -224px -256px;
}

.flag.flag-am {
    background-position: -192px 0;
}

.flag.flag-gt {
    background-position: -192px -160px;
}

.flag.flag-ch {
    background-position: -224px -64px;
}

.flag.flag-ve {
    background-position: -160px -448px;
}

.flag.flag-ug {
    background-position: -448px -416px;
}

.flag.flag-im {
    background-position: -128px -192px;
}

.flag.flag-md {
    background-position: -288px -256px;
}

.flag.flag-ca {
    background-position: -96px -64px;
}

.flag.flag-sm {
    background-position: -192px -384px;
}

.flag.flag-be {
    background-position: -96px -32px;
}

.flag.flag-lb {
    background-position: -384px -224px;
}

.flag.flag-au {
    background-position: -384px 0;
}

.flag.flag-mc {
    background-position: -256px -256px;
}

.flag.flag-lv {
    background-position: -160px -256px;
}

.flag.flag-ml {
    background-position: -448px -256px;
}

.flag.flag-do {
    background-position: -256px -96px;
}

.flag.flag-cr {
    background-position: -448px -64px;
}

.flag.flag-jp {
    background-position: -448px -192px;
}

.flag.flag-ki {
    background-position: -96px -224px;
}

.flag.flag-co {
    background-position: -416px -64px;
}

.flag.flag-rw {
    background-position: -352px -352px;
}

.flag.flag-fj {
    background-position: -96px -128px;
}

.flag.flag-bs {
    background-position: -416px -32px;
}

.flag.flag-fi {
    background-position: -64px -128px;
}

.flag.flag-bh {
    background-position: -192px -32px;
}

.flag.flag-ni {
    background-position: -64px -320px;
}

.flag.flag-sn {
    background-position: -224px -384px;
}

.flag.flag-ar {
    background-position: -288px 0;
}

.flag.flag-ls {
    background-position: -64px -256px;
}

.flag.flag-vc {
    background-position: -128px -448px;
}

.flag.flag-is {
    background-position: -256px -192px;
}

.flag.flag-lt {
    background-position: -96px -256px;
}

.flag.flag-kw {
    background-position: -256px -224px;
}

.flag.flag-us {
    background-position: 0 -448px;
}

.flag.flag-kr {
    background-position: -224px -224px;
}

.flag.flag-iq {
    background-position: -192px -192px;
}

.flag.flag-my {
    background-position: -352px -288px;
}

.flag.flag-zm {
    background-position: -416px -448px;
}

.flag.flag-mv {
    background-position: -256px -288px;
}

.flag.flag-ad {
    background-position: 0 0;
}

.flag.flag-qa {
    background-position: -192px -352px;
}

.flag.flag-fr {
    background-position: -192px -128px;
}

.flag.flag-la {
    background-position: -352px -224px;
}

.flag.flag-mr {
    background-position: -128px -288px;
}

.flag.flag-td {
    background-position: 0 -416px;
}

.flag.flag-et {
    background-position: -32px -128px;
}

.flag.flag-np {
    background-position: -160px -320px;
}

.flag.flag-bi {
    background-position: -224px -32px;
}

.flag.flag-gr {
    background-position: -160px -160px;
}

.flag.flag-re {
    background-position: -224px -352px;
}

.flag.flag-bf {
    background-position: -128px -32px;
}

.flag.flag-bo {
    background-position: -352px -32px;
}

.flag.flag-lu {
    background-position: -128px -256px;
}

.flag.flag-cy {
    background-position: -64px -96px;
}

.flag.flag-tv {
    background-position: -320px -416px;
}

.flag.flag-ke {
    background-position: 0 -224px;
}

.flag.flag-dz {
    background-position: -288px -96px;
}

.flag.flag-ai {
    background-position: -128px 0;
}

.flag.flag-bt {
    background-position: -448px -32px;
}

.flag.flag-pl {
    background-position: 0 -352px;
}

.flag.flag-ua {
    background-position: -416px -416px;
}

.flag.flag-lr {
    background-position: -32px -256px;
}

.flag.flag-pw {
    background-position: -128px -352px;
}

.flag.flag-br {
    background-position: -384px -32px;
}

.flag.flag-gl {
    background-position: 0 -160px;
}

.flag.flag-gd {
    background-position: -288px -128px;
}

.flag.flag-mq {
    background-position: -96px -288px;
}

.flag.flag-pt {
    background-position: -96px -352px;
}

.flag.flag-vn {
    background-position: -256px -448px;
}

.flag.flag-es {
    background-position: 0 -128px;
}

.flag.flag-eh {
    background-position: -416px -96px;
}

.flag.flag-bn {
    background-position: -320px -32px;
}

.flag.flag-ro {
    background-position: -256px -352px;
}

.flag.flag-aw {
    background-position: -416px 0;
}

.flag.flag-uy {
    background-position: -32px -448px;
}

.flag.flag-gm {
    background-position: -32px -160px;
}

.flag.flag-ng {
    background-position: -32px -320px;
}

.flag.flag-tt {
    background-position: -288px -416px;
}

.flag.flag-bb {
    background-position: -32px -32px;
}

.flag.flag-hu {
    background-position: -448px -160px;
}

.flag.flag-er {
    background-position: -448px -96px;
}

.flag.flag-fo {
    background-position: -160px -128px;
}

.flag.flag-tn {
    background-position: -192px -416px;
}

.flag.flag-gp {
    background-position: -96px -160px;
}

.flag.flag-rs {
    background-position: -288px -352px;
}

.flag.flag-zw {
    background-position: -448px -448px;
}

.flag.flag-mh {
    background-position: -384px -256px;
}

.flag.flag-ae {
    background-position: -32px 0;
}

.flag.flag-mw {
    background-position: -288px -288px;
}

.flag.flag-pg {
    background-position: -384px -320px;
}

.flag.flag-ph {
    background-position: -416px -320px;
}

.flag.flag-cf {
    background-position: -160px -64px;
}

.flag.flag-ne {
    background-position: 0 -320px;
}

.flag.flag-al {
    background-position: -160px 0;
}

.flag.flag-af {
    background-position: -64px 0;
}

.flag.flag-gq {
    background-position: -128px -160px;
}

.flag.flag-mz {
    background-position: -384px -288px;
}

.flag.flag-hn {
    background-position: -352px -160px;
}

.flag.flag-mn {
    background-position: -32px -288px;
}

.flag.flag-gn {
    background-position: -64px -160px;
}

.flag.flag-so {
    background-position: -256px -384px;
}

.flag.flag-sk {
    background-position: -128px -384px;
}

.flag.flag-ms {
    background-position: -160px -288px;
}

.flag.flag-sz {
    background-position: -416px -384px;
}

.flag.flag-tg {
    background-position: -32px -416px;
}

.flag.flag-ye {
    background-position: -352px -448px;
}

.flag.flag-ir {
    background-position: -224px -192px;
}

.flag.flag-cz {
    background-position: -96px -96px;
}

.flag.flag-tl {
    background-position: -128px -416px;
}

.flag.flag-sr {
    background-position: -288px -384px;
}

.flag.flag-kg {
    background-position: -32px -224px;
}

.flag.flag-jo {
    background-position: -416px -192px;
}

.flag.flag-by {
    background-position: -32px -64px;
}

.flag.flag-gg {
    background-position: -384px -128px;
}

.flag.flag-as {
    background-position: -320px 0;
}

.flag.flag-mm {
    background-position: 0 -288px;
}

.flag.flag-tc {
    background-position: -448px -384px;
}

.flag.flag-ee {
    background-position: -352px -96px;
}

.flag.flag-bj {
    background-position: -256px -32px;
}

.flag.flag-cv {
    background-position: -32px -96px;
}

.flag.flag-fm {
    background-position: -128px -128px;
}

.flag.flag-hk {
    background-position: -320px -160px;
}

.flag.flag-se {
    background-position: -32px -384px;
}

.flag.flag-lk {
    background-position: 0 -256px;
}

.flag.flag-pr {
    background-position: -32px -352px;
}

.flag.flag-cu {
    background-position: 0 -96px;
}

.flag.flag-it {
    background-position: -288px -192px;
}

.flag.flag-bm {
    background-position: -288px -32px;
}

.flag.flag-il {
    background-position: -64px -192px;
}

.flag.flag-bg {
    background-position: -160px -32px;
}

.flag.flag-in {
    background-position: -160px -192px;
}

.flag.flag-sv {
    background-position: -352px -384px;
}

.flag.flag-mu {
    background-position: -224px -288px;
}

.flag.flag-nl {
    background-position: -96px -320px;
}

.flag.flag-ag {
    background-position: -96px 0;
}

.flag.flag-pe {
    background-position: -320px -320px;
}

.flag.flag-ly {
    background-position: -192px -256px;
}

.flag.flag-kh {
    background-position: -64px -224px;
}

.flag.flag-ru {
    background-position: -320px -352px;
}

.flag.flag-vg {
    background-position: -192px -448px;
}

.flag.flag-gi {
    background-position: -448px -128px;
}

.flag.flag-mt {
    background-position: -192px -288px;
}

.flag.flag-mx {
    background-position: -320px -288px;
}

.flag.flag-va {
    background-position: -96px -448px;
}

.flag.flag-th {
    background-position: -64px -416px;
}

              
            
!

JS

              
                // jshint esversion: 6
//  <img src="blank.gif" class="flag flag-cz" alt="Czech Republic" />

/*API sample:
"nodes": [
		{ "country": "East Timor", "code": "tl" },
		{ "country": "Canada", "code": "ca" },
		{ "country": "Turkmenistan", "code": "tm" },
		{ "country": "United States of America", "code": "us" },
		{ "country": "Lithuania", "code": "lt" },
		{ "country": "Cambodia", "code": "kh" },
		{ "country": "Ethiopia", "code": "et" },
		{ "country": "Swaziland", "code": "sz" },
		{ "country": "Argentina", "code": "ar" },
		{ "country": "Bolivia", "code": "bo" },
      
      .....
      
      "links": [
		{ "target": 66, "source": 0 },
		{ "target": 3, "source": 1 },
		{ "target": 100, "source": 2 },
		{ "target": 40, "source": 2 },
		{ "target": 125, "source": 2 },
		{ "target": 147, "source": 2 },
		{ "target": 159, "source": 3 },
		{ "target": 18, "source": 3 },
		{ "target": 148, "source": 4 },
		{ "target": 18, "source": 4 },
		{ "target": 154, "source": 4 },
		{ "target": 156, "source": 4 },
      
      
      .......
      
*/


const URL = "https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json";


function graph(url,img){
   d3.json(url,(data) => {
     
      const WIDTH = screen.width;
      const HEIGHT = screen.height;
      
      let tooltip = d3.select('body').append('div')
         .style('color', 'white')
         .style('position', 'absolute')
         .style('background', 'rgba(0,0,0,0.7)')
         .style('padding', '10px 10px 10px 10px')
         .style('font-size', '20px')
         .style('border-radius','5px')
         .style('opacity', '0')
         .data(data.nodes);
      
      
      let svg = d3.select('#graph').append('svg')
                  .attr('width',WIDTH)
                  .attr('height',HEIGHT);
      
      let force = d3.forceSimulation(data.nodes)
                    .force('link',d3.forceLink(data.links))
                    .force('charge',d3.forceManyBody().strength(-100))
                    .force('center',d3.forceCenter(WIDTH / 2, HEIGHT / 2))
                    .force('x',d3.forceX(100))
                    .force('y',d3.forceY(150));
      
      let links = svg.selectAll('.links')
                     .data(data.links)
                     .enter()
                     .append('line')
                     .attr('class','links');
      
      let nodes = d3.select('#flags')
                     .selectAll('img')
                     .data(data.nodes)
                     .enter()
                     .append('img')
                     .attr('class', function(d){ return 'flag flag-' + d.code; })
                     .call(d3.drag()
                     .on("start", dragstarted)
                     .on("drag", dragged)
                     .on("end", dragended))
      
      .on('mouseover', function(d, i) {

         tooltip.transition()
            .style('opacity', 1);

         tooltip.html(function() {

               return d.country;

            })
            .style('left', (d3.event.pageX) + 'px')
            .style('top', (d3.event.pageY) + 'px')
      })

      .on('mouseout', function(d, i) {
         tooltip.transition()
            .style('opacity', 0);
      });

                     
   
      
    force.on('tick',function(){
       
       links.attr('x1',function(d){return d.source.x;})
            .attr('y1',function(d){return d.source.y;})
            .attr('x2',function(d){return d.target.x;})
            .attr('y2',function(d){return d.target.y;});
       
         
         nodes.style('left', function(d){ return d.x + "px"; })
              .style('top', function(d){ return d.y + "px"; });
              
      });
      
      
      
 function dragstarted(d) {
  if (!d3.event.active) force.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) force.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}   
      
   });
}

graph(URL);
              
            
!
999px

Console