pkerpedjiev/custom-svg-annotations-example.html

## custom-svg-annotations-example.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HiGlass</title>
<style type="text/css">
    .canvasjs-chart-credit {
    display:none;

    .wp-caption: {

    };
}
</style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles/page.css">
    <link rel="stylesheet" href="hglib.css">

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>

    <script src="https://unpkg.com/higlass-time-interval-track@0.1.6/dist/higlass-time-interval-track.js"></script>
    <script src="https://unpkg.com/higlass-multivec@0.2.0-alpha.6/dist/higlass-multivec.js"></script>
    <script src="https://unpkg.com/higlass-labelled-points-track@0.1.6/dist/higlass-labelled-points-track"></script>
    <script src="https://unpkg.com/higlass-arcs@0.1.3/dist/higlass-arcs.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<body >
<div class="wp-caption alignleft">
  <div id="development-demo" style="width: 1000px; height: 1000px"></div>

</div>
</body>
<script src='hglib.js'>
</script>
<script>

 var testViewConfig = {
    views: [
      {
        uid: 'a',
        tracks: {
          top: [
            {
              type: 'top-axis',
            }
          ],
          center: [
          {
              uid: 'x',
              type: 'simple-svg',
          }],
          left: [
            {
              type: 'left-axis',
            }
          ]
        },
      },
    ]
  };


  const api = hglib.viewer(
      document.getElementById('development-demo'),
      testViewConfig,
      {
        bounded: true,
      }
  );


const svgTrack = api.getTrackObject('x');
const gMain = svgTrack.gMain;


const points = gMain.selectAll('.points')
.data([1,2,3])
.enter()
.append('rect')
.classed('points', true)
.attr('x', d => d * 30)
.attr('y', d => d * 30)
.attr('width', 10)
.attr('height', 10)
.style('fill', 'black');

// console.log('points:', points);

api.on('location', (location) => {
  console.log('location:', location);
    gMain.selectAll('.points')
    .attr('x', d => svgTrack._xScale(d * 30))
    .attr('y', d => svgTrack._yScale(d * 30));
});

</script>
<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','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-77756807-1', 'auto');
    ga('send', 'pageview');

</script>
</html>

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>HiGlass</title>
	<style type="text/css">
	.canvasjs-chart-credit {
	display:none;

	.wp-caption: {

	};
	}
	</style>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="styles/page.css">
	<link rel="stylesheet" href="hglib.css">

	<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.1/pixi.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.32.1/react-bootstrap.min.js"></script>

	<script src="https://unpkg.com/higlass-time-interval-track@0.1.6/dist/higlass-time-interval-track.js"></script>
	<script src="https://unpkg.com/higlass-multivec@0.2.0-alpha.6/dist/higlass-multivec.js"></script>
	<script src="https://unpkg.com/higlass-labelled-points-track@0.1.6/dist/higlass-labelled-points-track"></script>
	<script src="https://unpkg.com/higlass-arcs@0.1.3/dist/higlass-arcs.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
	</head>
	<body >
	<div class="wp-caption alignleft">
	<div id="development-demo" style="width: 1000px; height: 1000px"></div>

	</div>
	</body>
	<script src='hglib.js'>
	</script>
	<script>

	var testViewConfig = {
	views: [
	{
	uid: 'a',
	tracks: {
	top: [
	{
	type: 'top-axis',
	}
	],
	center: [
	{
	uid: 'x',
	type: 'simple-svg',
	}],
	left: [
	{
	type: 'left-axis',
	}
	]
	},
	},
	]
	};


	const api = hglib.viewer(
	document.getElementById('development-demo'),
	testViewConfig,
	{
	bounded: true,
	}
	);


	const svgTrack = api.getTrackObject('x');
	const gMain = svgTrack.gMain;


	const points = gMain.selectAll('.points')
	.data([1,2,3])
	.enter()
	.append('rect')
	.classed('points', true)
	.attr('x', d => d * 30)
	.attr('y', d => d * 30)
	.attr('width', 10)
	.attr('height', 10)
	.style('fill', 'black');

	// console.log('points:', points);

	api.on('location', (location) => {
	console.log('location:', location);
	gMain.selectAll('.points')
	.attr('x', d => svgTrack._xScale(d * 30))
	.attr('y', d => svgTrack._yScale(d * 30));
	});

	</script>
	<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','https://www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-77756807-1', 'auto');
	ga('send', 'pageview');

	</script>
	</html>