Layout improvements + ES6 updates + added package.json.

evoluteur · evoluteur · commit 9dad92e19e23 · 2020-09-30T04:37:07.000-07:00
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Olivier Giulieri
+Copyright (c) 2020 Olivier Giulieri
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/css/pages.css b/css/pages.css
@@ -1,17 +1,25 @@
 /* html pages ------------------------------ */
+html,
+body{
+	margin: 0;
+	padding: 0;
+}
 body{
   color: black;
   background-color: white; 
   background-image: url("bg.gif");
 }
 .header{
 	position: relative;
-	margin: 20px;
+	margin: 10px;
 	padding: 20px;
 	border: solid 1px silver;
 	background-color: #ffffff;
-	min-width: 550px;
-	max-width: 804px;
+	width: 760px;
+	height: 55px;
+}
+svg {	
+	user-select: none;
 }
 h1{
 	font-size: 18px;
@@ -20,11 +28,24 @@ h1{
 
 .github{
 	position:absolute;
-	top:20px;
-	right:20px;
+	top: 18px;
+	right: 16px;
 	text-align: right;
 }
 .github > a{
 	color: #0099cc;
 	text-decoration: none;
+}
+#graph {
+	background-color: white;
+	border: solid 1px silver;
+	border-radius: 5px;
+	margin: 0 10px;
+}
+footer{
+	margin: 20px;
+	color: grey;
+}
+footer > a {
+	color: grey;
 }
diff --git a/index.html b/index.html
@@ -2,8 +2,9 @@
 <html>
 	<head>
 		<title>d3-dual-range-slider</title>
-		<meta name="description" content="SVG slider with d3.js">
-		<meta name="keywords" content="d3 d3.js dual slider widget component">
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<meta name="description" content="SVG range slider for d3.js">
+		<meta name="keywords" content="d3 d3.js dual range slider svg component widget">
 
 		<link rel="icon" type="image/png" href="favicon.png" />
 		<meta charset="utf-8">
@@ -44,14 +45,17 @@
 		<div class="header">
 			<div class="slider-holder"></div>
 			<div class="github">
-				d3-dual-range-slider<br/><br/>
-				<a href="https://github.com/evoluteur/d3-dual-range-slider" target="github">
-				<svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
-			</a></div>
+				<a href="https://github.com/evoluteur/d3-dual-range-slider">d3-dual-range-slider</a><br/><br/>
+				<iframe src="https://ghbtns.com/github-btn.html?user=evoluteur&repo=d3-dual-range-slider&type=star&count=true&size=small" frameborder="0" scrolling="0" width="100px" height="30px"></iframe>
+			</div>
 		</div>
 
 		<svg id="graph" width="800" height="600"></svg>
 
+		<footer>
+			&#169; 2020 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>
+		</footer>
+
 	</body>
 	
 </html>
diff --git a/js/data.js b/js/data.js
@@ -14,9 +14,7 @@ function getData(minGroup, maxGroup){
                 nodesH[n.id]=true;
             }
         });
