Create a 3D Bar Chart in AS3 and HTML5 - javascript

I have to create a 3D Bar chart in Flash(AS3) and HTML5 which takes up input from a source and generates the graph, and they both should look alike, so what options do i have?? i mean are there any open libraries which will assist me to do it? (it should be Open Source)
Any help would be appreciated..
Thanks

I would imagine you would maybe want to start with something like Haxe to have a common framework that compiles to multiple languages. I'm not aware of any charting libraries that use Haxe (or are built using Haxe rather), or that are written to have a parallel between AS3 and HTML/JS. Instead of having to use something like Haxe or writing multiple versions in different languages and having to keep them up to date you could have a server side java handle generating the chart (returning bitmap data), the only issue with this is if you want interaction on the chart which puts you sort of in the same boat again.
Another option is to roll your own I did something like a "3d" bar chart while out camping one weekend (took two full charges of my laptop battery, but got it done without the internet).
http://www.shaunhusain.com/charts/
http://www.shaunhusain.com/charts/srcview/
I actually put it in that charts folder with the intention of circling back around to clean this up and do Pie/Line ones with similar 3d effect (not actually using any 3d).
There's some decent tutorials on writing your own charts, so long as they don't get too crazy with the design you could probably DIY. Plus whichever language you're weaker with you can just port to every time, so you start strong then learn how to convert.
EDIT
The ads are getting smarter than the people (this was on the right of this page when I loaded it): http://www.fusioncharts.com/products/suite/?utm_source=stackoverflow&utm_medium=banner&utm_content=1_billion_banner_karate_220x250_px_white_fo&utm_campaign=FC_v3_2_Mktg

Related

Large dataset on Sigma.js

I'm currently working on a project using sigma.js where I need to show a large number of nodes and edges (~10000 to ~100000 of each one) stored in a JSON file. But the library is getting laggy when I load the JSON, on each refresh and also when it shows me the graph it doesn't space the nodes. I was wondering if someone knows how to represent this kind of dataset fine.
To be honest i am on the same issue if it can helps, i think the book example of Gephi.org tutorial is still the best.
For the moment i am on including sigmaJS from cloudflare but i don't have any proposition for this.
Something like you replace the library with a link to cloudflare like the one used for phaser.io explained in it git repository or even tweenJS use the same way (it's the way of web devs see #indiedev #indiegamedev on twitter, it helps)
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
http://jsfiddle.net/thefailtheory/L45ue3er/
The threejs random particle visualization performs really well with 20K points.
https://threejs.org/examples/#webgl_points_random
Will be a bit of work to repurpose for network display but the upside is you can leverage GPU for rendering.

Wrapping Python console/plotting in HTML/CSS/JS

I am looking to build a graphical frontend for some python functionality.
Since I am very proficient in HTML/CSS/JS I decided I might check this out as a possibility.
The main idea is to make it easier to explore data/variables, I am thinking of a datagrid for example.
I was also thinking of creating a GUI for things such as plotting with matplotlib (ie: Choose variable for X axis, choose variable for Y axis, pick a color from a dropdown, ...) in order to cut out some of the tediousness in exploring data with several variables.
I would then probably use something like Node-webkit to make a desktop application out of it if possible (and if not, just keep it as a browser project, perhaps).
Essentially what it would boil down to is kind of creating an IDE for python, specialized for data exploration/plotting and perhaps data manipulation.
An example I found for a web-based python console is repl.it
However I have spent a fair amount of time looking for viable ways to go about this, since sending and receiving data from the python interpreter wouldn't be too hard, but it might get a bit harder for exploring variables or plotting data.
So the question is: Are there any projects or libraries out there to facilitate this kind of functionality, or which provide a good starting point for interacting with Python through JavaScript? Are there any pointers you guys can give me to make the experience for users as seamless as possible?
Thanks!

3D development - Javascript/HTML5/CSS3?

I am working on this new project, wich is a new technology for me...
I'm working with Appcelerator Titanium, building this 3d application...
My applications suppose to be something like 3d Canvas...
I mean a ability to add objects to canvas (drag&drop),rotate them (3d),
and most important to rotate the whole Canvas(3d).
From checking the subject came with a lot of Plug-Ins and libraries:
Three.js,WebGl,HTML5 Canvas,CSS3...
The question is-Is anybody have an idea what is the best to use for
this mission?
Thanks!
Three.js makes it super-easy to make primitives and load pre-generated objects (typically from JSON data).
https://github.com/mrdoob/three.js/
Check out the examples at the bottom of the page, and note how little code is necessary to do anything. The only disadvantage is the overhead of a huge library like Three.js, along with the fact that it is still in its infancy and changing slightly by the month. Beyond that, there's not much advice I can give you as I have no idea what kinds of objects you plan to put in this canvas or what the goal if the project is.

Can I create a 3D carousel for the web from models in 3ds max? Example included

Is it possible/what is the easiest way to take 3D model from max and create a Flash or Javascript carousel that can work on the web? It should function like a real world CD carousel with say 100 or so models built in.
(http://www.thechiplab.com/stacks/Untitled-2.jpg)
Buttons on each side scroll through the chips. Thanks so much for looking at my question. This is my first one and I didn't see any similar questions asked. Sorry for not embedding the image...it wouldn't let me because this is my first post.
Chase
For working with 3D graphics in Flash you can use a library like Away3D or Papervision3D (the latter used to be the main one, but the former seems to have more momentum these days.)
Away3D will get hardware acceleration once that is available in the next version of Flash, but for now the complexity of your graphics will be limited by the software renderers. As a result, I don't know if a 100 disc carousel is really feasible.
Another option for doing web 3D is WebGL (already mentioned) but that's not supported in every browser yet (if ever, darn IE.)
Yet another option is using Unity. Their plugin will work in more browsers than WebGL, but is not installed as widely (or rather WebGL doesn't require any plugin.)
The specific file format you would use varies with each platform/engine, but the most common file format for web 3D is Collada. The best Collada exporter for 3ds Max is at http://www.opencollada.org
I'll just add this to #jhocking's (correct) answer:
I've used this asConverter max script to convert 3dsmax models into native Flash AS3 classes on a few different projects. Whats nice is that it exports to / extends native classes (extending the TriangleMesh3D Papervision class, for example). This way, you manage to bypass some of the issues you run into when exporting models out of 3dsmax. I've found it to produced quite reliable results - well formed geometry, and good uvw maps. It has support for PV3d, Away3d, and Sandy.
It looks like a defunct project now, but it was reworked by Mr. Doob at some point.
btw #jhocking: did you know Unity is going to support AS3 / export to SWF in the "near future" (when molehill releases, I assume)? Unity is an amazing application, and export to SWF would be... great.
You can certainly do this with Flash, but it is also doable with WebGL in some HTML5 supported browsers.
If you haven't worked with programming/JavaScript, you could have a look at something like copperlicht. If you are interested in coding, there are plenty of good WebGL frameworks around such as:
scenejs
three.js
glge
spidergl
canvas3d
As for the models, you'll need to export them into a format supported by webgl, for example into json objects.
Flash is of course another option, but I'll leave that option for somebody else to go into detail with.

How would I create a web based dynamic mind mapping application in Javascript?

I am trying to create a type of mind mapping software that runs on the web, and I am trying to figure out where to start. I would like this to be able to be used by the most number of people possible. My web application is currently written using Javascript for the front end and C# for the back-end.
I was thinking of using Javascript for this. Unfortunately, the most experience I have with Javascript is with basic DOM manipulating using JQuery and cannot really figure out how I would create mind map bubbles with interactive elements inside of them.
There are one or two mind mapping jquery plugins I have found but all don't function the way I need to (too much animation, slow, doesn't look easy to add and remove elements easily, doesn't work in IE, etc...) so I am looking at creating my own system but I have no idea how I would even approach this type of thing with JS.
HTML5 is not an option as it looks to be low availability at this point.
Raphaƫl in combination with the Dracula Graph Library will get you started.
Be prepared to do some scripting of your own. (for example: i quickly checked the source of the dracula graph library. The graph has no method removeNode, but it is really easy to add it )

Categories