Tag: d3.js

How can I use a leaflet layer control to toggle a d3 svg overlay?

I have 3 d3 svgs I want to put on the same leaflet map. I would like to be able to control them with the same ease as leaflet layers. Here is code that works, but is janky. The relevant part is lines 75 to the end, where I create a custom layer control tied […]

Performance of svg:svg vs svg:g elements

I’m rewriting a chart and am thinking about switching from wrapping descendant elements in <g> elements to <svg>. The issue I have is that for what I’m trying to do in every way <svg> elements make that easier. What I’m concerned with is will there be any performance impact. <g> seems very lightweight, where <svg> […]

Rails PDFKit not rendering d3 javascript on download

NOTE: I am NOT using the PDFKit Middleware. I am using PDFKit as a way for users to Download a PDF of the page they are looking at, no middleware involved whatsoever, no viewing PDF within the browser. I have a javascript-heavy view–in particular D3.js. I am using D3 to create a bunch of fancy […]

Adding labels and descriptive label to D3.js donut chart

I’m using the following d3.js donut chart: jsfiddel What I would like to do is extend this example so that: Each coloured section needs a text label I want to colour in the centre of the donut, and add some text to the centre of the donut I need to be able to style each […]

Rickshaw RangeSlider – Zoom in by default

I am looking at a simple Rickshaw chart with data from a JSON file. d3.json(data, function(error, json) { var graph = new Rickshaw.Graph( { element: document.getElementById(chart_id), renderer: ‘line’, series: [ {name: ‘myseries’, data: json[0].data} ] }) graph.render(); }); I would like to access the graph after it has been rendered. Since the graph is created […]

D3.js: Trying to build flat calendar

Newbie here.I am trying to build a horizontal calendar to indicate people on vacations. I have placed the mockup below with annotation of key feature, I’m trying to incorporate. Legend Y – Indicates the person Legend X – Indicates the Month and year. Each cell is color coded based on holiday or vacation or weekend. […]

D3.js how do I arrange nodes of a force layout to be on a circle

I have developed a force layout to represent relationships between social groups. Now I would like to get the nodes to be distributed in a circle with links joining them. What is the best way to do this? The complete version of the code (without data) is here http://jsfiddle.net/PatriciaW/zZSJT/ (Why do I have to include […]

Draw path to join two nodes without intersect other node + d3.js

I am using d3-flow-tree (here) for displaying my tree’s node as flow layout. And add other g -element to represent connection between two nodes (by managing other chart with flow -layout). When drawing links from one node to other it’s must be rectangular path that not intersect other node like attached image need to find […]

Use D3.js to visualize neo4j graph

I have neo4j database, which I have already exported in json format. I am trying to visualize it usign d3.js. I want to use http://bl.ocks.org/paulovn/9686202 template. So, I picked three codes: index.html, movie-network.css and movie-network.js and put them in one folder. In the same folder I have kept the result.json which is the whole graph […]

Integrate Google Earth JS API with AngularJS

I am rather new to angular, and trying to integrate it with google earth‘s javascript API. I have done some work with on both, but never try to use them together. My motivation is to use the google earth module in an angular fashion, with controllers etc to manipulate the map. D3 on AngularJS I […]