How to retrieve the radius(or size) of a scatter plot on tooltip.
r : function(d) {
if (d.value != null) {
var size = datajson[k++]["total"];
return size;
}
I have done something like this..So the tooltip should show the size when i point on that bubble. How to achieve this?
thanks
You can add the size to the d object
r: function (d) {
if (d.value != null) {
var size = datajson[k++]["total"];
d.size = size;
return size;
}
}
and retrieve it when you show your tooltip
tooltip: {
contents: function (d) {
if (d[0].value != null) {
return d[0].size;
}
}
},
Fiddle - http://jsfiddle.net/f0cotcqp/
Related
Using the sortable table by Mingsong Hu I am displaying times and integers in some columns.
Here is the jsFiddle
I can get the time and integers to display, but is this the best way to do it? I feel it's a real hack!
The sortability of the table's columns is not working correctly. I think this is due to needing to be able to sort on times or alphabetically or on integers.
var rows = table.append('tbody').selectAll('tr')
.data(data).enter()
.append('tr');
rows.selectAll('td')
.data(function(d) {
return titles.map(function(k) {
return {
'category': d[k],
'name': k
};
});
}).enter()
.append('td')
.attr('data-th', function(d) {
return d.name;
})
.text(function(d) {
if (timeformat(d.category) == "NaN:NaN") {
return d.category
} else if (timeformat(d.category) == "00:00") {
return +d.category
} else {
return timeformat(d.category)
}
});
I have fixed it so that certain columns sort alphabetically and the rest numerically. Also I have fixed the time format for the display of times using typeof()=="object"
The updated jsFiddle also on github and demo on gh-pages.
Here's the new code,
var sortAscending = true;
var table = d3.select('#page-wrap').append('table');
var titles = d3.keys(data[0]);
var titles = ["raceplace", "name", "club", "clocktime", "category", "handicap", "racetime", "timeplace", "points"]
var headers = table.append('thead').append('tr')
.selectAll('th')
.data(titles).enter()
.append('th')
.text(function(d) {
return d
})
.on('click', function(d) {
headers.attr('class', 'header');
if (d == "name" || d == "club" || d == "category") { //these keys sort alphabetically
// sorting alphabetically");
if (sortAscending) {
rows.sort(function(a, b) {
return d3.ascending(a[d], b[d]);
});
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) {
return d3.descending(a[d], b[d]);
});
sortAscending = true;
this.className = 'des';
}
} else {
if (sortAscending) {
//all other keys sort numerically including time
rows.sort(function(a, b) {
return b[d] - a[d];
});
sortAscending = false;
this.className = 'aes';
} else {
rows.sort(function(a, b) {
return a[d] - b[d];
});
sortAscending = true;
this.className = 'des';
}
}
});
var rows = table.append('tbody').selectAll('tr')
.data(data).enter()
.append('tr');
rows.selectAll('td')
.data(function(d) {
return titles.map(function(key, i) {
return {
'value': d[key],
'name': d
};
});
}).enter()
.append('td')
.attr('data-th', function(d) {
return d.name;
})
.text(function(d) {
//console.log("typeof(" + d.value + "): " + typeof(d.value));
if (typeof(d.value) == "object") {
//console.log("Yippee it's an object");
return timeformat(d.value)
} else {
return d.value
}
});
I'm quite new to D3 and coding in general. I'm trying to set up a bar chart which includes/excludes data depending on a checkbox. I have a set of product groups and countries which I want to toggle in/out of the total represented by the bar. The output should be one bar per product.
My full data set has many more products, product groups and countries so it is not viable to create a key-value pair for each potential combination of checkboxes. Instead I would like to create a function that re-evaluates the checkboxes and re-filters the data and updates the rollup when a checkbox is changed.
I'm not sure where this function should sit in my code or what it should look like... This is what I'm working with at the moment:
var data = data.filter(function(d) {
if (document.getElementById("nz_button").checked) {
return d.country == 'NZ'
}
if (document.getElementById("au_button").checked) {
return d.country == 'AU'
}
if (document.getElementById("us_button").checked) {
return d.country == 'US'
}
})
// to see how many distinct groups there are and sum volume
var products = d3.nest()
.key(function(d) {
return d.product
})
.rollup(function(leaves) {
var sum = 0;
leaves.forEach(function(d) {
sum += d.volume;
})
return sum
})
.entries(data);
Full code: http://plnkr.co/edit/qezdwMLt48RPc8KH17hS?p=preview
Maybe I should be working with selections and re-running the nest/rollup when required?
Any help appreciated. Thanks :)
You can move the full code which makes the graph in a new function like this:
function makeDataGraph(data) {//function to make the graph.
//
// FILTER
//
var data = data.filter(function(d) {
if (document.getElementById("au_button").checked) {
return d.country == 'AU'
}
if (document.getElementById("us_button").checked) {
return d.country == 'US'
}
if (document.getElementById("nz_button").checked) {
return d.country == 'NZ'
}
})
// to see how many distinct groups there are and sum volume
var products = d3.nest()
.key(function(d) {
return d.product
})
.rollup(function(leaves) {
var sum = 0;
leaves.forEach(function(d) {
sum += d.volume;
})
return sum
})
.entries(data);
// sorting on descending total
console.log(products);
products.sort(function(a, b) {
return b.values - a.values
})
var max = d3.max(products, function(d) {
return d.values;
});
var xscale = d3.scale.linear()
.domain([0, max])
.range([0, 600])
var svg = d3.select("svg");
//
// Still needs to be cleaned up \/ \/
//
var rects = svg.selectAll("rect.product")
.data(products)
rects.exit().remove();
rects.enter().append("rect").classed("product", true)
rects.attr({
x: 200,
y: function(d, i) {
return 100 + i * 50
},
width: function(d, i) {
return xscale(d.values)
},
height: 50
}).on("click", function(d, i) {
console.log(i, d);
})
var labels = svg.selectAll("text.label")
.data(products)
labels.exit().remove();
labels.enter().append("text").classed("label", true)
labels.attr({
x: 195,
y: function(d, i) {
return 128 + i * 50
},
"text-anchor": "end",
"alignment-baseline": "middle"
}).text(function(d) {
return d.key || "N/A"
})
var volume = svg.selectAll("text.volume")
.data(products);
volume.exit().remove();
volume.enter().append("text").classed("volume", true)
volume.attr({
x: function(d, i) {
return 205 + xscale(d.values)
},
y: function(d, i) {
return 128 + i * 50
},
"text-anchor": "start",
"alignment-baseline": "middle"
}).text(function(d) {
return d.values || "N/A"
})
}
Remember to do rects.exit().remove(); so that when the data is changed on click of the checkbox, rectangles related to old data is removed.
Now you can call this function from the click event and also afterloading the tsv like this:
d3.tsv("data.tsv", function(err, udata) {
var udata = udata.map(process);
console.log("udata", udata);
var data = udata // making new var to preserve unfiltered data
makeDataGraph(data);//call the function to make graph
function handleClick() { // event handler...
makeDataGraph(data)
}
//add listener to all check boxes.
d3.selectAll(".filter_button").on("click", handleClick);
});
working code here
currently my pie chart in d3 shows the sum of numbers,i want percentage instead .
for eg: currently i have a pie chart for how many people submitted application who visited our site. our current pie chart shows like this : people submitted 17,000 and people didn't submitted-10,000
but i need this in percentage also. how can i get that.
please find the pie code below and let me know what changes do i need to make this work. I am new to JavaScript and D3.
ko.bindingHandlers.pieChart = {
init: function (element, valueAccessor) {
var _options = valueAccessor();
var _data = _options.transformer(_options.data);
$(element).css("marginLeft", "auto");
$(element).css("marginRight", "auto");
if (typeof _options.maxWidth != "undefined") {
var _max = _options.maxWidth * 1;
$(element).width(Math.min($(element).parent().width(), _max));
}
if ($(element).find("svg").length > 0 && _data.length == 0) {
$(element).find("svg").empty();
}
if (_data.length > 0 && isNaN(_data[0].value)) {
_data = [];
$(element).find("svg").empty();
}
if ($(element).is(":visible")) {
nv.addGraph(function () {
var _chart = nv.models.growingPieChart()
.x(function (d) {
return d.label
})
.y(function (d) {
return d.value
})
.height($(element).width())
.showLabels(true).showLegend(false)
.tooltipContent(function (key, y, e, graph) {
return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + y + '</p>'
});
var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
_d3.datum(_data)
.transition().duration(150)
.each("end", _options.onComplete != null ? _options.onComplete : void(0))
.call(_chart);
if (_options.fqs) {
$.each(_options.fqs(), function (cnt, item) {
if (item.id() == _options.data.widget_id && item.field() == _options.field()) {
_chart.selectSlices($.map(item.filter(), function (it) {
return it.value();
}));
}
});
}
$(element).data("chart", _chart);
var _resizeTimeout = -1;
nv.utils.windowResize(function () {
window.clearTimeout(_resizeTimeout);
_resizeTimeout = window.setTimeout(function () {
_chart.update();
}, 200);
});
$(element).on("forceUpdate", function () {
_chart.update();
});
$(element).height($(element).width());
var _parentSelector = typeof _options.parentSelector != "undefined" ? _options.parentSelector : ".card-widget";
$(element).parents(_parentSelector).on("resize", function () {
if (typeof _options.maxWidth != "undefined") {
var _max = _options.maxWidth * 1;
$(element).width(Math.min($(element).parent().width(), _max));
}
$(element).height($(element).width());
_chart.update();
});
return _chart;
}, function () {
var _d3 = ($(element).find("svg").length > 0) ? d3.select($(element).find("svg")[0]) : d3.select($(element)[0]).append("svg");
_d3.selectAll(".nv-slice").on("click",
function (d, i) {
if (typeof _options.onClick != "undefined") {
chartsUpdatingState();
_options.onClick(d);
}
});
});
}
},
update: function (element, valueAccessor) {
var _options = valueAccessor();
var _data = _options.transformer(_options.data);
var _chart = $(element).data("chart");
if (_chart) {
var _d3 = d3.select($(element).find("svg")[0]);
_d3.datum(_data)
.transition().duration(150)
.each("end", _options.onComplete != null ? _options.onComplete : void(0))
.call(_chart);
if (_options.fqs) {
$.each(_options.fqs(), function (cnt, item) {
if (item.id() == _options.data.widget_id && item.field() == _options.field()) {
_chart.selectSlices($.map(item.filter(), function (it) {
return it.value();
}));
}
});
}
chartsNormalState();
}
else if (_data.length > 0) {
ko.bindingHandlers.pieChart.init(element, valueAccessor);
}
}
};
A fiddle would be useful to test this against (hint hint), but I'm pretty sure you want to change this line:
.y(function (d) {
return d.value
})
to this
.y(function (d) {
return d.value/total
})
You may have to define total. Like I said, without a jsfiddle or at least some indication of the format of your data, it's hard to determine if this is actually what's wrong or how to fix it.
Note: a pie chart of relative percentages will look exactly the same as a pie chart of the original numbers. You might be able to change the label and only the label, as follows:
return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + y + '</p>'
to this
return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' + (y/total) + '</p>'
Hopefully both of those should work. You will have to define total, if it isn't already defined elsewhere. If not:
var total = 0;
_data.forEach(function(d){total += d.value});
Good luck!
It would be even more helpful to include information such as the library you are using and a fully reproducible example using a gist, codepen, jsfiddle, etc. I am guessing you are using hue and more specifically growingPieChart. If my guesses are correct, then you can modify your tooltipContent function similar to #Vyross answer that posted while I was typing this.
.tooltipContent(function (key, y, e, graph) {
return '<h3>' + hueUtils.htmlEncode(key) + '</h3><p>' +
(+y) / d3.sum(
d3.select(graph.container).select('g').datum(),
function(d){return d.value}
) +
'</p>'
});
I made a heat map with dc.js and I was wondering if there is a key or a legend function for heat maps in dc.js. I have searched the internet and can't seem to find a built in way of doing it, so has anyone else tackled this problem?
I faced this same task and what I did is I made a second heat map that is one row long from the min value to the max value.
var range = maxValue - minValue;
var heatArr = [];
for (var i = 0; i < 24; i++) {
heatArr.push({
val: minValue + i / 23 * rangeValue,
index: i
});
}
var ndx = crossfilter(heatArr);
var keyHeatmap = ndx.dimension(function(d) {
return [d.index, 1];
});
var keyHeatmapGroup = keyHeatmap.group().reduceSum(function(d) {
return d.val;
});
var heatmapChart = dc.heatMap("#heatmapKey");
var heatColorMapping = function(d) {
return d3.scale.linear().domain([minValue, maxValue]).range(["blue", "red"])(d);
};
heatColorMapping.domain = function() {
return [minValue, maxValue];
};
heatmapChart.width(400)
.height(80)
.dimension(keyHeatmap)
.group(keyHeatmapGroup)
.colorAccessor(function(d) {
return d.value;
})
.keyAccessor(function(d) { return d.key[0]; })
.valueAccessor(function(d) { return d.key[1]; })
.colsLabel(function(d){
return heatArr[d].val.toFixed(0);
})
.rowsLabel(function(d) {
return "Key";
})
.transitionDuration(0)
.colors(heatColorMapping1)
.calculateColorDomain();
heatmapChart.xBorderRadius(0);
heatmapChart.yBorderRadius(0);
minValue and maxValue were found in my original heat map. My final result looked like this:
My goal is to override the function used by NVD3 for the content of a tooltip.
I found the function that provides this behaviour: contentGenerator.
Below here the code:
var contentGenerator = function(d) {
if (content != null) {
return content;
}
if (d == null) {
return '';
}
var table = d3.select(document.createElement("table"));
var theadEnter = table.selectAll("thead")
.data([d])
.enter().append("thead");
theadEnter.append("tr")
.append("td")
.attr("colspan",3)
.append("strong")
.classed("x-value",true)
.html(headerFormatter(d.value));
var tbodyEnter = table.selectAll("tbody")
.data([d])
.enter().append("tbody");
var trowEnter = tbodyEnter.selectAll("tr")
.data(function(p) { return p.series})
.enter()
.append("tr")
.classed("highlight", function(p) { return p.highlight});
trowEnter.append("td")
.classed("legend-color-guide",true)
.append("div")
.style("background-color", function(p) { return p.color});
trowEnter.append("td")
.classed("key",true)
.html(function(p) {return p.key});
trowEnter.append("td")
.classed("value",true)
.html(function(p,i) { return valueFormatter(p.value,i) });
trowEnter.selectAll("td").each(function(p) {
if (p.highlight) {
var opacityScale = d3.scale.linear().domain([0,1]).range(["#fff",p.color]);
var opacity = 0.6;
d3.select(this)
.style("border-bottom-color", opacityScale(opacity))
.style("border-top-color", opacityScale(opacity))
;
}
});
var html = table.node().outerHTML;
if (d.footer == undefined)
html += "<div class='footer'>" + d.footer + "</div>";
return html;
};
Now, I'd like to put inside my chart section the function to override this method.
var chart = nv.models.lineChart()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.useInteractiveGuideline(false)
.tooltipContent(function (key, x, y, e, graph) {
return contentGenerator
});
How Can I achieve this goal?
I wanted to customise:
1) In the header add a simple text
2) Add a footer