-        links=fullData.links.filter(function(l){
-            return nodesH[l.source] && nodesH[l.target];
-        })
+        links=fullData.links.filter(l => nodesH[l.source] && nodesH[l.target])
         data = {
             nodes: nodes,
             links: links
diff --git a/js/graph.js b/js/graph.js
@@ -1,37 +1,37 @@
 
 function graph(color){
-
-  var svg = d3.select("#graph"),
+  const svg = d3.select("#graph"),
       width = +svg.attr("width"),
       height = +svg.attr("height");
 
-  var simulation = d3.forceSimulation()
-      .force("link", d3.forceLink().id(function(d) { return d.id; }))
+  const simulation = d3.forceSimulation()
+      .force("link", d3.forceLink().id(d => d.id))
       .force("charge", d3.forceManyBody())
       .force("center", d3.forceCenter(width / 2, height / 2))
+      .force('collision', d3.forceCollide().radius(10))
         .on("tick", ticked);
 
-  var link = svg.append("g")
+  let link = svg.append("g")
       .attr("class", "links")
     .selectAll("line");
 
-  var node = svg.append("g")
+  let node = svg.append("g")
       .attr("class", "nodes")
     .selectAll("circle");
 
-  var t = d3.transition()
-    .duration(750)
-    .ease(d3.easeLinear);
+  const t = d3.transition()
+    .duration(750);
 
   function restart(data){
 
     // Apply the general update pattern to the nodes.
-    node = node.data(data.nodes, function(d) { return d.id;});
-    node.exit().remove();
+    node = node.data(data.nodes, d => d.id);
+    node.exit().transition(t)
+        .style("opacity", 0).remove();
     var newNode = node.enter().append("circle")
-        .attr("r", 7)
+        .attr("r", 10)
         .style("opacity", 0)
-        .attr("fill", function(d) { return color(d.group); })
+        .attr("fill", d => color(d.group))
         .call(d3.drag()
             .on("start", dragstarted)
             .on("drag", dragged)
@@ -43,12 +43,12 @@ function graph(color){
     node = newNode.merge(node);
 
     newNode.append("title")
-        .text(function(d) { return d.id+' ('+d.group+')'; });
+        .text(d => d.id+' ('+d.group+')');
 
     // Apply the general update pattern to the links.
-    link = link.data(data.links, function(d) { return d.source.id + "-" + d.target.id; });
+    link = link.data(data.links, d => d.source.id + "-" + d.target.id);
     link.exit().remove();
-    link = link.enter().append("line").attr("stroke-width", function(d) { return Math.sqrt(d.value); }).merge(link);
+    link = link.enter().append("line").attr("stroke-width", d => Math.sqrt(d.value)).merge(link);
 
     // Update and restart the simulation.
     simulation.nodes(data.nodes);
@@ -59,14 +59,14 @@ function graph(color){
 
   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; });
+        .attr("x1", d => d.source.x)
+        .attr("y1", d => d.source.y)
+        .attr("x2", d => d.target.x)
+        .attr("y2", d => d.target.y);
 
     node
-        .attr("cx", function(d) { return d.x; })
-        .attr("cy", function(d) { return d.y; });
+        .attr("cx", d => d.x)
+        .attr("cy", d => d.y);
   }
 
   function dragstarted(d) {
diff --git a/js/slider.js b/js/slider.js
@@ -38,15 +38,15 @@ slider.insert("g", ".track-overlay")
     .attr("x", x)
     .attr("text-anchor", "middle")
     .style("font-weight", "bold")
-    .style("fill", function(x){return color(x);})
-    .text(function(d) { return d; });
+    .style("fill", x => color(x))
+    .text(d => d);
 
 var handle = slider.selectAll("rect")
   .data([0, 1])
   .enter().append("rect", ".track-overlay")
     .attr("class", "handle")
     .attr("y", -8)
-    .attr("x", function(d) { return x(sliderVals[d]); })
+    .attr("x", d => x(sliderVals[d]))
     .attr("rx", 3)
     .attr("height", 16)
     .attr("width", 20)
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "d3-dual-range-slider",
+  "version": "0.0.2",
+  "description": "SVG component for dual-range-slider built with D3.js.",
+  "author": "Olivier Giulieri (https://evoluteur.github.io/)",
+  "copyright": "(c) 2020 Olivier Giulieri",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/evoluteur/d3-dual-range-slider.git"
+  },
+  "license": "MIT",
+  "homepage": "https://evoluteur.github.io/d3-dual-range-slider/",
+  "bugs": "https://github.com/evoluteur/d3-dual-range-slider/issues",
+  "keywords": [
+    "d3", 
+    "slider", 
+    "range", 
+    "range-slider", 
+    "svg", 
+    "svg-component", 
+    "component",
+    "javascript"
+  ]
+}
