I was going through the d3.js documentation , it says :
D3 helps you bring data to life using HTML, SVG and CSS.
There are nice visualizations given in the example section but I wanted to clarify whether it uses SVG only or HTML 5 canvas too ?
I intend to do a highly interactive,large data driven, animation rich visualization and was considering d3.js.
Can someone please clarify or offer alternate suggestions which js visualization library I should use?
See this thread: https://groups.google.com/forum/?fromgroups#!topic/d3-js/KuAMZlJ-aVE
You'll find it easier to stick to SVG if you're using D3.
Here's an example using canvas http://bl.ocks.org/2409451
Related
I am using draw2d javascript library for drawing predefined shapes and custom shapes in it's canvas.
As I don't have any example made yet, I am trying to copy from it's documentation but doesn't seem to find a good way to research it as it contains a whole lot of it.
Here is the circle example.
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.shape.basic.Circle
and here are some more documentation with examples.
http://www.draw2d.org/draw2d_touch/jsdoc_6/
I have premade shapes with html and css and I am trying to drag and drop and render them on canvas like these in this image. Also when dropped, they should have input and output ports too.
Is it possible to convert this html/css to draw2d shapes?
So here this is made possible via extending draw2d's SVGFigure and thus we have ability to provide custom svg to render it as a custom shape.
Below links were useful in this context.
http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.SetFigure
https://github.com/freegroup/draw2d/tree/master/examples/shape_labeld
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown
I am trying to create an undirected graph in Raphael (unsuccessful till now) and layout it using JointJs. I am able to create an undirected graph in JointJs and layout it.
From past couple of days i have been going through Raphael documentation, did a local setup but struggling to create a graph. My basic requirement is diagramming/graph creation through Raphael and rendering it with proper layout(like in jointjs; DirectedGraph Layout). Now, this auto layout is not supported by Raphael so, i have to use an external library only for layout purpose.
Now, as far as i've worked with JointJs, it does a acceptable job but even though lets say i've graph from raphael, still not sure how will i use it with DirectedGraph Layout.
D3 was also an option but after i explored it, i could not get much about layouting. Not necessarily i should use JointJs but could be another library which can support my use case.
My main concerns are:
How to draw undirected graph in Rapahel.
How to consume the graph drawn in Raphael in JointJs (or any layouting library)
OR
Layout technique/library that would do both diagramming and layout like in image from link below.
http://s000.tinyupload.com/?file_id=10320373554237333472
Any resources/code snippet will be helpful. Thanks in advance!
I'm using React.js to build an app, which includes quite a few svg charts. I'm using d3 functions that help in chart creation, such as scales, but then using React to generate the svg elements. Here's a great writeup on the approach: http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/
Part of why I'm going down this road was for performance - the first version of the app was too slow. It has a lot of elements and a lot of user-interactivity, all client-side. I'm trying to basically recreate the dc.js library in React.
It's a really fun approach and intuitive (more so than d3 alone IMO). Building axes is tedious though, and d3 does it so nicely. I would love d3 to just be able to output a string of svg elements that represent the axis (and maybe other elements) , and I feed it to React to include in the DOM.
I did see this SO question (How to make d3.js generate an svg without drawing it?) and the answer was to append it in the DOM and remove it, or create a DOM fragment. Those approaches go against the React approach and likely negate the performance benefits of React. I also saw jsdom and phantomjs solutions, which will not work in my case.
Can d3 generate svg without appending it to the DOM?
#Lars is correct if you are using traditional means. However, this is definitely possible with 'jsdom'. This library can simulate the DOM and also allows for string input. Which means you could inject the root element into the fake DOM and get a new window element to manipulate. You could then use D3 without changing it's source and using is like normal.
This would allow for the generation of an SVG.
No. D3 by design operates directly on the DOM through its selections. To have it generate string representations instead without modifying the DOM, you would need to modify its source code (and it would be quite a significant modification).
I would like to create a JSF web application to display a graphic structure (composed of hierarchical elements organised in a database) where, if possible, the user could eventually zoom in/out, add new elements...
But I haven't been able to identify a single JSF component (or compatible component) to help me do that.
This is what I would like : http://www.yworks.com/products/yfileshtml/demos/Complete/demo.yfiles.graph.orgchart/index.html
But it's not free and not in JSF.
I thought of the PrimeFaces mindmap component, but it is not compatible with IE8 and this is a requirement for my projet...
My second thought was to use RichFaces' Paint2D to manually draw info in rectangles and links between rectangles with calculated coordinates, but this seems a bit complex...
http://livedemo.exadel.com/richfaces-demo/richfaces/paint2D.jsf?c=paint2d
A final thought was to use CSS to display rectangles, but I can't display links and interact with the structure...
Any better idea ?
Thank you for your help !
OmniFaces has a component for creating a hierarchical tree.
Maybe you could use that to display a custom markup, and work out a way to manipulate it with Javascript, in order to get the behavior you want.
If that is not feasible, I'd suggest you to study a little bit of HTML5 Canvas, see what you can do with that. You can get inspired here checking out this is open source (GPL) HTML5 mind map app, the code is at GitHub.
I need to build a custom designed bar chart that displays some simple data. Below are my requirements. Can anyone suggest the best web technology for my requirements.
high browser compatibility
ability to draw shapes
ability to fill shapes with gradients
ability to have onclick and onmouseover events for the different shapes (bars in the chart).
Thanks guys. I was thinking of using svg but looking for suggestions.
How about Raphaël - it's SVG/VML.
It says:
Browser compatibility:
Raphaël currently supports Firefox
3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Ability to draw shapes
circle, rect, ellipse, image, text, path
Ability to fill shapes with gradients
yes
Ability to have onclick and onmouseover events
yes:
... every graphical object you
create is also a DOM object, so you
can attach JavaScript event handlers
or modify them later.
Everything in the reference
On top of that, there's a plugin called gRaphael which makes the creation of charts easier.
Simple data - Google Charts API or Google Visualization API may suit you.
Details for all features of image charts can be found on the Chart feature list
You may also take a look at the comparison of the Charts API and the Visualization API.
Another candidate of course is JQuery SVG - if you're already familiar with jquery you may prefer this one.
There's a comparison of JQuery SVG and Raphaël on SO:
jQuery SVG vs. Raphael
I recommend using Adobe Flex. Below is an example of how easy pie chart creation can be in Flex:
<mx:Panel title="Pie Chart">
<mx:PieChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
Based on your criteria:
high browser compatibility: Flex is used on more than 95% of all browsers and behaves the same in all browsers. No more need to check if your web app is running in ie, firefox, chrome, etc... because any browser that has a flash player is compatible.
ability to draw shapes: Flash's greatest strength is the ability to draw. Charts are completely customizable and skinnable to achieve the look you need.
Ability to fill shapes with gradients - done easily by setting style attributes or a custom skin.
ability to have onclick and onmouseover events for the different shapes - see this link for some easy ways to create user interactions with charts.
Hi i hope this link may help you i found it while searching for a solution similar to what you're looking for:
http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart
i'm trying gRaphael, i'm having difficulties on finding documentation though. you have to read the code and use the exploded instead of the min.js
I would like to share jquery.jqplot.js. It has lots of jQuery options, but depends on other plugins such as syntaxhighliter etc.