Tag: d3.js

Format CSV to JSON with JavaScript

My task: given a set of data in CSV format, display a sankey chart using D3. Given data format: (I’m unable to change this) Uses,Types,Feedback Use1,Type1,Feedback1 Use2,Type1,Feedback1 Use2,Type2,Feedback1 … Required format for D3 Sankey plugin: { “nodes”: [ {“name”: “Use1”}, {“name”: “Use2”}, {“name”: “Type1”}, … ], “links”: [ {“source”:”Use1″, “target”:”Type1″, “value”:1}, … } My problem: […]

d3.selectAll.call a component factory function

I would like a new function getting called on each element in the selectAll resultset. If I do d3.selectAll(…).call(factory(…)), the same function is called on every element. factory(…) returns a component, which might have state. Is there something in the D3 API to do this? Or will I have to come up with something like […]

d3.mouse(this) throws TypeError: t is null

I’m trying to add line mousehover action to my d3 bar-line chart. But at bottom of the code, d3.mouse(this) throwing type error. Any idea? Here is my code svg.append(“rect”) .attr(“class”, “overlay”) .attr(“width”, width) .attr(“height”, height) .on(“mouseover”, function() { focus.style(“display”, null); }) .on(“mouseout”, function(d) { div.transition() .duration(50) .style(“opacity”, 1e-6); }) .on(“mousemove”, function(){ //move focus around console.log(d3.mouse(this)); […]

dimple.js – show gaps in line chart

I would like to draw a line chart that will show gaps for missing data for any dates along the x-axis. I looked at this example here http://bl.ocks.org/mbostock/3035090 and then looked at the dimple source. i essentially attached a new draw function to series.plot.draw that was the same as in line.js but replace the getLine […]

SVG Marker Not Working

I’ve got a little issue with a marker that I can’t seem to resolve. The marker-end isn’t rendering: Here’s the code responsible for defining the marker itself: this.svg.insert(‘defs’, ‘:first-child’) .append(‘marker’) .attr(‘id’, ‘arrow’) .attr(‘markerUnits’, ‘strokeWidth’) .attr(‘markerWidth’, 12) .attr(‘markerHeight’, 12) .attr(‘viewBox’, ‘0 0 12 12’) .attr(‘orient’, ‘auto’) .append(‘path’) .attr(‘d’, ‘M0, 0 V12 L12,12 Z’); Then here’s where […]

Create radial network diagram with non-hierarchical data in D3.js

I am trying to create a diagram similar to this one in D3.js: http://mbostock.github.io/d3/talk/20111116/bundle.html This example uses hierarchical edge bundling. However, my data is not hierarchical in nature and I want to represent a relatively simple network structure. I have a bunch of nodes divided into groups, and connected through a simple connectivity matrix. I […]

D3.js (Wilkinson type) Dot Plot Example

I’ve searched, but been unable to find an example of a dot plot in D3. Is anyone aware of this type of plot having been implemented in any of the charting libraries built on D3, or an example in base D3? Just to be clear, a dot plot is similar to a histogram except that […]

How to prevent d3.js force layout from pulsating/bouncing on resume/restart

I have a d3 force layout that I occasionally resume on user interaction to get the nodes moving around a bit. Unfortunately this has the undesirable (to me) effect of bouncing/pulsating all the nodes every time it resumes. It’s as if gravity is temporarily increased for a fraction of a second pulling all the nodes […]

Specifying D3 Force Graph parameters via json

I am trying to create a more reusable version of force directed network in d3.js. My thought was to be able to use the json file containing the data to also specify network properties. { “nodes”:[ {“name”:”Myriel”,”group”:1}, {“name”:”Napoleon”,”group”:1}, {“name”:”Mlle.Baptistine”,”group”:1}, //etc….. {“name”:”Child2″,”group”:10}, {“name”:”Brujon”,”group”:4}, {“name”:”Mme.Hucheloup”,”group”:8} ], “links”:[ {“source”:1,”target”:0,”value”:1}, {“source”:2,”target”:0,”value”:8}, {“source”:3,”target”:0,”value”:10}, //etc…. {“source”:76,”target”:62,”value”:1}, {“source”:76,”target”:48,”value”:1}, {“source”:76,”target”:58,”value”:1} ], “graph”:{“charge”:-220,”linkDistance”:50} } […]

D3 force layout – .exit().remove() just giving back errors on tick event

I have a problem with link.exit().remove(); and node.exit().remove();. If I set it in the initializeGraph method then I get several errors with the tick function I think. So my question is how or why do I get those errors: Uncaught TypeError: undefined is not a function graph-d3.js:156initializeGraph graph-d3.js:156updateForceUsingNewNodes graph-d3.js:108createGraph graph-d3.js:18$.ajax.success ajax-stuff.js:106j jquery-2.1.1.min.js:2k.fireWith jquery-2.1.1.min.js:2x jquery-2.1.1.min.js:4n.prop.on.c jquery-2.1.1.min.js:4n.event.dispatch […]