move most style definitions to force*.css

html/force.css

@@ -1,36 +1,9 @@
-.node ellipse {
-  fill: #fff;
-  stroke-width: 2.5px;
-}
-
-.node text {
-  font-size: 10px;
-  color: #333;
-}
-
-.link line {
-  stroke: #333;
-  stroke-opacity: 1;
-}
-
-.link .label {
-  fill: transparent;
-  stroke: #C83771;
-  stroke-width: 1px;
-}
-
-.strength {
-  font-size: 10px;
-  fill: #C83771;
-}
-
 #chart, #chart svg {
   display: block;
   vertical-align: middle;
 }
 
 #chart {
-  background-image: url(gplaypattern.png);
   position: relative;
 }
 
@@ -59,6 +32,11 @@
 #controlpanel {
   top: 10px;
   right: 10px;
+  font-size: 10pt;
+}
+
+#controlpanel p {
+  margin: 0;
 }
 
 #nodeinfo h1, p {

html/force.js

@@ -12,8 +12,7 @@ function getOffset( el ) {
 var offset = getOffset(document.getElementById('chart'))
 
 var w = window.innerWidth - offset.left,
-    h = window.innerHeight - offset.top,
-    fill = d3.scale.category20()
+    h = window.innerHeight - offset.top
 
 var cp = d3.select("#chart").append("div")
            .attr("id", "controlpanel")
@@ -280,7 +279,7 @@ function update() {
 
   link.selectAll("line")
       .style("stroke-width", function(d) {
-        return Math.min(1, d.strength * 2)
+        return Math.max(1, d.strength * 2)
       })
 
   link.selectAll("path.label")
@@ -330,6 +329,9 @@ function update() {
                 .call(force.drag)
 
   nodeEnter.append("ellipse")
+           .attr("class", function(d) {
+             return "group-" + d.group
+           })
 
   node.selectAll("ellipse")
     .attr("rx", function(d) {
@@ -340,13 +342,6 @@ function update() {
       if (d.group == 3) return 4
       else return 10
     })
-    .style("fill", function(d) {
-      if (d.group == 3) return fill(d.group)
-      else return ""
-    })
-    .style("stroke", function(d) {
-      return fill(d.group)
-    })
 
   nodeEnter.filter(function(d) {
       return d.group != 3

html/nodes.html

@@ -5,6 +5,7 @@
     <title>Freifunk Lübeck - Knotengraph</title>
     <link href='style.css' rel='stylesheet' type='text/css' />
     <link href='force.css' rel='stylesheet' type='text/css' />
+    <link href='force-light.css' rel='stylesheet' type='text/css' />
     <script type="text/javascript" src="jquery.min.js"></script>
     <script type="text/javascript" src="bootstrap-button.js"></script>
     <script type="text/javascript" src="d3.v2.js"></script>