Skip to content

Commit 01ecf64

Browse files
evoluteurevoluteur
committed
Added links to my other D3 prjects.
1 parent 9dad92e commit 01ecf64

File tree

4 files changed

+123
-102
lines changed

4 files changed

+123
-102
lines changed

‎README.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
# d3-dual-range-slider
22

3-
SVG component for dual-range-slider built with D3.js.
3+
SVG component for dual-range-slider built with D3.js.
44

55
[Live demo](https://evoluteur.github.io/d3-dual-range-slider) controling groups in a force-layout graph.
66

77
![Screenshot](https://raw.githubusercontent.com/evoluteur/d3-dual-range-slider/master/screenshot.gif)
88

9-
(c) 2020 [Olivier Giulieri](https://evoluteur.github.io/).
9+
More of my D3 animations with
10+
[meet-the-fans](https://evoluteur.github.io/meet-the-fans)
11+
and
12+
[d3-table-cards](https://evoluteur.github.io/d3-table-cards/).
13+
14+
15+
(c) 2023 [Olivier Giulieri](https://evoluteur.github.io/).

‎css/pages.css

+43-40
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,54 @@
11
/* html pages ------------------------------ */
22
html,
3-
body{
4-
margin: 0;
5-
padding: 0;
3+
body {
4+
margin: 0;
5+
padding: 0;
66
}
7-
body{
7+
body {
88
color: black;
9-
background-color: white;
9+
background-color: white;
1010
background-image: url("bg.gif");
1111
}
12-
.header{
13-
position: relative;
14-
margin: 10px;
15-
padding: 20px;
16-
border: solid 1px silver;
17-
background-color: #ffffff;
18-
width: 760px;
19-
height: 55px;
20-
}
21-
svg {
22-
user-select: none;
23-
}
24-
h1{
25-
font-size: 18px;
26-
margin: 0;
27-
}
28-
29-
.github{
30-
position:absolute;
31-
top: 18px;
32-
right: 16px;
33-
text-align: right;
34-
}
35-
.github > a{
36-
color: #0099cc;
37-
text-decoration: none;
12+
.header {
13+
position: relative;
14+
margin: 10px;
15+
padding: 20px;
16+
border: solid 1px silver;
17+
background-color: #ffffff;
18+
width: 760px;
19+
height: 55px;
20+
}
21+
svg {
22+
user-select: none;
23+
}
24+
h1 {
25+
font-size: 18px;
26+
margin: 0;
27+
}
28+
.more {
29+
padding: 20px 20px 0;
30+
}
31+
.github {
32+
position: absolute;
33+
top: 14px;
34+
right: 16px;
35+
text-align: right;
36+
}
37+
.github > a {
38+
color: #0099cc;
39+
text-decoration: none;
40+
font-size: 1.5em;
3841
}
3942
#graph {
40-
background-color: white;
41-
border: solid 1px silver;
42-
border-radius: 5px;
43-
margin: 0 10px;
43+
background-color: white;
44+
border: solid 1px silver;
45+
border-radius: 5px;
46+
margin: 0 10px;
4447
}
45-
footer{
46-
margin: 20px;
47-
color: grey;
48+
footer {
49+
margin: 20px;
50+
color: grey;
4851
}
4952
footer > a {
50-
color: grey;
51-
}
53+
color: grey;
54+
}

‎index.html

+65-53
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,73 @@
11
<!DOCTYPE html>
22
<html>
3-
<head>
4-
<title>d3-dual-range-slider</title>
5-
<meta name="viewport" content="width=device-width,initial-scale=1">
6-
<meta name="description" content="SVG range slider for d3.js">
7-
<meta name="keywords" content="d3 d3.js dual range slider svg component widget">
3+
<head>
4+
<title>d3-dual-range-slider</title>
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<meta name="description" content="SVG range slider for d3.js" />
7+
<meta
8+
name="keywords"
9+
content="d3 d3.js dual range slider svg component widget"
10+
/>
811

9-
<link rel="icon" type="image/png" href="favicon.png" />
10-
<meta charset="utf-8">
11-
<link rel="stylesheet" type="text/css" href="css/pages.css">
12-
<link rel="stylesheet" type="text/css" href="css/graph.css">
13-
<link rel="stylesheet" type="text/css" href="css/slider.css">
14-
<script src="js/d3.v4.min.js"></script>
15-
<script src="js/data.js"></script>
16-
<script src="js/slider.js"></script>
17-
<script src="js/graph.js"></script>
18-
<script>
19-
window.onload = function(){
20-
var v1=3,
21-
v2=7;
12+
<link rel="icon" type="image/png" href="favicon.png" />
13+
<meta charset="utf-8" />
14+
<link rel="stylesheet" type="text/css" href="css/pages.css" />
15+
<link rel="stylesheet" type="text/css" href="css/graph.css" />
16+
<link rel="stylesheet" type="text/css" href="css/slider.css" />
17+
<script src="js/d3.v4.min.js"></script>
18+
<script src="js/data.js"></script>
19+
<script src="js/slider.js"></script>
20+
<script src="js/graph.js"></script>
21+
<script>
22+
window.onload = function () {
23+
var v1 = 3,
24+
v2 = 7;
2225

23-
// want the same groups colors in both graph and slider
24-
var color = d3.scaleOrdinal(d3.schemeCategory20);
25-
for(var i=0;i<11;i++){
26-
color(i);
27-
}
28-
// graph is not fully componentized but returns a refresh function
29-
var myGraph = graph(color);
26+
// want the same groups colors in both graph and slider
27+
var color = d3.scaleOrdinal(d3.schemeCategory20);
28+
for (var i = 0; i < 11; i++) {
29+
color(i);
30+
}
31+
// graph is not fully componentized but returns a refresh function
32+
var myGraph = graph(color);
3033

31-
function updateGraph(min, max){
32-
var data = getData(min, max);
33-
myGraph.restart(data);
34-
}
34+
function updateGraph(min, max) {
35+
var data = getData(min, max);
36+
myGraph.restart(data);
37+
}
3538

36-
setupSlider(v1, v2, updateGraph, color);
37-
updateGraph(v1, v2);
39+
setupSlider(v1, v2, updateGraph, color);
40+
updateGraph(v1, v2);
41+
};
42+
</script>
43+
</head>
3844

39-
}
40-
</script>
41-
</head>
45+
<body>
46+
<div class="header">
47+
<div class="slider-holder"></div>
48+
<div class="github">
49+
<a href="https://github.com/evoluteur/d3-dual-range-slider"
50+
>d3-dual-range-slider</a
51+
><br /><br />
52+
<iframe
53+
src="https://ghbtns.com/github-btn.html?user=evoluteur&repo=d3-dual-range-slider&type=star&count=true&size=small"
54+
frameborder="0"
55+
scrolling="0"
56+
width="100px"
57+
height="30px"
58+
></iframe>
59+
</div>
60+
</div>
4261

43-
<body>
44-
45-
<div class="header">
46-
<div class="slider-holder"></div>
47-
<div class="github">
48-
<a href="https://github.com/evoluteur/d3-dual-range-slider">d3-dual-range-slider</a><br/><br/>
49-
<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>
50-
</div>
51-
</div>
52-
53-
<svg id="graph" width="800" height="600"></svg>
54-
55-
<footer>
56-
&#169; 2020 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>
57-
</footer>
58-
59-
</body>
60-
61-
</html>
62+
<svg id="graph" width="800" height="600"></svg>
63+
<div class="more">
64+
More of my D3 animations with
65+
<a href="https://evoluteur.github.io/meet-the-fans">meet-the-fans</a>
66+
and
67+
<a href="https://evoluteur.github.io/d3-table-cards/">d3-table-cards</a>.
68+
</div>
69+
<footer>
70+
&#169; 2023 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>
71+
</footer>
72+
</body>
73+
</html>

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "0.0.2",
44
"description": "SVG component for dual-range-slider built with D3.js.",
55
"author": "Olivier Giulieri (https://evoluteur.github.io/)",
6-
"copyright": "(c) 2020 Olivier Giulieri",
6+
"copyright": "(c) 2023 Olivier Giulieri",
77
"repository": {
88
"type": "git",
99
"url": "https://github.com/evoluteur/d3-dual-range-slider.git"
@@ -12,12 +12,12 @@
1212
"homepage": "https://evoluteur.github.io/d3-dual-range-slider/",
1313
"bugs": "https://github.com/evoluteur/d3-dual-range-slider/issues",
1414
"keywords": [
15-
"d3",
16-
"slider",
17-
"range",
18-
"range-slider",
19-
"svg",
20-
"svg-component",
15+
"d3",
16+
"slider",
17+
"range",
18+
"range-slider",
19+
"svg",
20+
"svg-component",
2121
"component",
2222
"javascript"
2323
]

0 commit comments

Comments
 (0)