d3.js

Changing the colors of each of the Stacked Bar chart with different Color in D3

由 元气小坏坏 提交于 2019-12-31 04:39:27
问题 This involved the assignment of different colors to each bars of the stacked bar charts as currently there is only single color in all the four bars and colors are changing in the stacked one but I am trying to assign different colors to all the four bars as well the stacked value. Here is the code var margin = { top: 20, right: 160, bottom: 35, left: 30 }; var width = 960 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; var svg = d3.select("body") .append("svg") .attr

line segmentation in D3.js

由 六眼飞鱼酱① 提交于 2019-12-31 04:30:28
问题 I have created a line connecting various data points in D3, as part of a music visualization project: However, I need to color various line segments differently. I did this by creating multiple lines instead of using the line() generator (that is, one line per segment), however I lost my most-wanted interpolation this way: Notice: The stroke color will be different not only at the beginning but also in other segments of the line, as well. So, I would like to ask, whether there is a way to

exit().remove() doesn't remove node when it goes out of view

由 痴心易碎 提交于 2019-12-31 04:09:08
问题 I'm using d3js to move circular dots from right to left with respect to current time. I have a couple of issues: 1. .exit().remove() don't work. Node doesn't get removed once it goes out of the view. 2. Transition of circles are a bit jumpy var circles = g.selectAll('path') circles.data(data) .enter() .append('path') .attr("d", symbol.type(d3.symbolCircle)) .merge(circles) .attr("transform", (d) => "translate(" + x(d.x) + "," + y(d.y) + ")"); circles.exit().remove(); You can see my full code

Put a real coordinate on a map in d3.js

由 烂漫一生 提交于 2019-12-31 03:56:26
问题 I currently have an animation that moves a circle from the centroid of a region corresponding to one department, to another. var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "M" + centroids.ANTIOQUIA[0] + "," + centroids.ANTIOQUIA[1] + " Q" + centroids.BOYACA[0] + "," + centroids.ANTIOQUIA[1] + " " + centroids.BOYACA[0] + "," + centroids.BOYACA[1]); var circle = g.append("circle") .attr("fill", "blue") .attr("r", 4) .style(

tickformat for d3.js time scale

由 醉酒当歌 提交于 2019-12-31 03:54:49
问题 I am using a d3.js time.scale like this: var xScale = d3.time.scale() .domain(d3.extent(data, function(d) { return d.date; })) .range([0, chartWidth]); The data is like this: var testData = [ { "date": "2015-04-01T00:00:00.000Z", "value": 200.00 }, { "date": "2015-05-01T00:00:00.000Z", "value": 2000.00 }, { "date": "2015-06-01T00:00:00.000Z", "value": 4000.01 }, { "date": "2015-07-01T00:00:00.000Z", "value": 1000.00 }, { "date": "2015-08-01T00:00:00.000Z", "value": 750.00 }, { "date": "2015

D3JS makes date duplicates

由 喜欢而已 提交于 2019-12-31 03:48:08
问题 I have this d3js code: var tooltip = tooltipd3(); var svg = d3.select("svg#svg-day"), margin = { top: 20, right: 30, bottom: 30, left: 25, padding: 15 }, width = 700 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; // parse the periodo / time var parseTime = d3.timeParse("%Y-%m-%d"); // set the ranges var x = d3.scaleTime().range([0, width - margin.padding]); var y = d3.scaleLinear().range([height, 0]); // define the area var area = d3.area() .x(function(d) { return x

D3 Dimple - How to show multiple dimple charts on same page?

由 北慕城南 提交于 2019-12-31 03:45:45
问题 I'm making an html page with several examples of charts that I will be using. On the page I have a Dimple line graph, a pie chart, a wordcloud etc. When I try to add a second dimple graph - this time a bar graph, the first dimple line graph that I already have on the page is drawn on top of my bar graph: My HTML file looks like this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D3 Graphs</title> <link rel="stylesheet" type="text/css" href="_/base.css"> <link rel=

How to move points in an orthogonal map?

由 主宰稳场 提交于 2019-12-31 03:43:30
问题 I am trying to add red points at certain geolocations on the following map created by Mike Bostock. https://bl.ocks.org/mbostock/3795040. My points show up but don't move with the map. How do I edit the code to make the points move with the map. Thank you. //add circles to svg svg.selectAll("circle") .data([wr,pt,sd,jp,fm]) .enter() .append("circle") .attr("cx", function (d) { console.log(projection(d)); return projection(d)[0]; }) .attr("cy", function (d) { return projection(d)[1]; }) .attr(

How to retrieve the key values of a nested data set in D3

由 核能气质少年 提交于 2019-12-31 03:23:06
问题 I am trying to add D3 visualizations to OBIEE and the first graph I need to accomplish is a multi-series line graph. The data is directly obtained from an OBIEE narrative view in this format: var data = [ ]; data.push({category:"Cat1",date:"20130101",suma:9.11}); data.push({category:"Cat2",date:"20130101",suma:2.66}); data.push({category:"Cat3",date:"20130101",suma:18.00}); data.push({category:"Cat4",date:"20130101",suma:32.49}); data.push({category:"Cat5",date:"20130101",suma:37.74}); There

Creating a D3.js scatterplot with timeline using 'month-year' date values

由 旧街凉风 提交于 2019-12-31 02:53:05
问题 I have a dataset that lists dates as follows: var dataset = [ ["1-2006", 20], ["3-2009", 90], ["11-2004", 50], ["5-2012", 33], ["4-2008", 95], ["4-2004", 12], ["7-2000", 44], ["5-2006", 67], ["6-2007", 21], ["3-2001", 88] ]; I am trying to map these dates to a time scale on the x Axis and create a simple scatterplot with D3.js. Is it possible to create a scatterplot using a dataset with date values in the format shown above? I tried to create a min date and max date for the domain of my x
订阅 d3.js