FAQ Database Discussion Community


d3.js animate line drawing happens in opposite direction as expected

javascript,svg,d3.js
I have a simple line graph in d3.js and that I wish to animate the drawing of the line. Fiddle: here. The animation aspect works, but I'd like the line to be drawn from the left to right, instead of right to left as in the fiddle. Why is the...

3D Lines disappear sometimes

javascript,d3.js,3d,three.js
I am building 3d line chart from data here is the code Demo the part of code that generate line is parentTransform = new THREE.Object3D(); var _color = d3.scale.category10(); for (var i = 5; i > 0; i--) { var material = new THREE.LineBasicMaterial({ // color: 0x0000ff,linewidth: 30 color: _color(i),...

How to properly control the context when using d3.json event handler

javascript,json,d3.js,anonymous-function
I am trying to implement an asynchronous request with d3.js inside self-executing anonymous function. Rather than saying d3.json(url, callback), I use d3.json(url) to first create the request object, then register a "load" event listener with xhr.on before starting the request with xhr.get. Here is an example, in my object I...

How to call ajax by clicking d3.js graph

javascript,ruby-on-rails,ajax,d3.js
I want to call an ajax function to send data from my graph (d3.js forced layout graph) to a controller action in rails. My graph is created from json (from the classic miserables example). I want to allow a user to click on a node and for that to trigger...

Nested JSON structure to build side-by-side d3.js charts

javascript,json,d3.js
I'm currently stuck on how to traverse a JSON structure (I created) in order to create side-by-side donut charts. I think I've created a bad structure, but would appreciate any advice. I'm working from Mike Bostock's example here: http://bl.ocks.org/mbostock/1305337 which uses a .csv file for source data. In that example...

What am I misunderstanding about the d3 enter() and exit () selections?

d3.js
I'm learning D3. In this example, I'm adding paragraphs, using a simple list of numbers as data. I try to do the following things: Start with a list of 5 elements. When I call update(), I think the enter selection should contain 5 paragraphs and the exit() selection should be...

Working with dynamic JSON in d3.js

jquery,d3.js
I'm trying to use http://bl.ocks.org/robschmuecker/7880033. In the dndTree.js in example something like: var t = d3.Json('my.json',function(error,treeData){ //something interesting here }); works real fine with static JSON.But when ever I try to get the data via a WebApi, it stops working. I tried like : var t = d3.Json($.ajax({url:'../api/MyController'}),function(error,treeData){ //something interesting...

Accessing a javascript object in D3.js

javascript,json,d3.js
A javascript data object (JSON notation) has been created with the following content: "[ {"range":"Shape","values":[{"idx":0,"val":"Random"},{"idx":1,"val":"Line"},{"idx":2,"val":"Square"},{"idx":3,"val":"Circle"},{"idx":4,"val":"Oval"},{"idx":5,"val":"Egg"}]}, {"range":"Color","values":[{"idx":0,"val":"Red"},{"idx":1,"val":"Blue"},{"idx":2,"val":"Yellow"},{"idx":3,"val":"Green"},{"idx":4,"val":"Cyan"}]} ]" In a next step the index of an ordinal value has to be found in this object. The function should find the index of the value 'Blue'...

How to test interactivity of React component using D3 select()?

javascript,svg,d3.js,reactjs
I have a React visualization component (Using SVG) that displays a tooltip on mouseOver, using the d3.select() function to modify a class on the tooltip element so that it becomes visible (And invisible on mouseOut): _handleMouseOverEvent: function() { d3.select('#' + this.props.caption).classed('hidden', false); d3.select('#' + this.props.caption).classed('visible', true); } _handleMouseOutEvent: function() {...

Wiring events for reusable d3 time slider

d3.js
I am trying to convert this time slider d3 block to a reusable module. As you can see in jsfiddle, the brush event is not being called. How do I wire up d3 brush event for this module correctly? Here is what I have so far jsfiddle link Code: (function...

Drawing SVG images with an array of images.

javascript,svg,d3.js
I have an array with names of images, I want to crate an svg canvas and position them in correct rows and columns so that it will not overlap. Here is my code for that. <script type="text/javascript"> var imagesObjects = ["1.png","2.png","3.png","4.png","6.png","3.png","4.png","6.png","1.png","2.png","3.png","4.png","6.png","1.png","2.png"]; var iconsArea = d3.select("#icons").data(imagesObjects) .enter() .append("svg:image") .attr("xlink:href", function(d){ console.log(d);...

Parse a JSON String and display it

javascript,json,r,d3.js
I am a total D3 beginner (barely experienced in JS). I've the following lines of code: <script type='text/javascript'> data ='{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.62,"qsec":16.46,"vs":0,"am":1,"gear":4,"carb":4,"_row":"Mazda RX4"},{"mpg":21,"cyl":6,"disp":160,"hp":110,"drat":3.9,"wt":2.875,"qsec":17.02,"vs":0,"am":1,"gear":4,"carb":4,"_row":"Mazda RX4 Wag"}';</script> <script type="text/javascript"> d3.select("body").append("div").text(JSON.parse(data)); </script> That always...

dc.js - Stacked bar chart with empty bin filter displaying in strange way

d3.js,dc.js,crossfilter
I'm trying to have a stacked bar chart and remove empty bins, the bar chart doesn't seem to display properly. It's adding whitespace within the bars themselves. The filtering is working fine. Probably best explained by having a look at this fiddle - http://jsfiddle.net/northside45/xdcvr2kf/ My filters look like this var...

d3 preventing drag on specific elements

javascript,svg,d3.js
I am trying to draw few rectangles in d3. I have an array which holds JSON objects of rectangle properties. var rectObj = { id : 'streams', x : 10, y : 10, height : 50, width : 100, drag:'true' }; Some rectangles have draggable='true', while the others have draggable='false'....

NVD3 Cumulative Line Chart : How to set different back ground color for specific X axis

jquery,d3.js,nvd3.js,linechart,cumulative-line-chart
I am using NVD3 Cumulative Line Chart,it works perfect for me but i want to set different background color to highlight some specific hour on X axis as i have shown in below image. OR set different background for graph for particular part As shown in above, i want to...

Connecting two rectangles in d3js

javascript,svg,d3.js
I am trying to connect two rectangles with a line in d3. The behaviour should be like this, Let's say we have rectangles A & B. We have to first click a rectangle and when we move the mouse the line has to move with the mouse, When I click...

Adding clickable links or onClick handler in a D3 force directed diagram?

javascript,d3.js
When a user clicks on a node in a D3 force directed diagram, is it possible to send them to a URL or to call JavaScript such as alert("You clicked on node 1")?

Transition partition arcs back to original angles

d3.js,transition
How can I transition arc angles, initially defined by d3.svg.arc(), back to their original values when using d3.layout.partition? I am trying to store the initial startAngle and endAngle values d.x and d.dx somewhere so that I can transition back to them at a later state. However, I do not know:...

D3.js Rotate Vertical Bar Graph Labels

javascript,html,d3.js
I'm new to D3.js and using following example from D3.js to create a simple dashboard for one of my web application. http://bl.ocks.org/NPashaP/96447623ef4d342ee09b My requirement is to rotate top value labels of each bar vertically by 90 degrees. I changed following method by adding "transform" attribute. Then the labels do not...

D3 accessing the update selection for nested datajoins

javascript,d3.js
I'm rendering a table of data using D3, and have successfully managed to make the initial render work: var data = [ [1,2,3], [1,2,3], [1,2,3] ]; render(data); function render(data) { var container = d3.select('#container'); var table = container.select('table'); if (!table.node()) { table = container.append('table') .classed('legend', true); } // create the...

Icon not displaying correctly

javascript,css,d3.js
I have some D3 code which creates rectangles, put some text into it and connects each node based on some logic. Now, for each node I want to display an icon if the execution_type of that node is 'Manual". The icon needs to be similar to this example: http://output.jsbin.com/eFAZABe/6 After...

d3.js grid moving around when dragging and zooming

javascript,svg,d3.js,gridlines
I tried to copy the behavior of the grid displayed here. The code I have is here Problem is, when I'm dragging or zooming, the grid is moving along with everything else, while it should not. I suspect the problem is around this part : function zoomed() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis);...

How can I update text-label in d3 donut according with my array's data

javascript,d3.js
i am trying to add the percentage instead of labels here according with array. I need label to be updated after every donut's transition. If I insert just .text(function (d) { return d.data.value;}); it shows me only the second array's value and doesn't change. How can I fix it? PS:...

Load and parse multiple csv files with D3.js

javascript,d3.js
I'm implementing a map visualization using D3.js. I have a number of x csv files (matrices). I want to load them and sum all values from all files. I implemented a for loop over the array of names and load and parse the data using d3.text, but due to async...

How to show labels in first two rings only in a zoomable sunburst partition with rotated labels?

d3.js
Provided the following fiddle, how can I modify it to display the rotated labels in the inner two rings only? It's simple enough to show the label based on the depth of the node, but it breaks after zooming. I removed my modification which clamped labels to the first two...

How to increase size of pie segment on hover in d3

javascript,d3.js,pie-chart,c3
I created pie chart using d3. How to increase size of pie segment on hover? As you can see, green segment is so small so I want to change it size like red segment. How can I do this? My code: var w = 400; var h = 400; var...

Javascript on my page not working in iOS

javascript,ios,d3.js
I have been playing around for a few hours on my page trying to get the javascript to load on iOS. Both charts using chartjs and D3 will not load on a mobile browser (safari on ipad and iphone) On desktop browser it works fine, and i have no JS...

D3.horizon Chart not rendering

javascript,json,d3.js,charts
I'm trying to render a simple horizon chart like this example with D3.js and Horizon.js (from the venerable Jason Davies). I'm using some fitness tracker data. Unfortunately the Mike Bostock example uses a strange json layout and does some obscure pivoting/transposing of rows to cols; making it very hard to...

Javascript D3.js drag a chart out of its svg Element

javascript,svg,d3.js
I want to make chart, that you can not drag out of its svg element. I'm doing this at the moment like this jsfiddle As you can see, you can zoom and drag this freely. What i want is this: If you drag it for example to the right and...

Drill down capabality in C3.js

javascript,d3.js,c3.js
I have a simple bar chart that displays two teams. Here is the screenshot. Now for instance if I click on bulls it should show drill down and show another bar graph which will have 5 bars each representing a player from the bulls. If i click on Lakers it...

D3 bar chart from geojson

javascript,jquery,d3.js,leaflet
Has anyone worked on programmatic D3 bar charts inside div objects? I'm developing a series of layers in a web map (leaflet) for a project and I'm struggling with this part. I understand the process of how to send a D3 object to a div which in turn is sent...

SVG, D3: Understanding stop offset attribute

javascript,svg,d3.js,linear-gradients
I was trying to understand the offset attribute of 'stop' svg element but couldn't get my head around it. Here's the code: var vis = d3.select(scalecontainer) .append("svg") .attr('height', 30) var gradient = vis.append("linearGradient") .attr("y1", 0) .attr("y2", 0) .attr("x1", "0%") .attr("x2", "100%") .attr("id", "gradient") .attr("gradientUnits", "userSpaceOnUse") gradient .append("stop") .attr("offset", "0%") .attr("stop-color",...

Data Join with Custom Key does not work as expected

d3.js
I am plotting some points using d3. I want to change the shape off all the points based on some condition. The join looks a bit like this: var data=[{x:10,y:10}, {x:20, y:30}]; var shape = "rect"; ... var point = svg.selectAll(".point") .data(data, function(d, idx) { return "row_" + idx +...

Is there a javascript command for 'only run when the mouse is over but stop when its not over'

javascript,d3.js
I know about onmouseover but I have a circle on a page that lights up when the mouse hovers over it. But it stays lit when the mouse comes off it until it hovers again, when it turns off again. Its really irritating. Is there a one instruction to trigger...

Svg how to position elements lo left and right like with floats?

javascript,svg,d3.js
I'm building a organizational chart with the help of dagre-d3,js and d3.js. Its svg based so every person in the chart needs to have some kind of a employee card (or call it profile card) This card needs to show the Persons name, his group and have 2 buttons, one...

d3.max didn't get the correct value [duplicate]

javascript,d3.js,max
This question already has an answer here: D3.js scale returning wrong values from dataset 1 answer I am using d3.js to render some data and the data set is a csv file called bar-data.csv like this: date,value,duration www.sina.com,53,100 www.baidu.com,165,2000 www.qq.com,269,690 www.youku.com,421,224 www.facebook.com,405,345 www.apple.com,376,777 www.cnn.com,359,298 www.cctv.com,433,333 www.google.com,455,500 www.boston.com,670,274 However when...

Svg brush as slider. How to set slider scale graduation frequency

javascript,svg,d3.js
In http://bl.ocks.org/mbostock/6452972#index.html slider example there seems to be no explicit assignment for scale graduation frequency. What if I want to graduete that scale by 10 and not by 20. How can I achieve that? At the moment graduation is like: 0 20 40 etc. I want: 0 10 20 etc....

D3js links are not being displayed

javascript,d3.js
I'm trying to display something dynamic with D3js, and everything is working except the links. Can someone give me a clue of what I'm doing wrong? The code create a circular infinite caterpillar, and I'm trying to add some links that come and go dynamically. The code adds nodes and...

Count number of items in an array of objects with a specific property value (JavaScript)

javascript,arrays,object,d3.js
I have an array of objects. Note that "created" sometimes has the same value more than once. Also note that "status" is sometimes "0": var array = [ {"created":"Jan 1","status":1}, {"created":"Jan 1","status":1}, {"created":"Jan 2","status":1}, {"created":"Jan 3","status":0}, {"created":"Jan 4","status":1}, {"created":"Jan 4","status":1} ]; I want a new a new array of objects...

D3 bar chart bar text labels not visible properly

javascript,d3.js
I have a stacked bar chart in d3.js For every stacked bar i have corresponding text value showing near stack itself. problem is, some text values displaying are hidden behind bars, where as some are visible over bars. I want all text to visible over my bars. my code looks...

Prevent click action when dragging a D3 Node

javascript,d3.js
I'm able to click on a D3 node to get an alert(); message. I'm able to drag the D3 node too, but dragging also triggers the click behavior when the mouse is released. Is there a way to prevent the click behavior after dragging the node? This is where I...

How to smoothly load 200MB data to browser for visualization?

javascript,d3.js,leaflet,data-visualization,kibana
The 200MB data is collected among 300 days, about 600kb daily. Currently I use d3.tsv to load one file containing all data, and then use setTimeout to loop through each day. But the question is to load 200MB data to client's browser, it can take a few minutes... How to...

How to split multiple D3 transform commands into separate statements

javascript,d3.js
I have some trouble with my zooming. I found this zooming with 2x translate and 1x zoom: g.transition() .duration(750) .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")"); This is working. But I...

D3js exit() and update working, can't enter()

javascript,d3.js
I have a scatter plot with D3 and I'm trying to add circles to a selection based on changing data. I'm passing the data selection down to two functions: render and update. The render function is the initial render and update has the enter() and exit() methods. I can easily...

D3 Slider stop event

javascript,jquery,svg,d3.js
I have a D3 range slider in JS. I need to fire an event when sliders stops at a particular pair of points. I have coded like this: d3.select('#slider4').call(d3.slider().axis(d3.svg.axis().ticks(6).tickFormat(function (d).value([0, 1]).on("slide", function (evt, value) { value1 = value[0], value2 = value[1]; loadChart(value1, value2); })); function loadChart(value1, value2) { debugger; var...

html page works when local but not when on cloud ide

javascript,html,d3.js,cloud9-ide
I am trying to render a d3.js graph on a simple webpage. The graph is as simple as it gets. I run it from cloud9 which is usually a really good error free cloud based IDE. However when I run it the page is blank. I can get simple javascript...

Summing up the weight of all edges to a node in D3.js?

javascript,d3.js
I want to sum up the weight of all edges connected to a node and use it as the node score? The sum would be an array where than I would need to order them from the highest node with more edges to the lowest one. By the way I...

Build dynamic rectangle with Angular directive

javascript,angularjs,d3.js,angularjs-directive
Recently I have written a project with D3, so I need a dynamic rectangle. I used Angular to create a dynamic visualization.I have two input type rang, the first one will change the 'width' of rectangle and the second will change the 'height'.However I don't know how to use angular...

Tween Arc outerRadius()

javascript,d3.js
In the following code, when you click on an arc of a circle, it tweens the outer radius of that particular arc of the circle. var data = { "details": [ { "id": 1, "name": "AAA", "pcArray": [25,75], "type": "c", "subtype": "p", }, { "id": 2, "name": "BBB", "pcArray": [25,175],...

Add a “Select All” checkbox to lists of checkboxes that update an array of objects

javascript,jquery,checkbox,d3.js
I have two lists of checkboxes (there will be additional lists later), for example: <ul> <li><input type="checkbox" onchange="handleChange()" name="job" rel="it-manager" value="IT-Manager" id="IT Manager" class="selectedId" checked> IT Manager</li> <li><input type="checkbox" onchange="handleChange()" name="job" rel="consultant" value="Consultant" id="Consultant" class="selectedId" checked> Consultant</li> </ul> <ul> <li><input type="checkbox" onchange="handleChange()"...

Get Angular to action ng-if in new elements generated by d3.js

javascript,angularjs,svg,d3.js,angularjs-directive
I am generating a series of <circle ng-if='n'> someScopeFunction()' \> with d3.js How can I get Angular to notice and work on these new elements and ng-ifs? And how can I get it to do so with angular variables, e.g. <circle some-attr='{{i - 2}}' />...

change axis color dimple

d3.js,dimple.js
I have a very simple line chart in dimple. I want to change the x and y axis colour to white. var svg = dimple.newSvg(".line_chart_container", 400, 300),dataset; var chart = new dimple.chart(svg, dataset); var x = chart.addCategoryAxis("x", "Attempts"); //x.style ("fill","red") var y = chart.addMeasureAxis("y", "Value"); y.showGridlines = true; x.showGridlines =...

D3: Is there a name for this type of chart and code example?

d3.js,bar-chart
I've seen this kind of bar chart in a couple of places. This is from LinkedIn. The page is rather complicated. When you click on a bar, it recalculates and reorders the bars in the other columns. Here, San Fran is clicked. Is there an example of something like this...

is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

javascript,d3.js,bubble-chart
I need to implement D3 bubble chart,but with bubbles scattered out in the division ( spread across the division at specific coordinates ) instead of a circle pack layout.Is it possible the set the positions of the bubbles in such a way using D3.js?

D3 Bounded Panning

javascript,d3.js,zoom,panning
I've been at this for a few days now and I can't get this chart to obey panning bounds. Initially, the data could be pulled off the page both negatively and positively, but I've been able to stop the negative by following this blog post. I'll paste what I believe...

Creating SVG elements dynamically

javascript,svg,d3.js
I am trying to create some circles in d3js dynamically, But for some reason it fails. My requirement is to show two small circles on the rectangle when I hover the rectangle. on the mouse out event circles should hide. I tried to it by creating a rect object and...

Labels and images for D3 nodes incorrectly show at top left of screen

javascript,d3.js
I'm able to get images and labels to show for the nodes, but they show at the top left of the screen. Nodes show up in the correct position when I use this .enter().append("circle") Labels and node images show at the top left (incorrect) when I use this: .enter().append("g") This...

d3.js example works on example website but not on my server?

javascript,d3.js
I copied the html and tsv example from this page directly http://bl.ocks.org/mbostock/3884955 over to my server, but when I access it on my server, all I see is the y-axis. There are a bunch of errors in the javascript console: Error: Invalid value for <path> attribute...

d3.js place holder graphic when dragging the SVG element

javascript,svg,d3.js
I am creating a visual composer for a query language. I have 3 different SVG rect elements (say A->Operators, B->Some_Objects, C->Drawing Canvas). I want to drag elements from A, B to C. If the user drag the element from A/B to C, the same element should be drawn in C...

Responsive axis with percentage coordinates

javascript,svg,d3.js,graph,charts
In an attempt to build a responsive scatter graph with d3.js, I'm using %-based coordinates in a 100% x 100% svg element. How can I .call(axis) and get it to layout the axis using % and not px values, so that they always fit the svg and the plotted data?...

Moving connected rectangles in d3js

javascript,svg,d3.js
I am trying to connect two draggable rectangles in d3js. My requirement is to Have different rectangles ( eg. A, B, C) All the rectangles should be draggable When I click on a rectangle it should start to draw a line (eg. If I click on A first, the line...

Specifying nodeSize for each node individually in D3.js tree layout

javascript,d3.js,tree,spacing
How do I set the nodeSize for the D3 tree layout for each node individually? In my case I have a tree containing nodes of varying sizes and setting d3.layout.tree().nodeSize([300, 200]); results in weird spacing when the width of nodes varies. nodeSize seems to be one of the few D3...

How to rename fields to get into json hash

ruby-on-rails,ruby,json,d3.js
I am trying to rename columns once they come out of a database query so I can get them into the correct format for a d3.js graph. This requires the fields to be named source,target,value. def self.including_relationships User.select(:follower_id,:followed_id,:value) #How do I rename the fields from the line above to the...

d3.json response inside wrong callback variable

javascript,svg,d3.js
I'm trying to create a little application in PHP for a website. For this application i use neo4j community database. I'm trying to create nice looking navigation with a graph. The problem is not the styling but to get the graph running. Right now i get the output of neoclient...

Map reducing a collection of coordinate pairs

javascript,d3.js,mapreduce
I've been a developer for a couple years now, and one concept I don't seem to quite get is map reduce. I have a collection of coordinates that define squares, with each value being an array of two arrays. Each internal array is itself an array of two numeric values....

dc.js: ReduceSum with multiple CSVs

javascript,d3.js,dc.js,crossfilter
This is a follow-up to another StackOverflow problem with creating charts with multiple CSVs into a single dc.js dashboard. I followed the instructions and my charts are working. However, what is not working is the numberDisplay elements. What I'm suspecting is that since I'm tabulating the totals of two CSVs,...

dimple.js - keeping scale after reloading new data

d3.js
In d3.js I can load a dataset and filter it on 'year'. This opproach gives me the possibility to calculate my d3 scales and vertical axis based on my complete dataset's max y value. My aim is to get the graph to be visually comparable when changing view from one...

how to create a stacked bar chart with images in d3

javascript,d3.js,stacked-chart
i am trying to create a stacked bar chart with images on each rectangle and it was creating images separately in the body, can someone please help me in it. the output of my code is showing images in an another g class i need those images to be displayed...

D3. Why is my group translation not working?

d3.js
My goal here is to translate a group of svg elements with a translation. It is not working. Here is the code: Create an SVG container // create svg container canvas = d3.select("body").append("svg") .attr("width", canvasBBox.width) .attr("height", canvasBBox.height); Append a translation of x=200, y=200 // apply a transform canvas.append("g") .attr("transform", function(d)...

show text with diagonal line in d3 tree graph

javascript,d3.js
I am using d3 js to display data in graph view . Everything is working fine but I need one enhancement . I wanted to show some text above the diagonal line so that user can know how two nodes are related to each other . Diagonal is created using...

How to achieve “flying Arcs” as link in the force layout of D3.js

svg,d3.js
Please suggest how to achieve the flying arcs in the force layout of d3.JS. As in the image

How to implement D3 hierarchy view

html,json,d3.js
I am trying to make a hierarchy table, in which I want to show tree-structure with help of D3js.org, but it is not showing. Can anyone of you help me in solving my problem. I am using code : index.html and readme.json from https://gist.github.com/mbostock/1062288 link. But by using these two...

data.key is undefined: how to parse json data

javascript,json,d3.js
I want to draw rectangles in proportion to the size of cities. But I keep getting stuck with parsing the data. I can take out the keys of the data, but when I use the keys by doing data.key it gives me "undefined". I think the problem lays in the...

Crossfiltering of JSON data by the most recent time

d3.js,crossfilter
Hi i was facing problem with filtering out the most recent data from my data file. I have the following data var data= [ {"id":1,"speed":50,time:10:51.30}, {"id":1,"speed":40,time:10:51.40}, {"id":1,"speed":60,time:10:51.50}, {"id":1,"speed":55,time:10:51.55}, {"id":2,"speed":55,time:10:51.50}, {"id":2,"speed":65,time:10:51.58} ] I want to filter out the data to visualize or show the data with most recent time. So my...

D3.js Enter, Update, Exit issue

javascript,d3.js,charts,updates
I have a relatively simple barchart. I want to .transition() between datasets with an .on("click") event. What I'm getting is a complete redraw of an additional chart appended to the DOM id, instead of removing the original chart and transitioning or replacing it. I think I'm misunderstanding how to correctly...

Combining Bivariate Graph with Line Graph in a single chart

javascript,d3.js
I am facing a difficult task in combining the Bivariate Area Graph with Line Graph in a single graph d3.js. If I am successful with the bivariate area graph i am not able to draw a line chart in the same graph and vice versa. Either one is working for...

D3js Bind path `d` attribute to data

javascript,svg,d3.js
I'm trying to find the proper way to dynamically generate a path. I'm following DashingD3js' pattern for creating SVG Paths with D3js. My question is, apart from checking each index in the accessor function and manipulating the value, and apart from creating variables that represent specific points that I want...

Calculate absolute position for d3 graph nodes

javascript,d3.js
I have a d3 force layout. Each node in this force layout has a label, which is a <div> code(can have table inside) and should follow it all the time. I defined the <div>'s position to be absolute and set their position like this: var updateNode = function() { label_xOffset=10;...

How to download a json file from S3 via d3.json

javascript,json,d3.js,amazon-s3
I have setup a S3 bucket and upload there some json files. Each file has Content-type: application/json. The files accessible via URL, if I type it in the browser or use wget, I can download it without any problem. But if I try to download this file via d3.json or...

adding objects into an existing object

javascript,json,object,d3.js
I need to load an external JSON file using a d3.json function which for eg. has this format {"pole":[{"name": "p1"}, {"name":"p2"}]} In the main file, I would have var MainData ={}; d3.json("url", function(graph){MainData[graph] = graph;}); gives me the external JSON object pushed inside MainData. But I would lie to be...

Inserting a line break in text element in d3

javascript,d3.js
Referring to this graph, I would like to insert a line break in the text value for each data-point var labels = svg.selectAll('text') .data(monthlySales) .enter() .append('text') .text(function(d) { return d.stock + "\n " + d.count; }). I currently have something like the above. It does not insert any line break...

Change axis displayed value in D3

d3.js,label,axis
I would like to change the value of the y-axis in my graph, such as, instead of displaying [0,18], it displays [-18,0]. My initial code for the axis is: var y = d3.scale.linear().range([height, 0]); var yAxis = d3.svg.axis() .scale(y) .orient("left"); and I tried to modify it like this: var yAxisInv...

Difference between D3.js vs D3.min.js

d3.js
What is the difference between D3.js and D3.min.js files? It seems enough to include only D3.min.js. What is D3.js for then? Even http://d3js.org/ page suggests to get d3.min.js from internet and include into the body <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> When I extract downloaded zip from http://d3js.org/ i get both d3.js and...

Why d3js exit().remove() don't work?

d3.js
I'm new to d3js, in my understanding. // links is an array and id is unique key var pathData = paths.data(links, function(d) {return d.id;}); pathData.enter().append('').attr() ... // in there will be delete all the duplicate items pathData.exit().remove(); But in my code, it recreate a node. Here is my full code...

How to calculate the data for yaxis manually?

d3.js
I'm using d3.js with Reactjs and trying to let Reactjs handle all the dom manipulation and let d3.js just do the math for the graph(s). This is fairly straightforward, except that I'm having difficulty with the yAxis. Usually (when not using Reactjs) I create the yAxis like this var yAxis...

D3.js collapsable tree - visualise set number of levels

javascript,jquery,d3.js,tree
I'm playing around with this example of collapsible tree: http://bl.ocks.org/mbostock/4339083 In this example initially only the root and all of its children are visualized. I was wondering how one could visualize set number of levels (for example the root and two additional levels, meaning the root, its children, and children...

Partition layout with different value functions

d3.js
I am trying to implement the partition layout and have the user decide upon the value function. A radio button marks the currently used attribute which is passed on to the value function. A working implementation by Mike Bostock (for sunburst) is here: http://bl.ocks.org/mbostock/4063423 My example (see JSFiddle: http://jsfiddle.net/ee2todev/3tsogbz6/ )tries...

How can I nest GeoJSON / TopoJSON geometries OR nest the generated paths with D3?

javascript,svg,d3.js,geojson,topojson
Problem: I'm attempting to create an interactive map of the US in which state, county and national boundaries are displayed. Counties are shaded based on data, and hovering over a state should highlight all counties in the state, and the state should be clickable. I want to achieve this by...

svg bar chart fails to render on plnkr

d3.js
Not sure if this is a plnkr issue or an issue with my code.. although the console is not showing any errors. I am writting a little svg script and it does not render. var w = 300; var h = 100; var padding = 2; var dataset = [5,...

Bars on D3 Bar Graph not showing up

javascript,d3.js,bar-chart
I've been staring at this code for hours now and maybe it's obvious or just needs a fresh set of eyes, but I am desperate to figure out why the bars on the graph aren't showing up?? Here is the fiddle for it: http://jsfiddle.net/u7zs3jwo/1/ Here's the JSON: var bardata =...

Creating a sunburst diagram with dynamically chosen data source using D3

javascript,d3.js,sunburst-diagram
I am trying to create an interactive sunburst diagram using D3, where the user can select a data source from a dropdown menu. Once the data source is selected, any existing sunburst would be erased and redraw using the new data. This is based off the D3 example called "Sequences...

Change size of bubble in Scatter Plot for c3.js

javascript,d3.js,c3.js
I have a scatter plot charge where i want to change the size of the dots to make them look like bubble. Can someone show me how to change size of the bubble? Here is my code: var chart = c3.generate({ data: { xs: { IBM: 'ibm_x', Microsoft: 'microsoft_x', },...

x >= x pattern in JavaScript

javascript,d3.js
When reading source of D3.js I saw x >= x pattern. If it is for detecting NaNs among numbers, why not just isNaN(x) or x == x? Source, where I encountered it: d3.min = function(array, f) { var i = -1, n = array.length, a, b; if (arguments.length === 1)...

unable to get d3.layout.stack to fill out d3.svg.area

javascript,d3.js
I am trying to use a d3 streamgraph with my own data instead of the random data provided in the example (http://bl.ocks.org/mbostock/4060954). var d3Data = [ {"label" : 0, "value1":105, "value2":95}, {"label" : 1, "value1":95, "value2":115}, {"label" : 2, "value1":85, "value2":75}, {"label" : 3, "value1":75, "value2":175}, {"label" : 4, "value1":85,...

Query SQL data in Flask to use for charting without using the app.route decorator [closed]

python,sql-server,d3.js,flask
I am trying to query a SQL server in Flask, so that I can plot the data using d3.js. The way I've seen some people doing it (e.g. here) seems to be like this Create a function that retrieves the data Use the @app.route(/get_data) decorator Use the URL in d3.js...

How can I display greek letters in D3 svg.text objects?

javascript,svg,d3.js
I am using D3 and want to add the greek letter delta. This is in the tag of my HTML: <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> This is where the problem lies: 'bars' is a variable that stores a selection of class '.bar' and...

D3 how to remove tick dots from opaque scale

javascript,html,css,d3.js
I have d3.scale.linear object. Using css I made that scale opaque: .axis .domain { visibility: hidden; } .axis .halo { fill: none; stroke: #ccc; stroke-opacity: .5; stroke-width: 17px; } (example code taken from http://bl.ocks.org/mbostock/6452972 ) as you can see, there are still some dots left from scale ticks. I tried...

Embed D3.js with iframe

javascript,html,iframe,d3.js
I'm trying to create an iframe from JavaScript and embed D3 with in the iframe.like this var iDiv = document.createElement('div'); iDiv.id = 'block'; document.getElementsByTagName('body')[0].appendChild(iDiv); var target = document.getElementById("pp12"); var container=d3.select("#block").append("svg") .attr("width", 200) .attr("height", 200) .style("border", "1px solid black"); var iframe = document.createElement('iframe'); iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(iDiv); document.body.appendChild(iframe);...

Rotate rectangle with 4 points using Angular

javascript,angularjs,d3.js,rotation
I have a rectangle that drawn with 4 points. I need to rotate all points an arbitrary degree and find the new x,y of the points.I try to rotate these but the problem is when I'll increase the degree, rectangle Becomes smaller and when I'll decrease the degree, the first...

Plotting trend line with actual values in d3 line chart with angular

javascript,angularjs,d3.js
I am trying to plot actual values along with trend line using angular and D3. I read many tutorials but couldn't understand how we can access muliple variables of controller in d3. I have following data in controller: $scope.salesData=[ {hour: 1997,sales: 205000}, {hour: 1998,sales: 305000}, {hour: 1999,sales: 405000}, ]; $scope.lrResults...