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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

              
                
<svg width="960" height="900"></svg>
              
            
!

CSS

              
                .links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: #fff;
  stroke-width: 1.5px;
}

text {
  font-family: sans-serif;
  font-size: 10px;

              
            
!

JS

              
                var nodes = [
    {"id": "Bund des Subventionlosen", "group": 1},
    {"id": "A.Oeri (Conseiller national)", "group": 2},
    {"id": "C.Burckhardt", "group": 3},
    {"id": "M.Huber", "group": 3},
    {"id": "M.Pilet-Golaz", "group": 2},
    {"id": "Ministre de Grande-Bretagne", "group": 4},
    {"id": "R.Marti", "group": 3},
    {"id": "CICR", "group": 3},
    {"id": "Interne CICR", "group": 3},
    {"id": "Consul allemand", "group": 5},
    {"id": "Consul de Grande-Bretagne", "group": 4},
    {"id": "Consulat allemand", "group": 5},
    {"id": "Consulat de Grande-Bretagne", "group": 4},
    {"id": "Consulat des Etats-Unis d'Amériques", "group": 6},
    {"id": "Consulat du Japon", "group": 6},
    {"id": "Consulat italien", "group": 6},
    {"id": "Ministère des Affaires Etrangères allemand", "group": 5},
    {"id": "Ministère des Affaires Etrangères britannique", "group": 4},
    {"id": "Président de la Croix-Rouge allemande", "group": 5},
    {"id": "DIE", "group": 2},
    {"id": "Légation britannique", "group": 4},
    {"id": "Légation allemande", "group": 5},
    {"id": "Légation suisse de Berlin", "group": 2},
    {"id": "Légation suisse de Londres", "group": 2},
    {"id": "Britanniques", "group": 4},
    {"id": "Interne DPF", "group": 2},
    {"id": "J.de Saussure", "group": 2},
    {"id": "Autorités suisses", "group": 2},
    {"id": "DPF", "group": 2},
    {"id": "A-E.de Pury", "group": 2},
    {"id": "Ministre d'Allemagne", "group": 5},
    {"id": "J.Meylan", "group": 3},
    {"id": "R.Gallopin", "group": 3},
    {"id": "Secrétariat du CICR", "group": 3},
    {"id": "R.Haccius", "group": 3},
    {"id": "Ph.Etter", "group": 7},
    {"id": "Légation suisse de Stockholm", "group": 2},
    {"id": "Source inconnue", "group": 8},
    {"id": "H.Bachmann", "group": 3},
    {"id": "Gouvernements britannique et canadien", "group": 4},
    {"id": "E.de Haller", "group": 7},
    {"id": "Gouvernement britannique", "group": 4},
    {"id": "Demokratische Partei", "group": 1},
    {"id": "Consulat général de Suisse à Bombay", "group": 2},
    {"id": "Consul de Suisse à Toronto", "group": 2},
    {"id": "Consul général d'Allemagne", "group": 5},
    {"id": "Gouvernement allemand", "group": 5},
  {"id": "Conseil Fédéral", "group": 2},
  {"id": "Président du Conseil Fédéral", "group": 2},
  {"id": "Légation des Etats-Unis d'Amériques", "group": 6},
  ];

var links = [
{"source": "Bund des Subventionlosen", "target": "Conseil Fédéral", "value": 1},
{"source": "C.Burckhardt", "target": "A.Oeri (Conseiller national)", "value": 1},
{"source": "C.Burckhardt", "target": "M.Huber", "value": 2},
{"source": "C.Burckhardt", "target": "M.Pilet-Golaz", "value": 3},
{"source": "C.Burckhardt", "target": "Ministre de Grande-Bretagne", "value": 2},
{"source": "C.Burckhardt", "target": "R.Marti", "value": 1},
{"source": "CICR", "target": "Interne CICR", "value": 2},
{"source": "CICR", "target": "Consul allemand", "value": 1},
{"source": "CICR", "target": "Consulat de Grande-Bretagne", "value": 1},
{"source": "CICR", "target": "Consulat allemand", "value": 1},
{"source": "CICR", "target": "Consulat des Etats-Unis d'Amériques", "value": 1},
{"source": "CICR", "target": "Consulat du Japon", "value": 1},
{"source": "CICR", "target": "Consulat italien", "value": 1},
{"source": "CICR", "target": "Ministère des Affaires Etrangères allemand", "value": 1},
{"source": "CICR", "target": "Ministère des Affaires Etrangères britannique", "value": 1},
{"source": "CICR", "target": "Président de la Croix-Rouge allemande", "value": 1},
{"source": "Consul de Grande-Bretagne", "target": "C.Burckhardt", "value": 1},
{"source": "Consul de Grande-Bretagne", "target": "CICR", "value": 1},
{"source": "Consul de Grande-Bretagne", "target": "C.Burckhardt", "value": 1},
{"source": "Consul de Grande-Bretagne", "target": "M.Huber", "value": 1},
{"source": "Consul de Suisse à Toronto", "target": "Interne DPF", "value": 1},
{"source": "Consul général d'Allemagne", "target": "C.Burckhardt", "value": 1},
{"source": "Consulat général de Suisse à Bombay", "target": "DIE", "value": 1},
{"source": "Demokratische Partei", "target": "Président du Conseil Fédéral", "value": 1},
{"source": "DIE", "target": "M.Pilet-Golaz", "value": 1},
{"source": "DPF", "target": "Légation britannique", "value": 2},
{"source": "DPF", "target": "Légation allemande", "value": 1},
{"source": "DPF", "target": "Légation suisse de Berlin", "value": 1},
{"source": "DPF", "target": "Légation suisse de Londres", "value": 3},
{"source": "DPF", "target": "M.Pilet-Golaz", "value": 6},
{"source": "E.de Haller", "target": "Britanniques", "value": 1},
  {"source": "E.de Haller", "target": "C.Burckhardt", "value": 4},
  {"source": "E.de Haller", "target": "CICR", "value": 3},
  {"source": "E.de Haller", "target": "Interne DPF", "value": 11},
  {"source": "E.de Haller", "target": "J.de Saussure", "value": 3},
  {"source": "E.de Haller", "target": "M.Huber", "value": 2},
  {"source": "E.de Haller", "target": "M.Pilet-Golaz", "value": 3},
{"source": "Gouvernement allemand", "target": "Légation suisse de Berlin", "value": 1},
  {"source": "Gouvernement britannique", "target": "Autorités suisses", "value": 1},
  {"source": "Gouvernements britannique et canadien", "target": "Gouvernement allemand", "value": 1},
  {"source": "H.Bachmann", "target": "J.de Saussure", "value": 1},
  {"source": "Interne DPF", "target": "M.Pilet-Golaz", "value": 3},
  {"source": "J.de Saussure", "target": "Interne DPF", "value": 1},
  {"source": "Légation allemande", "target":"DPF", "value":1},
{"source": "Légation britannique", "target": "DIE", "value": 1},
{"source": "Légation britannique", "target": "DPF", "value": 2},
{"source": "Légation des Etats-Unis d'Amériques", "target": "DPF", "value": 1},
{"source": "Légation suisse de Berlin", "target": "A-E.de Pury", "value": 1},
{"source": "Légation suisse de Berlin", "target": "DIE", "value": 1},
  {"source": "Légation suisse de Berlin", "target": "DPF", "value": 1},
  {"source": "Légation suisse de Londres", "target": "DPF", "value": 4},
  {"source": "Légation suisse de Stockholm", "target": "DPF", "value": 1},
{"source": "M.Pilet-Golaz", "target": "A-E.de Pury", "value": 1},
  {"source": "M.Pilet-Golaz", "target": "Ministre d'Allemagne", "value": 2},
  {"source": "M.Pilet-Golaz", "target": "Ministre de Grande-Bretagne", "value": 2},
  {"source": "M.Pilet-Golaz", "target": "Interne DPF", "value": 1},
{"source": "Ministre de Grande-Bretagne", "target": "M.Pilet-Golaz", "value": 1},
  {"source": "Ph.Etter", "target": "CICR", "value": 2},
  {"source": "Président de la Croix-Rouge allemande", "target": "C.Burckhardt", "value": 1},
 {"source": "R.Haccius", "target": "CICR", "value": 2},
{"source": "R.Marti", "target": "CICR", "value": 1},
{"source": "R.Marti", "target": "J.Meylan", "value": 1},
{"source": "R.Marti", "target": "R.Gallopin", "value": 1},
{"source": "R.Marti", "target": "Secrétariat du CICR", "value": 1},
 {"source": "Source inconnue", "target": "Interne CICR", "value": 1}, 
  ];

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var color = d3.scaleOrdinal(d3.schemeCategory10);

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));

var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(links)
    .enter().append("line")
.attr("stroke-width", function(d) { return Math.sqrt(d.value); });

var node = svg.append("g")
    .attr("class", "nodes")
    .selectAll("circle")
    .data(nodes)
    .enter().append("circle")
      .attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

var labels = node.append("text")
      .text(function(d) {
        return d.id;
      })
      .attr('x', 6)
      .attr('y', 3);

  node.append("title")
      .text(function(d) { return d.id; });

simulation
  .nodes(nodes)
  .on("tick", ticked);

simulation.force("link")
  .links(links);

function ticked() {
    link
        .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; });

    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
}
  

function dragstarted(d) {
  if (!d3.event.active) simulation.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) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
              
            
!
999px

Console