Tag: d3.js

How to accurately zoom d3 maps which have already been translated

I have a map which has been translated to make it fit on the canvas properly. I’m trying to implement a way to zoom it and it does work, but it moves away from center when you zoom in, rather than centering on the mouse or even the canvas. This is my code: function map(data, […]

Design options for user selection of sets of nodes in d3.js force directed graph

I am working on an interactive graph visualization using the d3.js force-directed layout. I want users to be able to select sets of nodes by clicking on them one by one. I have a set of computations that I’ll allow users to perform on the selected set. For example, the user could select two different […]

d3-tree: how to highlight subtrees?

Looking at trees like this example, I was wondering how could you highlight clades/subtrees of the tree with different colors. An example of a such a tree is here Is it possible to overlay a rectangle with lower opacity over specific inner nodes? Any help is much appreciated!

Using D3.xml to plot a tree layout

In d3.js, I have seen the use of d3.JSON to use a JSON for building a tree layout. I have also worked with csv files, to first convert those in JSON by using d3.csv and d3.nest. But,while taking a XML data dource using d3.xml, can anyone suggest how to proceed for making a tree layout […]

Implementing <div> tooltips via d3 within an <svg> container

I’m relatively new to D3, svg, and javascript in general, so please bear with me :] I have been experimenting with D3 for creating plots and graphs. I have created a small plot using D3 and have been attempting to make it compatible with IE8. Here is a link to the more-or-less working build of […]

D3 Force Layout: Adding & Removing Nodes On Click

I can’t seem to find any other examples which have a similar application to what I’m trying to do, so I thought I’d just ask. I’m trying to mock up a funky mind map tool using the awesome d3.js library from mike bostock. I’m still trying to learn d3 and as it also turns out, […]

d3 Bounded Force layout with Zoom and Pan

I am working on a bounded force layout with a zoom and pan (D3.js). The main problem is that I’m not able to adequately customize the zoom behavior. My graph contains several movable elements, that a user can move through the svg-element. So I implemented a bounding box to prevent the user to push outside […]

Raphael JS – creating a custom progress bar

I am trying to create a custom progress bar like in the image below: I think my best options for creating this type of component is by using JavaScript and SVG or Canvas, and now I’m trying to create this in Raphael JS. I was wondering if this is possible or if it’s an incredible […]

Move an SVG element across Divs

How do you move an svg in one div, to an svg in another div? Try to move the red circle to the left. Here is the fiddle. <div id=”parent”> <div id=”left”> <svg id=”leftSVG” xmlns=”http://www.w3.org/2000/svg” version=”1.1″></svg> </div> <div id=”right”> <svg id=”rightSVG” xmlns=”http://www.w3.org/2000/svg” version=”1.1″></svg> </div> </div> Ultimately, a working base proof of concept of the project […]

D3.js Multiple GeoJSON objects

I am trying to transition between two GeoJSON objects, but have been unable to find any information on how to include more than one GeoJSON file. I am happy with the final transformation, but cannot find anything on multiple GeoJSON files. I can currently plot one map like so: d3.json(“goldatt2.json”, function (data) { var group […]