Skip to content

Instantly share code, notes, and snippets.

@openjck

openjck/metrics-graphics-#783.html

Last active December 22, 2017 00:05
Show Gist options
  • Save openjck/0d4b779240975c1b1bd1f53d52b0a0ce to your computer and use it in GitHub Desktop.
Save openjck/0d4b779240975c1b1bd1f53d52b0a0ce to your computer and use it in GitHub Desktop.
Download ZIP
HTML document demonstrating the issue described in metricsgraphics/metrics-graphics#783
Raw
metrics-graphics-#783.html
<!doctype html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Example</title>
<link href="https://rawgit.com/mozilla/metrics-graphics/b363d82c229fba6a280c9782b8154aad0ac901e7/dist/metricsgraphics.css" rel="stylesheet" />
</head>
<body>
<div id="target"></div>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://rawgit.com/mozilla/metrics-graphics/b363d82c229fba6a280c9782b8154aad0ac901e7/dist/metricsgraphics.js"></script>
<script>
const exampleData = [
[
{ x: 1, y: 1000 },
{ x: 2, y: 2000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 3000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 4000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 5000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 6000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 7000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 8000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 9000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 10000 },
],
[
{ x: 1, y: 1000 },
{ x: 2, y: 11000 },
],
];
MG.data_graphic({
target: '#target',
data: exampleData,
x_accessor: 'x',
y_accessor: 'y',
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment