# index 2018-02-07 new

todo

## problems to solve

1. 2018-06-18 go thru and understand all my code and dir

### scalable canvas size problem

canvas size problem

### auto plot range problem

auto plot range. (find max/min and/or find point cluster). Simply using the max and min points in the data points in the plane is not a solution. Because , for some plots, you have a few points near infinity, while most of your points are say clustered around say origin. So in this case, you actually want the plot range to be around the dense data points. So, it seems, need algorithm that eliminate outliners by some statistical analysis.

adoptive sampling. Else, you get kinks at sharp turns.

### asymptote problem

• asymptotes. e.g. in hyperbola with vertical axis, where the asymptote is a diagnal line, and the parametric curve goes to infinity in one direction and comes back from the other direction of infinity.

asymptote 40539

1 over x

### axes labeling problem

issue: axes labeling. For textbook examples, it's simple. say, plot y=x^2, from x 1 to 10 and y 1 to 10. You can have code that create labels for them automatically, and nice.

but, in general, in real world, you don't know how wide (the x range going to be), it can be 0 to 1, or -100 to billions.
• you need to decide how many ticks to give label. Something not too many, like 10, regardless of range.
• you need to make sure the label are truncated. e.g. you don't want 0.000017279 0.05202404037 etc so that they overlap and becomes unreadable. you need code that smartly truncate number and convert to string.

d3 axis

### font size problem

font size seems very hard to control. especially in axes tick label.

SVG: Font Size

JavaScript DOM SVG font-size sucks

### flip coordinate problem

svg y coordinates goes top to bottom. So, needs a flip.

you can solve the problem in few days.

one is to use svg attribute named “transform”. Attach it to the whole canvas:

```/* [ attach a transform to gg ] */
const f_flip_up_down_transform = ((gg, ymin, ymax ) => { gg.setAttribute("transform", `translate(0 \${ymin + ymax} ) scale(1 -1)` )});
```

another solution is to do it on each and every point's coordinate in the canvas. e.g. use this function:

```const f_flip_up_down_y = ((y, ymin, ymax) =>
/* [ returns a new coordinate y.
svg coordinates goes top to bottom. Convention graph coordinate goes bottom to top.
So, needs a flip.
This function , the y is the y coordinate and ymin, ymax are assumed to be traditional coordinate orientation.
It returns a new y, that is the svg coordinate for it.

For example, u have a up-pointing triangle in 1st quadrant, the coordinates are
(1,1), (3,1), (2,2).
you want to plot this in svg. You need translate the coord into svg coord (so that the triangle still points up). Your ymin is 1, ymax is 2.
Result is:
(1,2), (3,2), (2,1).

the y coord is computed by
f_flip_up_down_y(1, 1,2) → 2,
f_flip_up_down_y(2, 1,2) → 1

2018-02-15
] */
( ymin + ymax -y)
);
```

which is better?

### JavaScript svg graphics intermediate geometry language problem

in svg, it's xml. It's hard to control graphics primitives such as circle, rectangle, line, etc, in svg in browser. because, you have data such as JavaScript array or json going directly to svg xml elements, and you have to convert from js array to create xml element and insert to page, and when you want to say delete a circle, you have to “select”, then remove child or such. you cannot just delete the array element in your data, such as in json. (well, there are libs that do data binding.)

so, it seems, might be nice to create a intermediate language to represent all the graphics primitives, like Mathematica. e.g. circle would be like

```{
type: "circle",
center:[3,5],
}```

and similar for rectangle, line, etc. these would be the graphics primitives.

then, js code create or manipulate these, from the given data or say parametric formula. It's easy to do.

then, render them by create/convert them to svg elements and insert to the page.

however, the disadvantage seems to be the 2 step process. could be slower. also, need to think about how one'd attach event handlers to the graphic primitives, e.g. for interactive manipulate the thing, such as user dragging a point and have the a circle change center or radius. but one can still do this by , the normal way, of attaching event handlers to the generated svg elements. Alternatively, invent some syntax so that event handler can be attached to the intermediate language itself. But this will probably become complex and quite involved in design.

the alternative, what d3 seems to be doing, is to forego the intemediate language, and work directly with html xml svg.

the problem with this is, the code becomes much not intuitive. because html dom is rather very hard to work with. Also, this way is not natural. because now your lib is stuck in dom speak dom world dom way. the dom way, is not universal. Outside of webpages, it's very stupid. But if you have a intermediate language, that's rather universal, as in computational geometry.

find out how d3 does them

### element anchor problem

2018-06-18 one problem is, to add anything in a web page, typically you have to have something like a element with id e.g. `id="t55402"` as anchor, so new things such as svg graphics can be added them.

e.g. google adsense uses `<ins class="adsbygoogle" …></ins>`

e.g. disqus uses `<div id="disqus_thread"></div>`

but i find this annoying or inelegant. How does typical web app does it?

find how how d3js example pages do them.

## Find Element Width height

JS: Find Element Width