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/
Related
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
I currently have this set up: http://sandbox.brightboxstudios.com/orgmap/
They are draggable and I am trying to find a way to have lines connect them, even when they are dragged. Having an easy way to show how each is related and which should be connected is ideal!
Thanks!!!
You should consider using the D3.js library. In particular this example is what I think you are looking for: http://mbostock.github.com/d3/ex/force.html
Take a look at this: jQuery - use canvas to draw lines between divs
I'd start with that code, and just re-draw the lines every time the divs change location.
You may try KineticJS too. I think that it will provide what you want easily. http://www.kineticjs.com/
Here you can find lots of tutorials: http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/
You can also try jsPlumb, a JavaScript library that can connects divs together. It's really simple to use and there are plenty of demos on that page.
I am planning on making an analytics dashboard and would like to implement circular charts like the image attached to this question:
and I would like to do it using jQuery. Do you guys have any usefull links to resources or to other SO questions? Would be awesome!
Thanks!
You can also take a look at :
http://bernii.github.com/gauge.js/
http://www.justgage.com/
Both of them look really good and seems pretty easy to use.
The easiest way would probably be to create an SVG that mimics the appearance you want, and then use JavaScript/jQuery to modify the source of the SVG. The design you're requesting could probably be acheived by simply placing two arcs on top of one another.
Deriving from this excellent answer on calculating arcs, creating two overlapping ones could look something like this, which also demonstrates updating the arc dynamically.
lethargicpanda's suggestions are cool. Check out jQuery Knob too. It also allows user input.
Does JavaScript have geometric primitives like point and rectangle, or do I need to define my own?
Alternatively a good, simple library for it would be a great help, if there is one.
Javascript doesn't really. There are a bunch of graphics libraries available. You might look at processing.js and raphael.
There is a way to draw geometric images using only HTML,CSS.Even not javascript.I know a tool which can help you to create whatever geometric image you want,and it'll give you the source HTML and CSS code.It's very cool tool.Here is the link
http://www.w3docs.com/tools/html-geometric-images/
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.