Tag: d3.js

d3 cloud layout – show all tags

[background] currently I’m working on a little web project for data visualization and I want to use create a tagcloud or wordcloud with cloud layout of the javascript d3 framework (d3 cloud layout). I’ve built some examples that almost satisfy my requirements. The only thing that doesn’t work is, that some words/tags aren’t displayed in […]

d3 plotting multiple time series with different time scales

I’m new to d3 (& javascript) and want to ask if I can plot 2 different time series on the same chart if they have different time scales – e.g. one is monthly data and the other is yearly Does d3 handle the x-axis ticks automatically? Can you point me to some example code? Any […]

How to keep the duplicate letters in enter() when update() already have that letter in D3

I have been learning D3 these days. Quite a lot fun. There is a question: When there is a letter, like “o” in the update(), then the enter() has two same letters “o o” and the current update() would have only one “o”. But how do I make the duplicated letters in the enter() still […]

How can I reset the graph position and scale in dagre-d3

In some cases I need to reload the graph and redraw a graph and set it into initial position and scale without refresh the page(using jquery and ajax). What I used is the example code on https://github.com/cpettitt/dagre-d3 (not the interactive one, the one written in guide), and load the edges and nodes with dynamic queries. […]

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