d3-table-cards
Version:
Table/Cards views using D3.js for animated transitions.
84 lines (77 loc) • 2.55 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>D3-Table-Cards</title>
<link rel="icon" type="image/png" href="favicon.png" />
<link href="css/d3-table-cards.css" rel="stylesheet" />
<link href="css/demo.css" rel="stylesheet" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.2/d3.min.js"
charset="utf-8"
></script>
<script src="js/data.js" charset="utf-8"></script>
<script src="js/d3-table-cards.js" charset="utf-8"></script>
<meta
name="description"
content="D3-Table-Cards: Example of using D3.js for transformations between table and cards views, with animated transitions while sorting elements or resizing the browser."
/>
<meta
name="keywords"
content="d3 d3v4 js table card cards view javascript animation gemstones"
/>
</head>
<body onresize="redraw()">
<h1>Gemstones Properties</h1>
<div id="opts">
<div>
View: <a href="javascript:redraw('table')">Table</a> /
<a href="javascript:redraw('cards')">Cards</a>
</div>
<div>
Order: <a href="javascript:sort('name')">Name</a> /
<a href="javascript:sort('chakra')">Chakra</a>
</div>
</div>
<div class="holder">
<div class="header sortable">
<div onclick="sort('name')">Gemstone</div>
<div onclick="sort('chakra')">Spiritual properties</div>
</div>
</div>
<script>
window.onload = function () {
render();
};
</script>
<p><br /></p>
<p>
Code available at
<a href="https://github.com/evoluteur/d3-table-cards">GitHub</a> with the
MIT license.
</p>
<p>
The same animation done with CSS transitions instead of D3:
<a href="https://evoluteur.github.io/isomorphic-table-cards/"
>isomorphic-table-cards</a
>.
</p>
<div>
More of my D3 animations with
<a href="https://evoluteur.github.io/meet-the-fans">meet-the-fans</a>
and
<a href="https://evoluteur.github.io/d3-dual-range-slider/"
>d3-dual-range-slider</a
>.
</div>
<p>
Gemstones properties from the book
<a href="https://smile.amazon.com/dp/1844090671" target="crystals"
>Healing Crystals</a
>
by Michael Gienger.
</p>
<p>
© 2023 <a href="https://evoluteur.github.io/">Olivier Giulieri</a>.
</p>
</body>
</html>