We Keep Coding

Draw vector graphic

I created a simple graphic with LibreOffice:
The lines are not symmetric.
I am very lazy and a bit autistic. Moving the lines with the mouse does not feel correct for me. I is very unlikely that I will find the matching position for all six lines of this picture.
I would like to code it.
AFAIK there are several ways. You could use dot or JavaScript.
A pure JS solution would be enough, I don't need to create a SVG/PNG/JPG.
How could this be done with dot or JS?

Even in LibreOffice you can use grid. Please see this answer

You could use this library to paint the boxes: http://paperjs.org/

How to generate polygon dimensions with the least effort?

I found this page https://www.bridgersteel.com/metal-colors/roof-visualizer where there is an interactive way to change the color of a demo house and see how it looks like.
As far as I know, they used a pretty straightforward and simple way of doing this.
However, what I don't understand is how did they produced the exact super-precise polygon points. Is there a non-manual way of doing this?
Otherwise, even basic, this job requires ton of days to be made...
Do you have any hints?

I'm going to guess they used vector graphics software, like Adobe Illustrator, to create the svg. Depending on the software, you can even see the code it generates. You can also convert an svg image to code using javascript on the website itself.

I visited the page and came up with the following in the link below.
https://drive.google.com/open?id=1PQimeXKGyCJd1lNZHHHuOkOhLc3oq97v

How can I do complex animations within JavaScript?

so I'm wanting to have various sized triangle particles fly in from a random direction (all over the screen) and then assembles to spell the word "Zoid". I have been looking and three.js looks to be the API that I should use for this kinda stuff.
What three.js example should I be looking at?
I am not looking for someone to make this for me, I am only wanting the name of the technique/animation.

http://anime-js.com/ take a look at this seems like a pretty good framework for animated javascript

Best way to go about making "simple" line graphs with a very light footprint? jquery? canvas?

I'm trying to create line graphs like the one in the image below.
It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.
I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.
I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?
All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.
Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.
Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.

SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.

Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
You can also Interact with the charts you create:
https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity
https://google-developers.appspot.com/chart/interactive/docs/events

I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.

If you are not planning any manipulation on the graphs. Use a PHP library called pChart

Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.

box2d-js element with external image

So far in the samples of varies box2d js implementation I can find only element defined in shapes (ball/box/etc), is there a way to create an element defined by an image, e.g. a boulder?

You can use the b2PolyDef and b2PolyShape objects to create polygons.
This documentation is meant for AS3 but it is relatively simple to figure out the JavaScript equivalent.
If you wanted to automate the mapping from an image's bounding box to the polygon, you could use canvas and getImageData() to seek through the pixels looking for non transparent (assuming your image has a transparent background). This is probably more effort than it is worth though.
Also see Understanding custom polygons in Box2D.

I was trying to solve a same kind of problem when i came across this brilliant answer. Hope this will help you.