Creating charts using d3.js and canvas together - javascript

I have been using D3.js library to create some basic graphs. I'm trying to create a bar graph with HTML5 canvas but finding it hard to create.I found some resources and this chart but I'm unable to understand how it's done.Can you guys suggest some resources/tutorials/books/blogs of D3.js with canvas so I can have a better idea how it's done.
Thanks!

My first thoughts reading this are that there may be a bit of a mismatch. There's no reason you shouldn't be able to use D3.js and canvas together, but I think you'll find it much easier working with SVG instead of canvas with D3, plus you get all sorts of benefits in terms of animation, CSS manipulation, and accessiblity.
If you do want to stick to canvas then use Chart.js instead of D3, it's designed to work with canvas and presents a much more gentle learning curve, being a more out-of-the-box solution.

Related

Javascript Geometry Draw

I have to draw geometry shapes like the sample image attached here.
I check the three.js, pepper.js but, I am confused that which one is the best library for this type of work. Please help me to decide the library.
Most processing libraries will do the job. Have a look at p5.js, it is fairly simple to get started with.
https://p5js.org/
I use the GD library to complete these complex diagrams. Drawio helps me a lot to create the diagrams and get the coordinates of X and Y axis.

Creating a force directed graph in Babylon.js

I am attempting to create a force directed graph in my Babylon.js project and was wondering if anyone had suggestions as to how I should go about that. I am looking into the barycentric method and the Barnes-Hut method but am wondering if there are any simpler ways of doing so (such as how it is done in d3.js by typing d3.layout.force) or if I should continue on with one of those methods above. I need to add the nodes on top of a plane within a 3D area but the y values of the nodes will remain constant so it is more of a 2D problem.
I also looked into Springy (http://getspringy.com/) but I am not sure if it would be possible to implement that into Babylon.js due to the 3D nature of Babylon.
If anybody has a suggestion to solve this problem I would greatly appreciate it.
Thank you.
I would break this problem into multiple pieces.
Wrangle the data using an off-the-shelf algorithm into coordinates, then feed the coordinates into Babylon.
A really cheesy way to do it would be to let d3-force do its magic in a hidden SVG, then feed the graph data into Babylon.
Yes, it's a hack, but it would seem to be fast and easy!

Framework for html5/canvas game based on hexagonal grid

I am developing html5 game based on hexagonal grid.
After some investigation I have used :
MelonJS + Tiled + this tricky thing. Everything seems good in this combination, until I started to think about dynamic showing some hexagons, that my player will be able to go.
There are few ideas that comes to mind:
Calculate coordinates and draw on canvas skipping melonjs, but it's bad idea from architecture point.
Adding custom property for each hexagon texture object, but it's too much manual work.
Adding some facade for melonjs in order to work with it or maybe it's already done?
So my question is:
What's the best way to solve this problem in scope of those technologies or maybe should I use another tool?
Depending on how much content you have already developed, did you consider to use a Tiled daily build with support for hexagonal maps?
Of course, since melonJS doesn't support this yet you would either need to implement the hexagonal renderer yourself or try to get the support from melonJS developers to add it. I've opened an issue about this.
I may have misunderstood your question a little, though. If you are talking about an overlay on top of the map that shows the player where he can walk to from his current position, then the way to go would be to draw this yourself after melonJS has rendered the map. I can't help you with exactly how to do this because I don't have that much experience with melonJS.

What's the difference between Raphael and gRaphael?

I'm sure I'm just being dim, but what's the difference between Raphael and gRaphael?
I can't tell from reading their homepages (the gRaphael homepage just says "based on Raphaël graphics library"), and Google isn't helping either.
Raphaël is a vector-graphics library, used to manipulate vector-graphics markup (SVG/VML) rendered in a an HTML page. Using this you can create and add SVG/VML elements to the DOM and further manipulate elements inside it.
gRaphaël is an extension to Raphaël adding graphs to Raphaël's concept of Paper. Think *Graph*aël. So gRaphaël works only if Raphaël is loaded, and uses it in drawing the actual graphs. gRaphaël can be used for creating charts in SVG and currently supports chart types like line, bar, pie, and dot.
If you don't want to make any of these chart types you should just use Raphaël directly to draw whatever it is you are designing. In some cases, like defining colors, stroke attributes and putting some overlayed items on your chart such as title text, you will need to learn a little of Raphaël's api to use gRaphaël effectively. You'll find documentation for the former better written and poured over by more people than that of the latter. They are both by the same author however, likely gRaphaël was a demonstration of the base library, which it seems was aimed at simplifying programatic use of SVG.
If you're only interested in drawing SVG charts and graphs, you might also be interested in Google's Chart Tools.
gRaphaël is a chart creating library that uses general drawing library Raphaël.
Graphael is only for graphs, Raphael is more general.

Javascript library or framework for drawing charts on client side

I'm looking for an library, to generate charts on client side.
I found a lot, by searching on web and stackoverflow, like here
https://stackoverflow.com/questions/2227421/good-javascript-library-for-drawing-charts-using-json
or this very good collection:
http://sixrevisions.com/javascript/20-fresh-javascript-data-visualization-libraries/
There are so much alternatives, I'm a bit overwhelmed. Which one can use JSON data, which one is up to date, which one is easy to use (because I'm absolutely new on this topic), which one is robust, works on mobile phone (or not), which project is still alive, etc.
I need different chards, an line chart is mandatory. Also zoom in and zoom out is mandatory.
So I took a closer look on jqplot an flot.
Both providing zoom, but it looks like zooming is more an scaling. Which means: the granularity will not change by zoom in.
Because the graph will have a lot of data/points, i need to consolidate informations before sending them to the client. By zooming in, I need to rise the granularity, so the chart should be able to process new data for the zoomed area. (I hope I've made ​​myself clear.)
Thanks for any kind of attention.
Raphael.js http://raphaeljs.com/
HTML5 Graph http://chrisvalleskey.com/html5-graph/
Google Visualization API: http://code.google.com/apis/chart/interactive/docs/gallery.html
Flot: http://code.google.com/p/flot/
Unfortunately there is no helpful answer, so I like to write down, what i learned the last days for this question.
jqPlot and frot are supporting zooming at an basic level. That means, it's more an scaling.
By looking at the google groups for qjPlot and flot, the support for jqPlot is better (lot's of unanswered questions at the flot group).
jqPlot has an better axis-label-handling by zooming.
jqPlot also provides hooks. By using those hooks, it's seems to be possible to combine zooming and loading new JSON data in order to get an better granularity of the zoomed view.

Categories

Resources