Skip to content

Commit 27e1342

Browse files
evoluteurevoluteur
committed
Changed code indentation to 2 spaces + added links to other d3 projects.
1 parent 8089a21 commit 27e1342

File tree

8 files changed

+389
-342
lines changed

8 files changed

+389
-342
lines changed

‎LICENSE

100644100755
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 Olivier Giulieri
3+
Copyright (c) 2023 Olivier Giulieri
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

100644100755
Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# D3-Table-Cards · [![GitHub license](https://img.shields.io/github/license/evoluteur/d3-table-cards)](https://github.com/evoluteur/d3-table-cards/blob/master/LICENSE) [![npm version](https://img.shields.io/npm/v/d3-table-cards)](https://www.npmjs.com/package/d3-table-cards)
22

33

4-
Example of using D3.js for transformations between table view and cards view, and transitions while sorting elements or resizing the browser.
4+
Example of using D3.js for transformations between table view and cards view, and transitions while sorting elements or resizing the browser.
55

66
Check out [the demo](https://evoluteur.github.io/d3-table-cards/).
77

@@ -17,46 +17,48 @@ The table and cards layouts are configurable.
1717
const layoutInfo = {
1818
table: {
1919
// row position & size
20-
top: (d, i) => 40+i*31+'px',
21-
left: '0px',
22-
height: '30px',
23-
width: '594px',
20+
top: (d, i) => 40+i*31+"px",
21+
left: "0px",
22+
height: "30px",
23+
width: "594px",
2424
// row border-radius
2525
radius: 0,
2626
// table header
2727
headerOpacity: 1,
28-
headerLeft: '0px',
28+
headerLeft: "0px",
2929
// column 1
30-
c1Top: '5px',
31-
c1Left: '8px',
32-
c1FontSize: '16px',
30+
c1Top: "5px",
31+
c1Left: "8px",
32+
c1FontSize: "16px",
3333
// column 2
34-
c2Top: '5px',
35-
c2Left: '200px',
34+
c2Top: "5px",
35+
c2Left: "200px",
3636
},
3737
cards: {
3838
// card position & size
39-
top: (d, i) => Math.floor(i/cardsPerRow)*94+'px',
40-
left: (d, i) => (i%cardsPerRow)*210+'px',
41-
height: '84px',
42-
width: '200px',
39+
top: (d, i) => Math.floor(i/cardsPerRow)*94+"px",
40+
left: (d, i) => (i%cardsPerRow)*210+"px",
41+
height: "84px",
42+
width: "200px",
4343
// card border-radius
44-
radius: '4px',
44+
radius: "4px",
4545
// table header (hidden)
4646
headerOpacity: 0,
47-
headerLeft: '-650px',
47+
headerLeft: "-650px",
4848
// line 1
49-
c1Top: '10px',
50-
c1Left: '10px',
51-
c1FontSize: '18px',
49+
c1Top: "10px",
50+
c1Left: "10px",
51+
c1FontSize: "18px",
5252
// line 2
53-
c2Top: '38px',
54-
c2Left: '10px',
53+
c2Top: "38px",
54+
c2Left: "10px",
5555
}
5656
};
5757

5858
```
59-
6059
Note: The same result can also be achieved [using CSS transitions instead of D3](https://evoluteur.github.io/isomorphic-table-cards/index.html).
6160

62-
(c) 2020 [Olivier Giulieri](https://evoluteur.github.io/), [MIT license](http://github.com/evoluteur/d3-table-cards/blob/master/LICENSE).
61+
My other D3 animations: [meet-the-fans](https://evoluteur.github.io/meet-the-fans) and [d3-dual-range-slider](https://evoluteur.github.io/d3-dual-range-slider).
62+
63+
64+
(c) 2023 [Olivier Giulieri](https://evoluteur.github.io/)

‎css/d3-table-cards.css

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
.holder{
44
position: relative;
5-
margin-bottom: 30px;
65
}
76

87
.header{
@@ -14,7 +13,6 @@
1413
top: 0px;
1514
width: 574px;
1615
height: 19px;
17-
opacity: 0;
1816
}
1917
.header > div{
2018
float: left;

‎css/demo.css

100644100755
Lines changed: 41 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,58 +9,58 @@ body{
99
background-repeat: repeat-y;
1010
}
1111

12+
h1 {
13+
margin-bottom: 40px;
14+
}
1215
a {
13-
text-decoration: none;
14-
color: #259DCB;
16+
text-decoration: none;
17+
color: #259dcb;
1518
}
1619
a:hover {
17-
text-decoration: underline;
18-
color: navy;
19-
}
20-
h1{
21-
margin: 0 0 30px 0;
20+
text-decoration: underline;
21+
color: navy;
2222
}
23-
.github{
24-
display: inline-block;
25-
position: relative;
26-
top: 10px;
27-
left: 10px;
28-
}
29-
#opts{
30-
position: absolute;
31-
top: 10px;
32-
right: 20px;
33-
color: grey;
23+
24+
#opts {
25+
position: absolute;
26+
top: 10px;
27+
right: 20px;
28+
color: grey;
29+
padding: 5px 10px;
30+
border-radius: 5px;
31+
> a {
32+
color: white;
33+
}
3434
}
35-
#opts > div{
36-
padding:5px;
35+
#opts > div {
36+
padding: 5px;
3737
}
3838

39-
.chakra1{
40-
background-color: #ffebee;
41-
border: solid 2px #f44336;
39+
.chakra1 {
40+
background-color: #ffebee;
41+
border: solid 2px #f44336;
4242
}
43-
.chakra2{
44-
background-color: #fff3e0;
45-
border: solid 2px #ff9800;
43+
.chakra2 {
44+
background-color: #fff3e0;
45+
border: solid 2px #ff9800;
4646
}
47-
.chakra3{
48-
background-color: #fff8e1;
49-
border: solid 2px #ffc107;
47+
.chakra3 {
48+
background-color: #fff8e1;
49+
border: solid 2px #ffc107;
5050
}
51-
.chakra4{
52-
background-color: #e8f5e9;
53-
border: solid 2px #4caf50;
51+
.chakra4 {
52+
background-color: #e8f5e9;
53+
border: solid 2px #4caf50;
5454
}
55-
.chakra5{
56-
background-color: #e0f7fa;
57-
border: solid 2px #00bcd4;
55+
.chakra5 {
56+
background-color: #e0f7fa;
57+
border: solid 2px #00bcd4;
5858
}
59-
.chakra6{
60-
background-color: #e8eaf6;
61-
border: solid 2px #3f51b5;
59+
.chakra6 {
60+
background-color: #e8eaf6;
61+
border: solid 2px #3f51b5;
6262
}
63-
.chakra7{
64-
background-color: #f3e5f5;
65-
border: solid 2px #9c27b0;
63+
.chakra7 {
64+
background-color: #f3e5f5;
65+
border: solid 2px #9c27b0;
6666
}

‎index.html

Lines changed: 75 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,81 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>D3-Table-Cards</title>
6-
<meta name="viewport" content="width=device-width,initial-scale=1">
1+
<html xmlns="http://www.w3.org/1999/xhtml">
2+
<head>
3+
<meta charset="utf-8" />
4+
<title>D3-Table-Cards</title>
75
<link rel="icon" type="image/png" href="favicon.png" />
8-
<link href="css/d3-table-cards.css" rel="stylesheet">
9-
<link href="css/demo.css" rel="stylesheet">
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.js" charset="utf-8"></script>
11-
<script src="js/data.js" charset="utf-8"></script>
12-
<script src="js/d3-table-cards.js" charset="utf-8"></script>
13-
<meta name="description" content="D3-Table-Cards: Table/Cards views using D3.js for animated transformations and transitions.">
14-
<meta name="keywords" content="d3 d3v6 table card cards view javascript animation transition transformation morphing gemstone chakra">
15-
</head>
16-
<body onresize="redraw()" onload="render()">
17-
<h1>
18-
D3-Table-Cards
19-
<div class="github">
20-
<iframe src="https://ghbtns.com/github-btn.html?user=evoluteur&repo=d3-table-cards&type=star&count=true&size=small" frameborder="0" scrolling="0" width="100px" height="30px"></iframe>
21-
</div>
22-
</h1>
6+
<link href="css/d3-table-cards.css" rel="stylesheet" />
7+
<link href="css/demo.css" rel="stylesheet" />
8+
<script src="d3.v4.min.js" charset="utf-8"></script>
9+
<script src="data.js" charset="utf-8"></script>
10+
<script src="d3-table-cards.js" charset="utf-8"></script>
11+
<meta
12+
name="description"
13+
content="D3-Table-Cards: Table/Cards views using D3.js for animated transformations and transitions."
14+
/>
15+
<meta
16+
name="keywords"
17+
content="d3 d3v4 js table card cards view javascript animation gemstones"
18+
/>
19+
</head>
20+
<body onresize="redraw()">
21+
<h1>Gemstones Properties</h1>
22+
<div id="opts">
23+
<div>
24+
View: <a href="javascript:redraw('table')">Table</a> /
25+
<a href="javascript:redraw('cards')">Cards</a> /
26+
<a href="javascript:redraw('columns')">Columns</a>
27+
</div>
28+
<div>
29+
Order: <a href="javascript:sort('name')">Name</a> /
30+
<a href="javascript:sort('chakra')">Chakra</a>
31+
</div>
32+
</div>
33+
<div class="holder">
34+
<div class="header sortable">
35+
<div onclick="sort('name')">Gemstone</div>
36+
<div onclick="sort('chakra')">Spiritual properties</div>
37+
</div>
38+
</div>
39+
<script>
40+
window.onload = function () {
41+
render();
42+
};
43+
</script>
2344

24-
<div id="opts">
25-
<div>View:
26-
<a href="javascript:redraw('table')">Table</a> /
27-
<a href="javascript:redraw('cards')">Cards</a>
28-
</div>
29-
<div>Order:
30-
<a href="javascript:sort('name')">Name</a> /
31-
<a href="javascript:sort('chakra')">Chakra</a>
32-
</div>
33-
</div>
34-
<div class="holder">
35-
<div class="header sortable">
36-
<div onclick="sort('name')">Gemstone</div>
37-
<div onclick="sort('chakra')">Spiritual properties</div>
38-
</div>
39-
</div>
45+
<p><br /></p>
4046

41-
<footer>
42-
<p>The code is available at <a href="https://github.com/evoluteur/d3-table-cards">GitHub</a> under the MIT license.</p>
43-
<p>Gemstones information from the book <a href="https://smile.amazon.com/dp/1844090671" target="crystals">Healing Crystals</a> by Michael Gienger.</p>
44-
<p>Notes: This demo page can also be done <a href="https://evoluteur.github.io/isomorphic-table-cards/index.html">using CSS transitions instead of D3</a>.</p>
47+
<p>
48+
Code available at
49+
<a href="https://github.com/evoluteur/d3-table-cards">GitHub</a> with the
50+
MIT license.
51+
</p>
4552

46-
<p><br/>&#169; 2020 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>.</p>
47-
</footer>
53+
<p>
54+
The same animation done with CSS transitions instead of D3:
55+
<a href="https://evoluteur.github.io/isomorphic-table-cards/"
56+
>isomorphic-table-cards</a
57+
>.
58+
</p>
4859

49-
</body>
60+
<div>
61+
More of my D3 animations with
62+
<a href="https://evoluteur.github.io/meet-the-fans">meet-the-fans</a>
63+
and
64+
<a href="https://evoluteur.github.io/d3-dual-range-slider/"
65+
>d3-dual-range-slider</a
66+
>.
67+
</div>
68+
69+
<p>
70+
Gemstones properties from the book
71+
<a href="https://smile.amazon.com/dp/1844090671" target="crystals"
72+
>Healing Crystals</a
73+
>
74+
by Michael Gienger.
75+
</p>
76+
77+
<p>
78+
&#169; 2023 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>.
79+
</p>
80+
</body>
5081
</html>

0 commit comments

Comments
 (0)