Skip to content

Instantly share code, notes, and snippets.

@pkerpedjiev

pkerpedjiev/custom-svg-annotations-example.html

Created October 30, 2018 15:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pkerpedjiev/cf8a1b9c92271dc0d46972e7ef9918b5 to your computer and use it in GitHub Desktop.
Save pkerpedjiev/cf8a1b9c92271dc0d46972e7ef9918b5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment