Drawing SysML/UML diagrams in javascript - javascript

I have to write an application in javascript using the d3 graphics library to display SysML diagrams. I feel like most of this project is within my grasp but I have no idea how to approach one aspect of it.
Since the application will assume nothing about the complexity, size, or nesting of the diagram, hard-coding rules for how to arrange the blocks would be futile. I imagine significant study has gone into this kind of thing before but I am unaware of what it would fall under or where to look.
Also, does anyone know where to find examples of SysML diagrams in XML format? Any help is appreciated!

Since SysML is a UML2 profile, you might find jsUML2 a useful starting point for your attempts. Basically you could use the jsUML2 to draw the SysML diagram and then use the export function to produce the XML. NB: XMI is the standard for interchange between different tools.

Related

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!

Driving dimple.js charts from div attributes

Currently my code is full of small functions which setup various dimple charts, the usual boiler plate of svgs, charts, axes, etc. In many cases, these functions are tied, one-to-one to div tags where the chart will be drawn.
I'm thinking of setting up a system to do something like this instead:
<div class="dimple-chart" margin-x="10% xAxisType="measure" xAxis="height" ...></div>
Once I've figured out the naming convention and the set of attributes I need, I can use jquery (or whatever works) to transform the values in attributes and generate a chart.
I don't normally do web programming so I'm curious if I need to build this myself or if something like this already exists. If there are no tools or libraries, are there some standards or best practices I should be aware of (such as adding custom attributes to div tags)?
I have seen some templating languages which even let you do basic data transforms, such as filtering, mapping or reducing data. I'm interested in learning if such templating library may help in this case.
You are pretty much describing angular directives and you are in luck because a set of angular directives exist for dimple called angular-dimple http://esripdx.github.io/angular-dimple/
For whoever may visit this question in the future, I have a basic prototype for dimple-chart tag using xtag at https://github.com/falconair/dimple-chart.
This uses Mozilla's x-tag library, which means non-angular devs can use this. What I have is the most basic, proof of concept. As of now, my intention is to only build it out as much as I need it for my app. Over time, if there is demand, I may clean it up further

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.

Graphing on Rails 3 + dygraphs

I have a very large data set that I'd like to craft into a scaling, zoomable, panning graph that goes back over the course of a decade of data. It appears that the best solution for the job is dygraphs vs other options.
I'm not opposed to other options if any meet the requirements of very high interactivity, so if'n you got someth'n else, please share...
Notwithstanding, I have not found a solid example of using dygraphs with Rails 3 and would really appreciate seeing an example of how to tie this into a dataset very quickly or a link to an example.
Initially I just need to throw all of the content out into the graph to see how it works out and for some analysis, so nothing super fancy's needed.
**EDIT: Just found Highstock. Seems to be a perfect match. In that light I'd like to modify my request to perhaps some examples of utilizing Highstock in this context.
I can't point to any tutorials or lessons. I actually had this exact same problem a while ago, trying to do the exact same thing. My answer is that you just have to generate the HTML/dygraphs functions to plot your data.
In case you are still trying to figure this out, I have created rails app that will interactively let the user choose and plot data from any basic database schema, any database. I'm a total RoR noob, but it works pretty well and is made to be generic and dynamic, as well as add checkboxes and linear regressions to each plot. Its not finished, or fully documented yet but you may find it helpful.
I think you can access it this way:
git clone https://bitbucket.org/zachd1_618/rails-stocks.git
or just get in contact with me if you are for some reason really interested.
I've tested it on multiple databases and different schemas, and it easily handles 50k+ points across multiple graphs.
I see that Highstock is nice too, but you shouldn't have any problems in adapting Dygraphs to what you describe. I have not used it with Rails, but have good experiences with it on Django. The approach would be quite similar: Either you serve the dataset in a separate request, or you generate the dataset within the template layer. The latter is probably the slowest.

Processing language vs javascript?

I'm going to develop a comprehensive educational software which runs on the browser and has many visualization and simulation works (electrostatic and electromagnetic visualization, 2D and 3D).
Which language(Processing, javascript or something else) is the best toward my purpose?
The question is indeed broad but I will answer from the experience I've had.
Javascript is not really meant to do mathematical calculations, which is what might be necessary to calculate a lot of E&M phenomenon quickly (Especially if they are not represented as a closed form solution). It really goes into how much detail you want in your graphs as well (More steps = more calculations). You may find yourself needing to do more optimizations to make up for the performance difference.
I did some visualizations of antenna arrays (They had closed form solutions, only simple arrays) in Flash and it worked out ok. Javascript will definitely not be up to par with any 3D simulations you might want to do.
I wonder if Silverlight might be a better solution, because you may find more mathematics libraries for .NET than for Actionscript, that could save you a lot of work of writing the math out yourself (But you might end up doing this anyways because of the performance issues).
As others have suggested javascript is not that strong of a language when it comes to visualization.
Processing is a really good language for what you're trying to do, it's easy to learn and is Java based. Data visualization is built directly into the language, as well as temporal space (ie advance "1 tick" in time and have the visualization react to that.)
Also if you're interested in going that route I'd suggest picking up Visualizing Data which is pretty much a Processing primer.
Flash may be the more common application stack right now for what you are looking for, but Silverlight is looking primed to take the title from them based on the powerful features that it contains.
I would go Flex or Silverlight myself
Plenty of re-usable libraries
Native support for multimedia
Native support for graphics and animation
I'm a little late to the show, but what you want, has been implemented in JavaScript, and you'll find this incredibly useful. I recommend running it under Chrome as the JS processing engine is extremely fast. (You may even want to try Chrome 2 which is even faster)
http://ejohn.org/blog/processingjs/
http://ejohn.org/apps/processing.js/examples/basic/ (91 basic demos.)
http://ejohn.org/apps/processing.js/examples/topics/ (51 larger, topical, demos.)
http://ejohn.org/apps/processing.js/examples/custom/ (4 custom "in the wild" demos.)
See also: http://www.chromeexperiments.com/
I second LFSR Consulting's opinion: Processing is used a lot for educational purposes, it is free, and fast (Java is faster than Flash in general) and easy to learn, so you have faster results. It supports 3D, you can tackle Java libraries for simulation and computing, etc. And it has a great community! :-)
JavaScript is a bit light for such usage. JavaFX is hype, but it hasn't really 3D (although one used Java3D with it) and it is still a bit young.
Flash and Silverlight: no comment, not much experience in the field. OpenLazlo can be an alternative...
You really have two choices ActionScript in Flash or VB.NET/C#/other in Silverlight.
So first you need to decide which of these platforms you will target.
You may be able to split the problem into two parts, the user-interaction and display part, and the heavy calculations part.
If you can move the heavy calculations to a server then you can still show everything in javascript.
One difficulty with javascript is that it is interpreted and you will need to write more of the equations yourself, so there is a performance hit and development time, but it will work without any plugins, unless you don't want to do 3D in the canvas tag.
Flash and Silverlight may have better options, but then you are learning new languages and requiring plugins, depending on what version of Flash you want to use.
Check out processing.js, xcode, and iprocessing!
ProcessingJS is great for data visualization but lacks in interactivity.
You should probably try python. It is a really good language for educational and computational purposes it has a pretty decent community and the syntax is not so tough. Even though it was designed to for command line you can create front end gui's for it using some external package and it also provides packages like Scipy, Numpy and Matplotlib for advanced plotting and data visualization.

Categories