I'd like to have on the same page D3 charts that are build with different version of D3 (ok, frames are an option, but ideally without them).
What is the best way to have two version of D3 library in the same page (4.x and 3.x) ?
Related
I need to do this grouped bar chart like this one but the .renderType() doesn`t work. Are there any solutions to do a chart like this? Thanks!
You're right, it's non-trivial to find a branch or fork of dc.js and use it in your project.
The PR you linked is rather old and was replaced by this one. Unfortunately all grouped bar implementations had design shortcomings and none are ready to merge, which is why we still have to use forks or branches of the code.
Instead of renderType the API on this fork changed to
.groupBars(true)
The fork and branch for the new PR are here:
https://github.com/jaklub/dc.js/tree/grouped-or-stacked-bars
The artifacts (dc.js and dc.css) can be found on the grouped-or-stacked-bars-artifacts branch.
One way to fetch them is using jsdelivr:
https://cdn.jsdelivr.net/gh/jaklub/dc.js#grouped-or-stacked-bars-artifacts/dc.js
https://cdn.jsdelivr.net/gh/jaklub/dc.js#grouped-or-stacked-bars-artifacts/dc.css
Or, if you're using npm, you can declare the dependency as so:
"dc": "git+git#github.com:jaklub/dc.js#grouped-or-stacked-bars-artifacts"
Shorter version for any recent version of npm:
"dc": "jaklub/dc.js#grouped-or-stacked-bars-artifacts"
Although this is a fork of the last major version (3) of dc, it's compatible with the latest d3, as demonstrated in this demo fiddle.
Clearly you need a lot more horizontal space in order to display grouped bars, but that's a separate issue.
I've just started learning D3. It's at version 4 now and unfortunately most of the tutorials and examples online are of version 3.
I'm trying to create circles. But can't seem to get the attr method to work. I've created fiddles, simplified to render just one circle;
D3 v3 : https://jsfiddle.net/pratheepraj/595rrqc2/
D3 v4 : https://jsfiddle.net/pratheepraj/Ldokhq2e/2/
As you can see the exact code works in v3 but not in v4. In v4 if you inspect the element, the circles get created but the attributes are not set. Could u guys point out what should be changed for v4.
In D3 v4 you have two options:
Use .attr with a single attribute (see working example here: https://jsfiddle.net/yxprgokp/1/)
Use .attrs with attributes as an object, and an extra plugin to do that (https://github.com/d3/d3-selection-multi):
This module is not included in the default D3 bundle for parsimony’s sake: the single-value methods such as selection.attr are recommended for most users, as there is little benefit to the shorter syntax provided by these convenience method.
Original issue on GitHub: https://github.com/d3/d3/issues/2793
I found this link
http://www.nytimes.com/interactive/2015/07/24/business/international/the-world-according-to-china-investment-maps.html?_r=1
It is also interactive.
Can I know what lib they are using?
Looking at the Javascript assets, it looks like it's loading d3.js and topojson. The map itself is an SVG, so likely generated using D3.
this page use one js file for draw chart : chartbeat.js
download chartbear.js
http://www.evolutionoftheweb.com/
Question is:
What type of chart plugin they used in JavaScript like jqplot, float plugin?
If not, then how did they make it? is it just image or canvas?
If you look at the page source you will find that all the logic is in the /js/all.js file. If you search this you can find things like: jquery, d3, and other libraries. It seems that majority of work is done with d3.
Is there a jQuery plugin for displaying Dot files live in the browser as specified here?
I've seen a proof of concept at Visual Politics, but it doesn't seem to fully support the Dot language as even -- doesn't display correctly.
Any libraries out there I could have a look at for this?
I need to implement network graphs in the browser from dot files loaded via Ajax (rather than server side generated PNGs)
Check out Canviz: http://code.google.com/p/canviz/
Demos are located here: http://www.ryandesign.com/canviz/
As I was looking for the same answer, I found "viz.js" providing a java script version of GraphViz for DOT (see https://github.com/mdaines/viz.js).
Using this, I build myself WP GraphViz, a plugin for WordPress (see http://wordpress.org/plugins/wp-graphviz/).
I've been working on this for almost a week.
There are three different implementations:
1.Render svg in simple js, no needs install of graphviz
jquery.graphviz.svg https://github.com/mountainstorm/jquery.graphviz.svg
jQuery plugin to make Graphviz SVG output more interactive and easier to navigate. Makes it easy to have features like:
Highlight nodes/edges
Zoom in/out
Graph navigation - select linked nodes
Fancy UI tooltips; bootstrap supported out the box
Move things forward/back in the graph
Have a look at the demo: https://cdn.rawgit.com/mountainstorm/jquery.graphviz.svg/master/demo.html
2.Based on d3.js
<https://github.com/dagrejs/dagre-d3> d3.js + dagre
<https://github.com/dagrejs/dagre> pure js library
or:
<https://github.com/magjac/d3-graphviz> d3.js + graphviz c++ build
<https://github.com/hpcc-systems/hpcc-js-wasm> build graphviz 2.47
3.server side call graphviz to generate svg file.
<http://viz-js.com/>
<https://github.com/mdaines/viz.js>
<https://github.com/dreampuf/GraphvizOnline>