Tag: d3.js

D3 force directed graph. On mouse over show labels

This is related to this question. Caveat! I am very much a rookie programmer… any help is massively appreciated! I’m using http://mbostock.github.com/d3/ex/force.html to generate a force directed graph on some php generated json data. I have managed to get some code ( //Highlight selected node, its links, and its children in a D3 force directed […]

Javascript library for building a flowchart application

I need to realize a web interface with drag and drop where the user needs to create a flowchart by adding blocks as rectangles and polygons connected one to the other in 1:1 and 1:n relationships. A single object needs to have a text field where the user can add a description and he must […]

Extend Google Maps + D3 example to add a path or line

I am trying to modify this Google Maps + D3 example to include lines between points. The approach I took was to add new svg elements for each line. I’ve managed to create a new set of svg elements: var markerLink = layer.selectAll(“.links”) .data(links) .each(pathTransform) // update existing markers .enter().append(“line”) .each(pathTransform) .attr(“class”, “links”); Where links […]

How do you visualize topics with multiple attributes in d3js?

Suppose I have a list of topics with various attributes, e.g,. topic1 – a,b,c,d topic2 – b,d,z,y topic3 – m,n,y,a,z topic4 – u,i,v,a Each topic may have a variable number of attributes. I have seen a mxn grid. What I really want to do is display all the data and then allow the user to […]

Dynamic Pie Chart Data in Javascript and PHP

The following code represent the data that will be shown in a pie chart visualization in javascript. <script type=”text/javascript”> var agg = { label: ‘Aggressive’, pct: [60, 10, 6, 30, 14, 10] }, bal = { label: ‘Balanced’, pct: [24, 7, 2, 18, 13, 36] }, mod = { label: ‘Moderate’, pct: [12, 4, 2, […]

Center the main Word from D3-WordCloud horizontally

I have the following WordCloud. The original Code is from Jason Davies D3-JavaScript-WordCloud Example. https://github.com/jasondavies/d3-cloud/blob/master/examples/simple.html Most of the Code below is from this really helpfull tutorial (in German): http://www.advitum.de/blog/2012/04/tagcloud-mit-php-und-javascript-erstellen-word-cloud-d3/ Thank You Lars Ebert! EDIT: Now I have learned a little bit more. I have cleared nonsensical code. My goal is to center the first word […]

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 […]