My data has a field (let's call it Kind) which for internal purposes is a short string (short-form), but which has a mapping to rather verbose strings (long-form), intended for presentation. For example:
// Not the real values, but you get the idea...
var kind_map = {'c2a': "Collected Compound Allocations",
'dee': "Digital Extrapolated Exponents", ...};
Among my visualization widgets there is a pie chart that summarizes the data with respect to Kind. Since the long-form strings are the ones I intend to display, I have arranged to display them out of the pie slices (see this question). However, as you will notice in this example fiddle, during transitions the legend items revert to their original filter values, which are the short-form strings. I want to avoid that, but have been unsuccessful so far. I have tried also modifying the filterPrinter, filterHandler and others, but the behavior persists.
My code is as follows:
cxf = crossfilter(raw_data); //raw_data comes from d3.csv, json, whatever
kind_D = cxf.dimension( function(d) { return d.Kind; } );
kind_G = kind_D.group().reduceSum( function(d) { return d.Value; });
kind_chart = dc.pieChart('#kind-chart');
kind_chart.width(a_width)
.height(a_height)
.radius(a_radius)
.dimension(kind_D)
.group(kind_G)
.legend( dc.legend().x(this.groups_base_dim).y(50).gap(10) );
// Expand the group's legend with verbose group names from the JSON config
var kind_name_render = function(chart) {
chart.selectAll(".dc-legend-item text")
.html( function (d, i) {
return kind_map[d.name];
});
}
kind_chart.on("postRedraw", kind_name_render);
kind_chart.on("postRender", kind_name_render);
You may be able to use the new data function in 2.0 to apply a transform to the keys returned by the group.
Related
I have a group for which elements after reduction look like this pseudocode :
{
key:"somevalue",
value: {
sum: the_total,
names:{
a: a_number,
b: b_number,
c:c_number
}
}
}
In my dc-js geoChoropleth graph the valueAccessor is (d) => d.value.sum
In my title, I would like to use the names component of my reduction. But when I use .title((d) => {...}), I can onjly access the key and the value resulting from the valueAccessor function instead of the original record.
Is that meant to be ?
This is a peculiarity of the geoChoropleth chart.
Most charts bind the group data directly to chart elements, but since the geoChoropleth chart has two sources of data, the map and the group, it binds the map data and hides the group data.
Here is the direct culprit:
_renderTitles (regionG, layerIndex, data) {
if (this.renderTitle()) {
regionG.selectAll('title').text(d => {
const key = this._getKey(layerIndex, d);
const value = data[key];
return this.title()({key: key, value: value});
});
}
}
It is creating key/value objects itself, and the value, as you deduced, comes from the valueAccessor:
_generateLayeredData () {
const data = {};
const groupAll = this.data();
for (let i = 0; i < groupAll.length; ++i) {
data[this.keyAccessor()(groupAll[i])] = this.valueAccessor()(groupAll[i]);
}
return data;
}
Sorry this is not a complete answer, but I would suggest adding a pretransition handler that replaces the titles, or alternately, using the key passed to the title accessor to lookup the data you need.
As I noted in the issue linked above, I think this is a pretty serious design bug.
How to remove custom records from any dimension. In the below case how do I filter only category 'S' and allow rest of them in dimension ?
Example
let data = [
{category:'A',value:10},
{category:'B',value:11},
{category:'S',value:12},
{category:'A',value:14},
{category:'B',value:12},
]
let ndx = crossfilter(data);
let dim= ndx.dimension(function(d){
if(d.category != "S") return d.category;
})
This above code runs into loop and the application crashes. I don't want to create separate data for this dimension rather link it with other cross filters.
I guess its pretty simple, I did little research after posting the question.
Just manipulate the group parameter being passed to the chart. The code goes something like this.
Since I am trying to remove the value by key lets first write a function for further uses as well.
function removeByKey(source_group, value) {
return {
all: function() {
return source_group.all().filter(function(d) {
return d.key != value;
});
}
};
}
Once this is done the place where you call the group method for the charts call this method. The first parameter of removeByKey method is the group itself the second is the key value which is supposed to be removed from the chart.
chart
.dimension(dimension_data)
.group(removeByKey(dimension_data_group, 'S'))
Thanks :)
I have a method on a reusable chart that can be passed a selection and return a value if it is passed a d3.select('#id') selection or an array of values if it is passed a d3.selectAll('.class') selection. I'm currently interrogating the passed argument with context._groups[0] instanceof NodeList, but it feels a little fragile using an undocumented property, as that may change in future versions. Is there a more built in way of determining if a selection comes from select or selectAll?
selection.size() will not help here, as it only tells us the result of the selection, not how it was called.
EDIT:
Here's the context of the use. I'm using Mike Bostock's reusable chart pattern and this instance includes a method for getting/setting a label for a donut.
To me, this API usage follows the principle of least astonishment, as it's how I would expect the result to be returned.
var donut = APP.rotatingDonut();
// set label for one element
d3.select('#donut1.donut')
.call(donut.label, 'Donut 1')
d3.select('#donut2.donut')
.call(donut.label, 'Donut 2')
// set label for multiple elements
d3.selectAll('.donut.group-1')
.call(donut.label, 'Group 1 Donuts')
// get label for one donut
var donutOneLabel = d3.select('#donut1').call(donut.label)
// donutOnelabel === 'Donut 1'
// get label for multiple donuts
var donutLables = d3.selectAll('.donut').call(donut.label)
// donutLabels === ['Donut 1', 'Donut 2', 'Group 1 Donuts', 'Group 1 Donuts']
and the internal method definition:
App.rotatingDonut = function() {
var label = d3.local();
function donut() {}
donut.label = function(context, value) {
var returnArray;
var isList = context._groups[0] instanceof NodeList;
if (typeof value === 'undefined' ) {
// getter
returnArray = context.nodes()
.map(function (node) {return label.get(node);});
return isList ? returnArray : returnArray[0];
}
// settter
context.each(function() {label.set(this, value);});
// allows method chaining
return donut;
};
return donut
}
Well, sometimes a question here at S.O. simply doesn't have an answer (it has happened before).
That seems to be the case of this question of yours: "Is there a more built in way of determining if a selection comes from select or selectAll?". Probably no.
To prove that, let's see the source code for d3.select and d3.selectAll (important: those are not selection.select and selection.selectAll, which are very different from each other).
First, d3.select:
export default function(selector) {
return typeof selector === "string"
? new Selection([[document.querySelector(selector)]], [document.documentElement])
: new Selection([[selector]], root);
}
Now, d3.selectAll:
export default function(selector) {
return typeof selector === "string"
? new Selection([document.querySelectorAll(selector)], [document.documentElement])
: new Selection([selector == null ? [] : selector], root);
}
As you can see, we have only two differences here:
d3.selectAll accepts null. That will not help you.
d3.selectAll uses querySelectorAll, while d3.select uses querySelector.
That second difference is the only one that suits you, as you know by now, since querySelectorAll:
Returns a list of the elements within the document (using depth-first pre-order traversal of the document's nodes) that match the specified group of selectors. The object returned is a NodeList. (emphasis mine)
And querySelector only...:
Returns the first Element within the document that matches the specified selector, or group of selectors.
Therefore, the undocumented (and hacky, since you are using _groups, which is not a good idea) selection._groups[0] instanceof NodeList you are using right now seems to be the only way to tell a selection created by d3.select from a selection created by d3.selectAll.
I'm using d3.js for a project that involves an interactive map.
For testing, I'd just like to fire a function that changes the fill value for a selection of paths (these represent room outlines).
The paths are already drawn on the canvas.
The path ID value comes from another system.
I have JSON data that I wish to use to join on the paths to update their fill color. The join is based on a key value based on the .attr("id") of the path which will equal a same key value on the incoming json data.
When I fire off my function with a simple test array of strings that is local in the file, it works as expected and updates the fill color of the test group of 4 or 5 paths.
However, when I attempt to use my JSON data, I cannot get the paths to update.
The test array that works is just strings:
var handleColorLink = [
["125E0", "red"],
["BC5AC", "orange"],
["BC417", "red"],
["B13D9", "orange"]
];
The JSON data looks like:
[{"handle":"BC5AD","mycolor":"blue"},
{"handle":"125F6","mycolor":"blue"},
{"handle":"171A7","mycolor":"blue"},
{"handle":"17235","mycolor":"blue"},
{"handle":"17236","mycolor":"blue"}]
My hunch is that there is no match found on the JSON side key (handle).
code:
function TestFunction() {
d3.json("http://myjsonURL", function(data) {
d3.selectAll("path")
.datum(function(d) { return [d3.select(this).attr("id")]; })
.data(data, function(d) { return d.handle; }) //doesnt work
.style("fill", function(d) { return d.mycolor; }); //doesnt work
//.data(handleColorLink, function(d) { return d[0]; }) //works on string array
//.style("fill", function(d) { return d[1]; }); //works
});
}//end testfunction
Any help would be greatly appreciated.
A 'think outside the box' solution could be, since you know the test array works with your method, just transforming the JSON data into the same structure as your test array. Like this:
data = data.map(function(item) { return [item.handle, item.mycolor]; });
Then just use it as you are already doing in your d3.js code.
Just an idea ;)
Most of the examples in gallery load data from TSV files.
How can I convert the following to use a local json variable instead of TSV data?
d3.tsv("data.tsv", function(error, data) {
var myEntitiesJson = getEntitiesJson(); // <------ use this instead of "data"
data.forEach(function(d) {
d.frequency = +d.frequency;
});
x.domain(data.map(function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
...
svg.selectAll(".bar")
.data(data) // <----- bind to myEntities instead
}
As far as I can tell, I just need to do something to my entitiesJson, in order to data-fy it so that the chart could bind to it.
UPDATE
I am making some progress. I plugged in my entities from JSON and the graph is starting to take new shape.
Currently the following code breaks:
svg.selectAll(".bar")
.data(myEntities) // <-- this is an array of objects
.enter().append("rect")
This is causing:
Error: Invalid value for attribute y="NaN"
Error: Invalid value for attribute height="NaN"
for remote data.json
replace :
d3.tsv("data.tsv", function(error, data) {...}
with :
d3.json("data.json", function(error, data) {
console.log(data); // this is your data
});
for local data:
var myData = { {date:'2013-05-01', frequency:99},
{date:'2013-05-02', frequency:24} };
function draw(data) {
console.log(data); // this is your data
}
draw(myData);
There isn't a simple way to data-fy any given json, because not all json objects are the same shape.
By shape, I mean the way that the data is organized. For example, both '{"foo" : 1, "bar" : 2}' and '{"names" : ["foo", "bar"], "values" : [1, 2]}' could be used to store the same data, but one stores everything in an object in which the object keys correspond to the names of data points, and one uses separate arrays to store names and values, with corresponding entries having a common array index.
There is, however, a general process you can go through to turn json into data. First, you'll need to parse your json. This can be done with the javascript-standard JSON object. USe JSON.parse(myJson) to obtain data from your json object if it's already uploaded to the client. d3.json(my/json/directory, fn(){}) can both load and parse your json, so if you're loading it from elsewhere on your server, this might be a better way to get the json into an object.
Once you have your json packed into a javascript object, you still need to data-fy it, which is the part that will depend on your data. What d3 is going it expect is some form of array: [dataPoint1, dataPoint2, ...]. For the two examples I gave above, the array you would want would look something like this:
[{'name' : 'foo', 'value' : 1}, {'name' : 'bar', 'value' : 2}]
I've got one element in my array for each data point, with two attributes: value and name. (In your example, you would want the attributes letter and frequency)
For each of my examples, I would use a different function to create the array. With this line in common:
var rawData = JSON.parse(myJson);
My first json could be packed with this function:
var key;
var data = [];
for(key in rawData){
if(rawData.hasOwnProperty(key)){
data.push({'name' : key, 'value' : rawData[key]});
}
}
For the second example, I would want to loop through each attribute of my object, names, and values. My code might look like this:
var i;
var data = [];
for(i = 0; i < rawData.names.length; i++){
data.push({'name' : rawData.names[i], 'value' : rawData.values[i]});
}
Both of these will yield a data-fied version of my original JSON that I can then use in d3.
For D3js v2 or v3 (not sure which one).
Declare your dataset
var dataset = {
"first-name": "Stack",
"last-name": "Overflow",
}; // JSON object
var dataset = [ 5, 10, 15, 20, 25 ]; // or array
As stated by the doc, you can use either:
an array of numbers or objects, or a function that returns an array of values
Bind it
d3.select("body").selectAll("p")
.data(dataset)
.enter()
.append("p")
.text("New paragraph!");
More explanation at Scott Murray's D3's tutorial#Binding data.
The data() function apply to a selection, more information can be found in the official documentation: selection.data([values[, key]]).
You can change the json into a javascript file that assigns the data to a global value. Taking https://bl.ocks.org/d3noob/5028304 as an example:
From:
<script>
.....
// load the data
d3.json("sankeygreenhouse.json", function(error, graph) {
var nodeMap = {};
graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
To:
<script src="graphData.js"></script>
<script>
.....
var nodeMap = {};
graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
Note that we've removed the need for the callback.
The json file was "sankeygreenhouse.json":
{
"links": [
{"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},
Now, in "graphData.js":
var graph = {
"links": [
{"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},
Just change data to an array of objects like this:
let data = [{"apples":53245,"oranges":200},{"apples":28479,"oranges":200},{"apples":19697,"oranges":200},{"apples":24037,"oranges":200},{"apples":40245,"oranges":200}]
and comment out the d3.tsv("data.tsv", function(error, data) {...
Why not simply transform your json to tsv as described by Rob here?
d3 expects the data or, said in another way, needs the data in a particular format: tsv.The easiest way to resolve your problem is simply formatting your data from json to tsv, which can be done easily using Rob's comments.