summaryrefslogtreecommitdiff
path: root/priv/static/metrics-graphics-3.0-alpha3/examples/interactive-demo.htm
diff options
context:
space:
mode:
authorhref <href@random.sh>2021-09-01 10:30:18 +0200
committerhref <href@random.sh>2021-09-01 10:30:18 +0200
commit75687711f35355bc30e4829439384aab28fcac6d (patch)
tree8f3256f472893c39720a684d390e890a152f7303 /priv/static/metrics-graphics-3.0-alpha3/examples/interactive-demo.htm
parentlink: post_* callbacks; html & pdftitle. (diff)
Commit all the changes that hasn't been committed + updates.
Diffstat (limited to 'priv/static/metrics-graphics-3.0-alpha3/examples/interactive-demo.htm')
-rw-r--r--priv/static/metrics-graphics-3.0-alpha3/examples/interactive-demo.htm236
1 files changed, 236 insertions, 0 deletions
diff --git a/priv/static/metrics-graphics-3.0-alpha3/examples/interactive-demo.htm b/priv/static/metrics-graphics-3.0-alpha3/examples/interactive-demo.htm
new file mode 100644
index 0000000..f87f060
--- /dev/null
+++ b/priv/static/metrics-graphics-3.0-alpha3/examples/interactive-demo.htm
@@ -0,0 +1,236 @@
+<html lang='en'>
+<head>
+ <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
+
+ <title>MetricsGraphics.js - a library based on D3.js, optimized for visualizing and laying out time-series data</title>
+
+ <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
+ <link href='https://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic' rel='stylesheet' type='text/css'>
+ <link href='https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css' rel='stylesheet' type='text/css'>
+ <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
+
+ <link href='metricsgraphics.css' rel='stylesheet' type='text/css'>
+ <link href='css/metricsgraphics-demo.css' rel='stylesheet' type='text/css'>
+
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
+ <script src="https://d3js.org/d3.v4.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js" charset="utf-8"></script>
+
+ <!-- dev start -->
+ <script src='js/MG.js'></script>
+ <script src='js/misc/utility.js'></script>
+ <script src='js/common/data_graphic.js'></script>
+ <script src='js/common/hooks.js'></script>
+ <script src='js/common/register.js'></script>
+ <script src='js/common/bootstrap_tooltip_popover.js'></script>
+ <script src='js/common/chart_title.js'></script>
+ <script src='js/common/scales.js'></script>
+ <script src='js/common/y_axis.js'></script>
+ <script src='js/common/x_axis.js'></script>
+ <script src='js/common/init.js'></script>
+ <script src='js/common/markers.js'></script>
+ <script src='js/common/rollover.js'></script>
+ <script src='js/common/zoom.js'></script>
+ <script src='js/common/brush.js'></script>
+ <script src='js/common/window_listeners.js'></script>
+ <script src='js/layout/bootstrap_dropdown.js'></script>
+ <script src='js/layout/button.js'></script>
+ <script src='js/charts/line.js'></script>
+ <script src='js/charts/histogram.js'></script>
+ <script src='js/charts/point.js'></script>
+ <script src='js/charts/bar.js'></script>
+ <script src='js/charts/table.js'></script>
+ <script src='js/charts/missing.js'></script>
+ <script src='js/misc/process.js'></script>
+ <script src='js/misc/smoothers.js'></script>
+ <script src='js/misc/formatters.js'></script>
+ <script src='js/misc/transitions.js'></script>
+ <script src='js/misc/error.js'></script>
+ <!-- dev end -->
+
+ <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-51487512-1', 'metricsgraphicsjs.org');
+ ga('send', 'pageview');
+ </script>
+</head>
+
+<body>
+ <div class='container'>
+ <div class='head'>
+ <ul>
+ <li><a href='./'>Home</a></li>
+ <li><a href='https://github.com/metricsgraphics/metrics-graphics/releases'>Download</a></li>
+ <li><a href='https://github.com/metricsgraphics/metrics-graphics'>Code</a></li>
+ <li><a href='https://github.com/metricsgraphics/metrics-graphics/issues'>Issues</a></li>
+ <li><a href='examples.htm'>Examples</a></li>
+ </ul>
+
+ <img src='images/logo.svg' id='logo' class='svg' />
+ </div>
+
+ <div id='description'>
+ <p><i>MetricsGraphics.js</i> is a library built on top of
+ <a href='http://d3js.org/'>D3</a> that is optimized for visualizing and
+ laying out time-series data. It provides a simple way to produce common
+ types of graphics in a principled, consistent and responsive way. The
+ library currently supports line charts, scatterplots and histograms as
+ well as features like rug plots and basic linear regression.</p>
+
+ <p>This demo allows you to play around with the library without having to
+ download it. Try doubling the number of sightings in, say, 1995 and see
+ how that affects the graphic. Or how about changing any of the options in
+ <i>MG.data_graphic</i>? Or perhaps change the chart type to a scatterplot by
+ setting <code>chart_type:'point'</code>, switching the <i>x</i> and <i>y</i>
+ accessors and increasing the <i>height</i>? The data object is set to the
+ contents of the <i>Data</i> text area. Errors are logged to the console.</p>
+ </div>
+ </div>
+
+ <div class='container'>
+ <div class='row main-windows-titles'>
+ <div class='col-xs-2'>Data</div>
+ <div class='js-title col-xs-5'>
+ JavaScript <a href='https://github.com/metricsgraphics/metrics-graphics/wiki/List-of-Options#list-of-options' target='_blank'>See Full List of Options</a>
+ <button type='button' class='update btn'>Run</button>
+ </div>
+ </div>
+ <div class='row main-windows'>
+ <div class='data col-xs-2'>
+ <textarea></textarea>
+ </div>
+ <div class='js col-xs-5' id='editor'></div>
+ <div class='result text-center col-xs-5'></div>
+ </div>
+ </div>
+
+ <div class='container footer'>
+ Created by <a href='https://twitter.com/alialmossawi'>Ali Almossawi</a>,
+ <a href='https://github.com/hamilton'>Hamilton Ulmer</a> &mdash; Metrics at
+ <a href='https://www.mozilla.org/en-US/'>Mozilla</a>
+ <br />Shared under the <a href='http://www.mozilla.org/MPL/2.0/'>
+ Mozilla Public License</a>.
+ </div>
+
+ <style>
+ body {
+ background-color: #fcfcfc;
+ }
+
+ .container {
+ width: 90%;
+ min-width: 960px;
+ }
+
+ .data textarea {
+ font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+ font-size: 11px;
+ height: 100%;
+ width: 100%;
+ }
+
+ .footer {
+ background-image: url(images/divider.png);
+ background-repeat: no-repeat;
+ background-position: center 115px;
+ padding-top: 70px;
+ margin-bottom: 20px;
+ }
+
+ .hightop {
+ margin-top: 40px;
+ }
+
+ #logo {
+ margin: 15px 0 10px 0;
+ }
+
+ .main-windows-titles {
+ color: #3b3b3b;
+ font-size: 16px;
+ padding-bottom: 5px;
+ text-align: center;
+ }
+
+ .main-windows-titles .js-title a {
+ position: absolute;
+ right: 0;
+ font-size: 70%;
+ margin: 7px 1px 0 0;
+ }
+
+ .main-windows .data,
+ .main-windows .js,
+ .main-windows .result {
+ height: 400px;
+ }
+
+ p {
+ padding-top: 6px;
+ }
+
+ textarea,
+ #editor {
+ border-radius: 3px;
+ border: none;
+ overflow: auto;
+ outline: none;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ box-shadow: none;
+ padding: 10px;
+ border: 1px solid #ccc;
+ }
+
+ .btn.update {
+ background-color: steelblue;
+ color: white;
+ margin-top: 34px;
+ outline: none;
+ position: absolute;
+ right: 7px;
+ z-index: 99;
+ }
+
+ .btn.update:hover,
+ .btn.update:active,
+ .btn.update:visited {
+ color: #efefef;
+ outline: none;
+ }
+ </style>
+ <script>
+ var default_call = '//modify away!\n'
+ + 'MG.data_graphic({\n'
+ + ' title: "UFO Sightings",\n'
+ + ' description: "Yearly UFO sightings from 1945 to 2010.",\n'
+ + ' data: JSON.parse(document.querySelector(\'.data textarea\').value),\n'
+ + ' markers: [{\'year\': 1964, \'label\': \'"The Creeping Terror" released\'}],\n'
+ + ' width: 400,\n'
+ + ' height: 250,\n'
+ + ' target: ".result",\n'
+ + ' x_accessor: "year",\n'
+ + ' y_accessor: "sightings",\n'
+ + '});';
+
+ var editor = ace.edit("editor");
+ editor.getSession().setMode("ace/mode/javascript");
+ editor.setValue(default_call);
+ editor.gotoLine(1);
+ editor.setHighlightActiveLine(false);
+
+ d3.json('data/ufo-sightings.json', function(data) {
+ document.querySelector('.data textarea').value = JSON.stringify(data, null, 2);
+ eval(editor.getValue());
+ })
+
+ d3.select('.update').on('click', function() {
+ eval(editor.getValue());
+ })
+ </script>
+</body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2025-09-01 01:07:34 +0000