This repository has been archived by the owner on Jun 8, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
d3-canvas-transition.html
112 lines (103 loc) · 7 KB
/
d3-canvas-transition.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html data-debug='false' lang='en' prefix='og: http://ogp.me/ns#'>
<head>
<title>GiottoJs</title>
<meta charset='utf-8'>
<meta content='IE=edge' http-equiv='X-UA-Compatible'>
<meta content='width=device-width, initial-scale=1' name='viewport'>
<meta content='#ffffff' name='msapplication-TileColor'>
<meta content='/icons/ms-icon-144x144.png' name='msapplication-TileImage'>
<meta content='#ffffff' name='theme-color'>
<meta content='GiottoJS is a javascript visualization library built on top of d3js. It is designed to visualize both SVG and Canvas elements with a simple API. AngularJS integration' name='description'>
<meta content='eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJMT0NBTEUiOiJlbl9HQiIsInBhZ2UiOnsiZ3JvdXAiOiJzaXRlIiwic2x1ZyI6ImQzLWNhbnZhcy10cmFuc2l0aW9uIiwiYm9keV90ZW1wbGF0ZSI6ImhvbWUuaHRtbCIsImJvZHlfbGVuZ3RoIjoyMDUyLCJwYXRoIjoiL2QzLWNhbnZhcy10cmFuc2l0aW9uIiwiYXBpX3VybCI6Imh0dHBzOi8vZ2lvdHRvanMub3JnL2FwaS9jb250ZW50cy9zaXRlL2QzLWNhbnZhcy10cmFuc2l0aW9uIiwiaW5uZXJfdGVtcGxhdGUiOiJwYXJ0aWFscy9iYXNlLmh0bWwifSwiZGVidWciOmZhbHNlLCJNSU5JRklFRF9NRURJQSI6dHJ1ZSwiQ09QWVJJR0hUIjoiTHV4IiwiQVBQX05BTUUiOiJHaW90dG9KcyIsIkRBVEVUSU1FX0ZPUk1BVCI6ImQgTU1NIHksIGg6bW06c3MgYSIsIkFQSV9VUkwiOiIvYXBpIiwiTUVESUFfVVJMIjoiL21lZGlhLyIsIkRBVEVfRk9STUFUIjoiZCBNTU0geSIsImx1eF92ZXJzaW9uIjoiMC44LjIuZGV2MjAxNjEyMDIxMjAyMDAifQ.3ekoVoagYiUXUxmMS0TBk-pmT1mYy3GRWAnAvmBr6p8' name='html-context'>
<meta content='website' property='og:type'>
<meta content='https://giottojs.org/d3-canvas-transition' property='og:url'>
<meta content='GiottoJs' property='og:title'>
<meta content='GiottoJS is a javascript visualization library built on top of d3js. It is designed to visualize both SVG and Canvas elements with a simple API. AngularJS integration' property='og:description'>
<meta content='en_GB' property='og:locale'>
<meta content='GiottoJs' property='og:site_name'>
<meta content='https://giottojs.org/giotto-banner.png' property='og:image'>
<meta content='summary' name='twitter:card'>
<meta content='@giottojs_org' name='twitter:site'>
<meta content='GiottoJs' name='twitter:title'>
<meta content='GiottoJS is a javascript visualization library built on top of d3js. It is designed to visualize both SVG and Canvas elements with a simple API. AngularJS integration' name='twitter:description'>
<meta content='https://giottojs.org/giotto-banner.png' name='twitter:image'>
<link href='https://giottojs.org/d3-canvas-transition' rel='canonical'>
<link href='/giottojs-default.css' rel='stylesheet' type='text/css'>
<link href='/icons/apple-icon-57x57.png' rel='apple-touch-icon' sizes='57x57'>
<link href='/icons/apple-icon-60x60.png' rel='apple-touch-icon' sizes='60x60'>
<link href='/icons/apple-icon-72x72.png' rel='apple-touch-icon' sizes='72x72'>
<link href='/icons/apple-icon-76x76.png' rel='apple-touch-icon' sizes='76x76'>
<link href='/icons/apple-icon-114x114.png' rel='apple-touch-icon' sizes='114x114'>
<link href='/icons/apple-icon-120x120.png' rel='apple-touch-icon' sizes='120x120'>
<link href='/icons/apple-icon-144x144.png' rel='apple-touch-icon' sizes='144x144'>
<link href='/icons/apple-icon-152x152.png' rel='apple-touch-icon' sizes='152x152'>
<link href='/icons/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'>
<link href='/icons/favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'>
<link href='/icons/favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'>
<link href='/icons/favicon-96x96.png' rel='icon' sizes='96x96' type='image/png'>
<link href='/icons/android-icon-192x192.png' rel='icon' sizes='192x192' type='image/png'>
<link href='/icons/manifest.json' rel='manifest'>
<script src='/require.js' type='application/javascript'></script>
<script src='/giotto-dev.js' type='application/javascript'></script>
<script src='/giottojs.min.js' type='application/javascript'></script>
</head>
<body>
<div id="page">
<navbar d3-model="mainNavbar" brand-height="60"></navbar>
<div id="page-main" class="pt100">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h2></h2>
</div>
<div d3-highlight>
<h1 id="d3-canvas-transition">d3-canvas-transition</h1>
<p><a href="https://circleci.com/gh/quantmind/d3-canvas-transition"><img alt="CircleCI" src="https://circleci.com/gh/quantmind/d3-canvas-transition.svg?style=svg" /></a>
<a href="https://david-dm.org/quantmind/d3-canvas-transition"><img alt="Dependency Status" src="https://david-dm.org/quantmind/d3-canvas-transition.svg" /></a>
<a href="https://david-dm.org/quantmind/d3-canvas-transition#info=devDependencies"><img alt="devDependency Status" src="https://david-dm.org/quantmind/d3-canvas-transition/dev-status.svg" /></a></p>
<p><strong>PRE ALPHA - DONT USE IT</strong></p>
<p>This is a <a href="https://bost.ocks.org/mike/d3-plugin/">d3 plugin</a> for drawing on
svg and canvas using the same <a href="https://github.com/d3/d3-transition">d3-transition</a> API.</p>
<h2 id="installing">Installing</h2>
<p>If you use <a href="https://www.npmjs.com/package/d3-canvas-transition">NPM</a>, <code>npm install d3-canvas-transition</code>.
Otherwise, download the latest release.
AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported.
Try <a href="https://runkit.com/npm/d3-canvas-transition">d3-canvas-transition</a> in your browser.</p>
<pre><code class="javascript"><script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src="https://d3js.org/d3-ease.v1.min.js"></script>
<script src="https://d3js.org/d3-selection.v1.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-transition.v1.min.js"></script>
<script src="https://giottojs.org/latest/d3-canvas-transition.min.js"></script>
</code></pre>
</div>
</div>
</div>
</div>
</div>
<div class="hidden-print">
<div id="footer">
<div class="container">
<div class="row">
<div class="col-sm-12 small">
<p>Library released under the <a href="http://opensource.org/licenses/BSD-3-Clause">BSD License</a>.</p>
<p>Copyright <year></year> <a href="http://lucasbardella.com">Luca Sbardella</a> and <a href="http://quantmind.com">Quantmind</a></p>
</div>
</div>
</div>
</div>
</div>
</div><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54439804-4', 'auto');
ga('send', 'pageview');
</script></body>
</html>