We Keep Coding

d3 Pie chart with one object key /value

Hello I am quite new with d3 and javascript. I am trying to display a pie chart with one object filled with mutiple keys and values.
Here my object :
dataset Object { $Allied Health Professions, Dentistry, Nursing and Pharmacy: 4, $Psychology, Psychiatry and Neuroscience: 4, $Biological Sciences: 4, $General Engineering: 4, $Architecture, Built Environment and Planning: 4, $Geography, Environmental Studies and Archaeology: 4, $Business and Management Studies: 4, $Law: 4, $Social Work and Social Policy: 4, $Education: 4, 5 de plus… }
My code is quite long and in mutiple files so I don't think it's relevant to link it.
I succeed to load a pie chart with a simple array but I do not know how to access the values here.

D3 data method accepts 3 things:
An array;
A function;
Nothing;
Therefore, you have to convert that object in an array of objects, with a specific property for the category and a property for the value. For instance:
var obj = {
"Allied Health Professions, Dentistry, Nursing and Pharmacy": 4,
"Psychology, Psychiatry and Neuroscience": 4,
"Biological Sciences": 4,
"General Engineering": 4,
"Architecture, Built Environment and Planning": 4
};
var data = [];
for (var key in obj) {
data.push({
name: key,
value: obj[key]
})
};
console.log(data)
Here is a basic demo with a portion of your object:
var obj = {
"Allied Health Professions, Dentistry, Nursing and Pharmacy": 4,
"Psychology, Psychiatry and Neuroscience": 4,
"Biological Sciences": 4,
"General Engineering": 4,
"Architecture, Built Environment and Planning": 4
};
var data = [];
for (var key in obj) {
data.push({
name: key,
value: obj[key]
})
};
var arc = d3.arc().outerRadius(100).innerRadius(0);
var pie = d3.pie().value(function(d) {
return d.value
});
var colors = d3.scaleOrdinal(d3.schemeCategory10)
var svg = d3.select("svg")
.append("g")
.attr("transform", "translate(100,100)")
svg.selectAll(null)
.data(pie(data))
.enter()
.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return colors(i)
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="200" height="200"></svg>

Invalid value for <circle> attribute r="NaN" in D3 scatterplot code

I am getting a NaN error on the r value in a d3 scatterplot.
Console error: Error: Invalid value for attribute r="NaN"
From this section of the code:
g.selectAll(".response")
.attr("r", function(d){
return responseScale(d.responses);
})
.attr("cx", function(d){
return x(d.age);
})
.attr("cy", function(d){
return y(d.value);
})
Here is how the scale is set up:
var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
return d.responses;
}))
.range(2, 15);
Here is a sample of the data:
var data = [
{glazed: 3.14, jelly: 4.43, powdered: 2.43, sprinkles: 3.86, age: 18, responses: 7},
{glazed: 3.00, jelly: 3.67, powdered: 2.67, sprinkles: 4.00, age: 19, responses: 3},
{glazed: 2.00, jelly: 4.00, powdered: 2.33, sprinkles: 4.33, age: 20, responses: 3},
I have tried putting a plus sign in front of d.responses and using parseFloat().
The code is an example used in this course, Learning to Visualize Data with D3.js (chapter on Creating a Scatterplot)
Any suggestions would be greatly appreciated!

In your code:
var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
return d.responses;
}))
.range(2, 15);
The parameter for the range() function should be an array of values, like this: .range([2,15]);
corrected scale:
var responseScale = d3.scale.linear()
.domain(d3.extent(data, function(d){
return d.responses;
}))
.range([2, 15])
;
More info on scales can be found here. If you are still in trouble, let me know!

jSon to D3js grouping data from nested arrays

I'm very new to doing anything with d3 and jSon. Here is a pice of data I'm trying to get out from json and I would just like to know if I'm even on the right path.
Basically each status group would have more servers inside than just one like at the moment and the idea would be to get rectangle graph for one server and list these nicely next to each other.
I've been reading a lot of tutorials and trying to browse for similiar kind of issues other people might've had, but so far had really no luck...
jSon data I'm trying to pull out
[
{
"status": "ok",
"servers":
[
{
"id": "VR01",
"servername": "Server_1",
"cpu": 45, "mem": 25,
"diskIO": 0, "bandwith": 200
}
]
},
{
"status": "attention",
"servers":
[
{
"id": "VR10",
"servername": "Server_10",
"cpu": 55, "mem": 35,
"diskIO": 1, "bandwith": 2000
}
]
},
{
"status": "warning",
"servers":
[
{
"id": "VR02",
"servername": "Server_02",
"cpu": 98, "mem": 85,
"diskIO": 1,
"bandwith": 2000
}
]
},
{
"status": "dead",
"servers":
[
{
"id": "VR20",
"servername": "Server_20",
"cpu": 0, "mem": 0,
"diskIO": 0,
"bandwith": 0
}
]
}
]
the D3 bit
<script>
var width = ("width", 1000);
var height = ("height", 800);
d3.json("mydata.json", function(data) {
var canvas = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
var status = function sortData(data){
for (i = 0; i < d.length; i++) {
if(d.status ==="ok")
canvas.selectAll("rect")
.data(d.server)
.enter()
.append("rect")
.attr("x", 25)
.attr("y", function(d, i){return 25 * i;})
.attr("fill", "purple")
}
}
})
</script>
Really appreciate any suggestions you might have!

I think that it would be better to use nested selections to create your dashboard.
// Create one group for each server group
var serverGroup = svg.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', function(d, i) { return 'translate(0, ' + 50 * i + ')');
// Create the inner elements for each group
var servers = serverGroup.selectAll('rect')
.data(function(d) { return d.servers; })
.enter()
.append('rect')
// ... more settings here ...
This will create three groups, one for each group of servers and translate each one vertically. Each group contains the group data, so we can use the group data to create elements inside each group. Also, you can add a title, background color and other settings for each group using this structure. This article contains the concepts that you need to work on your problem: How Selections Work. Regards,

How to customize color in pie chart of NVD3

I am trying to use NVD3 http://nvd3.org/livecode/#codemirrorNav a pie chart. But i want to change the default color. How do i change the color. i am not able to do it.

If you want to use specific color for pie
chart.color(function(d){
return d.data.color
});
Then, organize your data as:
[
{
key: "Cumulative Return",
values: [
{
"label": "One",
"value" : 29.765957771107,
"color" : "#8c564b"
} ,
{
"label": "Three",
"value" : 32.807804682612,
"color" : "#e377c2"
}
]
}
]

You can add colors by passing an array to the 'color()' option. So just add:
.color(['blue', 'green', 'yellow'])
If you want to use these colors for 3 elements.
Note: if you have more than 3 elements, then some colors will be used multiple times.

To use your own colours you will have to override the existing colours, I prefer not to tinker around with the original code.
So this is what I did.
var myColors = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
d3.scale.myColors = function() {
return d3.scale.ordinal().range(myColors);
};
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true).color(d3.scale.myColors().range());
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
return chart;
});
All I did was add .color(d3.scale.myColors().range())
UPDATE :
Check answer by Christopher Chiche, for the perfect solution.
.color(['blue', 'green', 'yellow'])
Hope this helps.

Here is a note that got me, I was setting chart.color inside of nv.addGraph, this was not working correctly and would instead use the defaults. I then set it outside of this and it worked fine.

I use .color(function(d) {return [d.value > 0 ? 'blue' : 'red']}); to make it change color depending on data value.
Hope this help someone.

Here is the Typescript solution which is similar to the JS version. Let's say you want a Top 10 of your results with 10 different colors :
Here i'll give you the example that work for my PieChart or MultiBarChart
Create a global array of color like colors = ["#D9D9D9", "#4B11A6", ....];
The data has to be formatted in an Object : myGraph { key: "Title", values : { streams to push }}
Then when creating your data table just push the color for each stream :
let stream = {}; let data = []; let i=0;
dataTable.forEach((period) => {
stream = { 'label': period.key, 'value': period.value, 'color': this.colors[i] };
if(period.value !== 0) {
data.push(stream);}
i++;
});
this.myGraph = data;
The if condition is just there to prevent empty piece in the graph

I have used below concept to add custom color:
// for define variable of custom colors
var colors = ["red", "green", "blue"];
...
chart {
color: function(d,i){
return (d.data && d.data.color) || colors[i % colors.length]
}
}
For dynamic color based on JSON Data just add New json obj color such as below concept..
// or set custom colors directly in the data
data = [{
key: "One",
y: 5,
color: "yellow"
},{
key: "Two",
y: 2,
color: "gray"
},{
key: "Three",
y: 9
},
...
];

simple multi line graph with d3js

I have the following array
var data = [
[{"time": 1, "value": 2.1}, {"time": 2, "value": 1.1}],{"time": 3, "value": 3.1}],
[{"time": 1, "value": 5.3}, {"time": 2, "value": 0.1}, {"time": 3, "value": 6.1}]
];
and I need to find the maximum time and value out of the entire array. the code that doesn't quite work is
var x = d3.scale.linear()
.domain([1, d3.max(data, function(d,i){ return d[i].time;})])
.range([0, width]);
for some reason I get a maximum time of 2, and not 3. even if I use a larger dataset with more point I still don't get the actual maximum value.
Any help is appreciated.

Your data is an array or arrays. If you want the "max of the maxes", you'll need to account for the nesting. One way to do it:
.domain([1, d3.max(data, function(arrayOfDs, i) {
return d3.max(arrayOfDs, function(d, i) { return d.time; });
})])