Visualization Notes: 08/03/21

Tuesday, August 3, 2021

Encoding URI Components

xxxxxxxxxx
 
%%html
<style>
@import 'https://fonts.googleapis.com/css?family=Ewert|Roboto';
</style>
<button type='button' 
        style='background-color:silver; color:#3636ff; 
        font-family:Ewert; font-size:150%;' 
onclick="myfun('\\frac{x^2}{p^2}+\\frac{y^2}{q^2}=1')">
Click to encode URI components
</button>
<p id='demo' 
style='color:#3636ff; font-family:Roboto; font-size:14px;'>
</p>
<img width='200px' 
src='https://render.githubusercontent.com/render/math?math=\\
%5Cfrac%7Bx%5E2%7D%7Bp%5E2%7D%2B%5Cfrac%7By%5E2%7D%7Bq%5E2%7D%3D1'>
</img>
<script>
function myfun(s){
    doc=document.getElementById('demo');
    doc.innerHTML=encodeURIComponent(s);};

Mouse Drawing and Events

<script src='https://d3js.org/d3.v5.min.js'></script> was added in the page head.

xxxxxxxxxx
 
%%html
<style>
rect {fill:none; pointer-events:all;} 
circle {fill:none; stroke-width:2px;}</style>
<svg id='mouse_events' 
style='background-color:silver; width:600px; height:300px'>
</svg><script>
var width=600, height=300, i=0;
var svg=d3.select('#mouse_events');
var r=svg.append('rect')
         .attr('width',width).attr('height',height)
         .on('ontouchstart' in document ? 
             'touchmove':'mousemove',draw);
function draw() {
  var m=d3.mouse(this);
  svg.insert('circle','rect')
     .attr('cx',m[0]).attr('cy',m[1]).attr('r',1e-6)
     .style('stroke',d3.hsl((i=(i+1)%360),1,.5))
     .style('stroke-opacity',1)
     .transition().duration(2000)
     .ease(Math.sqrt).attr('r',10)
     .style('stroke-opacity',1e-6)
     .remove();
  d3.event.preventDefault();};