<jr-graph>

width sets width of graph in px.
height sets height of graph in px.
grid displays grid.
graph.point has x and y properties that are updated when point is dragged. Value ranges between -1,1

<jr-graph
	width="300"
	height="300"
	grid
></jr-graph>

let graph = document.querySelector('jr-graph');
graph.addEventListener('update', function () {
	document.querySelector('#code-example').style.opacity =  1-graph.point.x;
	document.querySelector('body').style.filter =  "invert("+graph.point.y+")";
});