Vega-lite heatmap add text to a variable - elasticsearch

"data": {
"values": [
{"x": 0, "y": 0, "z": 0},
{"x": 1, "y": 0, "z": 1},
{"x": 2, "y": 0, "z": 5},
{"x": 2, "y": 0, "z": 10},
{"x": 4, "y": 0, "z": 16},
{"x": 0, "y": 1, "z": 1},
{"x": 1, "y": 1, "z": 2},
{"x": 2, "y": 1, "z": 5},
{"x": 3, "y": 1, "z": 10},
{"x": 5, "y": 1, "z": 26}
]},
How to add text to a variable, so like "AVG:"?
Vega Editor


You can use a calculate transform to create specifically-formatted text to display in a text mark. For example (vega editor):
{
"data": {
"values": [
{"x": 0, "y": 0, "z": 0},
{"x": 1, "y": 0, "z": 1},
{"x": 2, "y": 0, "z": 5},
{"x": 2, "y": 0, "z": 10},
{"x": 4, "y": 0, "z": 16},
{"x": 0, "y": 1, "z": 1},
{"x": 1, "y": 1, "z": 2},
{"x": 2, "y": 1, "z": 5},
{"x": 3, "y": 1, "z": 10},
{"x": 5, "y": 1, "z": 26}
]
},
"transform": [
{
"aggregate": [{"op": "mean", "field": "z", "as": "z"}],
"groupby": ["x", "y"]
},
{"calculate": "'avg: ' + datum.z", "as": "z"}
],
"mark": "text",
"encoding": {
"x": {"field": "x", "type": "ordinal"},
"y": {"field": "y", "type": "ordinal"},
"text": {"field": "z", "type": "nominal"}
},
"width": 300,
"height": 100
}

Related

Drag and drop object on a SVG element in d3.js

I have an object (the skier on the image) that I want to be able to drag and drop on the line (the slope). My goal is to drag the skier up the slope, calculate the energy the skier has at that point, and when I drop him, he descends down the slope and then I calculate his speed based on the energy he had where he was the dropped.
I have managed to generate the line path but I don't know how I can limit the drag and drop area to to the line path that I have generated. I have tried to find relevant d3.drag() but I cannot find what I am looking. Some ideas how I can accomplish this?
Here is all my code:
const skierIconSvg = "skier.svg";
const margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
const svg = d3.select('body').append('svg')
.attr("width", width)
.attr("height", height)
const data = [
{"x": 1, "y": 100},
{"x": 2, "y": 99},
{"x": 3, "y": 98},
{"x": 4, "y": 97},
{"x": 5, "y": 96},
{"x": 6, "y": 95},
{"x": 7, "y": 94},
{"x": 8, "y": 93},
{"x": 9, "y": 92},
{"x": 10, "y": 91},
{"x": 11, "y": 90},
{"x": 12, "y": 89},
{"x": 13, "y": 88},
{"x": 14, "y": 87},
{"x": 15, "y": 86},
{"x": 16, "y": 85},
{"x": 17, "y": 84},
{"x": 18, "y": 83},
{"x": 19, "y": 82},
{"x": 20, "y": 81},
{"x": 21, "y": 80},
{"x": 22, "y": 79},
{"x": 23, "y": 78},
{"x": 24, "y": 77},
{"x": 25, "y": 76},
{"x": 26, "y": 75},
{"x": 27, "y": 74},
{"x": 28, "y": 73},
{"x": 29, "y": 72},
{"x": 30, "y": 71},
{"x": 31, "y": 70},
{"x": 32, "y": 69},
{"x": 33, "y": 68},
{"x": 34, "y": 67},
{"x": 35, "y": 66},
{"x": 36, "y": 65},
{"x": 37, "y": 64},
{"x": 38, "y": 63},
{"x": 39, "y": 62},
{"x": 40, "y": 61},
{"x": 41, "y": 60},
{"x": 42, "y": 59},
{"x": 43, "y": 58},
{"x": 44, "y": 57},
{"x": 45, "y": 56},
{"x": 46, "y": 55},
{"x": 47, "y": 54},
{"x": 48, "y": 53},
{"x": 49, "y": 52},
{"x": 50, "y": 51},
{"x": 51, "y": 50},
{"x": 52, "y": 49},
{"x": 53, "y": 48},
{"x": 54, "y": 47},
{"x": 55, "y": 46},
{"x": 56, "y": 45},
{"x": 57, "y": 44},
{"x": 58, "y": 43},
{"x": 59, "y": 42},
{"x": 60, "y": 41},
{"x": 61, "y": 40},
{"x": 62, "y": 39},
{"x": 63, "y": 38},
{"x": 64, "y": 37},
{"x": 65, "y": 36},
{"x": 66, "y": 35},
{"x": 67, "y": 34},
{"x": 68, "y": 33},
{"x": 69, "y": 32},
{"x": 70, "y": 31},
{"x": 71, "y": 30},
{"x": 72, "y": 29},
{"x": 73, "y": 28},
{"x": 74, "y": 27},
{"x": 75, "y": 26},
{"x": 76, "y": 25},
{"x": 77, "y": 24},
{"x": 78, "y": 23},
{"x": 79, "y": 22},
{"x": 80, "y": 21},
{"x": 81, "y": 20},
{"x": 82, "y": 19},
{"x": 83, "y": 18},
{"x": 84, "y": 17},
{"x": 85, "y": 16},
{"x": 86, "y": 15},
{"x": 87, "y": 14},
{"x": 88, "y": 13},
{"x": 89, "y": 12},
{"x": 90, "y": 11},
{"x": 91, "y": 10},
{"x": 92, "y": 9},
{"x": 93, "y": 8},
{"x": 94, "y": 7},
{"x": 95, "y": 6},
{"x": 96, "y": 5},
{"x": 97, "y": 4},
{"x": 98, "y": 3},
{"x": 99, "y": 2},
{"x": 100, "y": 1},
];
const xScale = d3.scaleLinear()
.domain([d3.min(data, function(d) { return d.x; }), d3.max(data, function(d) { return d.x; }) ])
.range([0, width]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.y; }) ])
.range([height, 0]);
const linje = d3.line()
.x(d => xScale(d.x))
.y(d => yScale(d.y))
const gLinje = svg.append("g")
const loypegenerator = gLinje.append("path")
.attr("d", linje(data))
.attr("stroke", "blue")
.attr("stroke-width", 1)
.attr("class", "loypeprofil")
.attr("fill", "none")
const newG = svg.append("g")
const nyLoypegenerator = newG.append("path")
.attr("d", linje(data))
.attr("stroke", "none")
.attr("stroke-width", 1)
.attr("class", "loypeprofil")
.attr("fill", "none")
// This finds the x coordinate on the G element using d3.mouse
nyLoypegenerator.append("rect")
.attr("height", height)
.attr("width", width)
.attr("fill", "none")
.attr("pointer-events", "all")
.on("mousemove", () => {
const x = d3.mouse(g.node())[1];
const hoveredX = yScale.invert(x)
console.log(hoveredX)
});
// Here I append the skier object
const skier = newG.append("image")
.attr("id", "skier")
.attr("href", skierIconSvg)
.attr("x", 130)
.attr("y", 150)
.attr("width", 100)
.attr("height", 100)
.call(d3
.drag()
.on('start', start)
.on('drag', dragged));
function start() {
let current = d3.select(this)
deltaX = current.attr("x") - d3.event.x;
deltaY = current.attr("y") - d3.event.y;
};
function dragged() {
d3.select(this)
.attr("x", d3.mouse(newG.node())[0])
.attr("y", d3.mouse(newG.node())[1])
};

Vega-lite heatmap "transform" isn't working right

1) There's a X - coordinate and Y - coordinate. There's a Z - value. Z needs to calculate AVG.
"data": {
"values": [
{"x": 0, "y": 0, "z": 0},
{"x": 1, "y": 0, "z": 1},
{"x": 2, "y": 0, "z": 5},
{"x": 2, "y": 0, "z": 10},
{"x": 4, "y": 0, "z": 16},
{"x": 0, "y": 1, "z": 1},
{"x": 1, "y": 1, "z": 2},
{"x": 2, "y": 1, "z": 5},
{"x": 3, "y": 1, "z": 10},
{"x": 5, "y": 1, "z": 26}
]},
If the data:
"encoding": {
"x": {"field": "x", "type": "ordinal", "title": "X"},
"y": {"field": "y", "type": "ordinal", "title": "Y"} },
then AVG that's right:
Vega Editor
If I use "transform" with "groupby" :
"transform": [ {"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}],
"encoding": {
"x": {"field": "x2", "type": "ordinal", "title": "X"},
"y": {"field": "y", "type": "ordinal", "title": "Y"}
},
then AVG it's not true:
Vega Editor

The transform is doing exactly what you're telling it to do:
{"window": [{"op": "count", "field": "x", "as": "x2"}], "groupby": ["y"]}
It groups your data by y. Schematically it looks like this:
y=0: x: [0, 1, 2, 2, 4]
z: [0, 1, 5, 10, 16]
y=1: x: [0, 1, 2, 3, 5]
z: [1, 2, 5, 10, 26]
Then it does a sliding window and assigns the count to x2:
y=0: x: [0, 1, 2, 2, 4]
z: [0, 1, 5, 10, 16]
x2: [1, 2, 3, 4, 5]
y=1: x: [0, 1, 2, 3, 5]
z: [1, 2, 5, 10, 26]
x2: [1, 2, 3, 4, 5]
As you can see, when you create a plot of y vs x2, there is now a single z value at each location, and this is correctly reflected in the chart that you show above.
If you want different behavior, you should specify a different transform.

Label only 10 N in D3 graph nodes

I have a force-directed graph in D3.js similar to this example.
With the data source for nodes having an additional key:value called connect. I only want to display node labels that have the top 10 count by the connect value. How should I go about it?
Thank you!
The associated sample data source this as below.
{
"nodes": [
{"name": "Myriel", "company": 1, "connect":10},
{"name": "Napoleon", "company": 1, "connect":1},
{"name": "Mlle.Baptistine", "company": 1, "connect":3},
{"name": "Mme.Magloire", "company": 1, "connect":3},
{"name": "CountessdeLo", "company": 1, "connect":1},
{"name": "Geborand", "company": 1, "connect":1},
{"name": "Champtercier", "company": 1, "connect":1},
{"name": "Cravatte", "company": 1, "connect":1},
{"name": "Count", "company": 1, "connect":1},
{"name": "OldMan", "company": 1, "connect":1},
{"name": "Labarre", "company": 2, "connect":1},
{"name": "Valjean", "company": 2, "connect":1},
{"name": "Marguerite", "company": 3, "connect":3},
{"name": "Mme.deR", "company": 2, "connect":1},
{"name": "Isabeau", "company": 2, "connect":1},
{"name": "Gervais", "company": 2, "connect":1},
{"name": "Tholomyes", "company": 3, "connect":1},
{"name": "Listolier", "company": 3, "connect":1},
{"name": "Fameuil", "company": 3, "connect":1},
{"name": "Blacheville", "company": 3, "connect":1},
{"name": "Favourite", "company": 3, "connect":1},
{"name": "Dahlia", "company": 3, "connect":1},
{"name": "Zephine", "company": 3, "connect":1},
{"name": "Fantine", "company": 3, "connect":1},
{"name": "Mme.Thenardier", "company": 4, "connect":1},
{"name": "Thenardier", "company": 4, "connect":1},
{"name": "Cosette", "company": 5, "connect":1},
{"name": "Javert", "company": 4, "connect":1},
{"name": "Fauchelevent", "company": 0, "connect":1},
{"name": "Bamatabois", "company": 2, "connect":1},
{"name": "Perpetue", "company": 3, "connect":1},
{"name": "Simplice", "company": 2, "connect":1},
{"name": "Scaufflaire", "company": 2, "connect":1},
{"name": "Woman1", "company": 2, "connect":1},
{"name": "Judge", "company": 2, "connect":1},
{"name": "Champmathieu", "company": 2, "connect":1},
{"name": "Brevet", "company": 2, "connect":1},
{"name": "Chenildieu", "company": 2, "connect":1},
{"name": "Cochepaille", "company": 2, "connect":1},
{"name": "Pontmercy", "company": 4, "connect":1},
{"name": "Boulatruelle", "company": 6, "connect":1},
{"name": "Eponine", "company": 4, "connect":1},
{"name": "Anzelma", "company": 4, "connect":1},
{"name": "Woman2", "company": 5, "connect":1},
{"name": "MotherInnocent", "company": 0, "connect":1},
{"name": "Gribier", "company": 0, "connect":1},
{"name": "Jondrette", "company": 7, "connect":1},
{"name": "Mme.Burgon", "company": 7, "connect":1},
{"name": "Gavroche", "company": 8, "connect":1},
{"name": "Gillenormand", "company": 5, "connect":1},
{"name": "Magnon", "company": 5, "connect":1},
{"name": "Mlle.Gillenormand", "company": 5, "connect":5},
{"name": "Mme.Pontmercy", "company": 5, "connect":1},
{"name": "Mlle.Vaubois", "company": 5, "connect":1},
{"name": "Lt.Gillenormand", "company": 5, "connect":1},
{"name": "Marius", "company": 8, "connect":1},
{"name": "BaronessT", "company": 5, "connect":1},
{"name": "Mabeuf", "company": 8, "connect":1},
{"name": "Enjolras", "company": 8, "connect":1},
{"name": "Combeferre", "company": 8, "connect":1},
{"name": "Prouvaire", "company": 8, "connect":1},
{"name": "Feuilly", "company": 8, "connect":1},
{"name": "Courfeyrac", "company": 8, "connect":1},
{"name": "Bahorel", "company": 8, "connect":1},
{"name": "Bossuet", "company": 8, "connect":1},
{"name": "Joly", "company": 8, "connect":1},
{"name": "Grantaire", "company": 8, "connect":1},
{"name": "MotherPlutarch", "company": 9, "connect":1},
{"name": "Gueulemer", "company": 4, "connect":1},
{"name": "Babet", "company": 4, "connect":1},
{"name": "Claquesous", "company": 4, "connect":1},
{"name": "Montparnasse", "company": 4, "connect":1},
{"name": "Toussaint", "company": 5, "connect":1},
{"name": "Child1", "company": 10, "connect":1},
{"name": "Child2", "company": 10, "connect":1},
{"name": "Brujon", "company": 4, "connect":1},
{"name": "Mme.Hucheloup", "company": 8, "connect":1}
],
"links": [
{"source": 1, "target": 0, "value": 1},
{"source": 2, "target": 0, "value": 8},
{"source": 3, "target": 0, "value": 10},
{"source": 3, "target": 2, "value": 6},
{"source": 4, "target": 0, "value": 1},
{"source": 5, "target": 0, "value": 1},
{"source": 6, "target": 0, "value": 1},
{"source": 7, "target": 0, "value": 1},
{"source": 8, "target": 0, "value": 2},
{"source": 9, "target": 0, "value": 1},
{"source": 11, "target": 10, "value": 1},
{"source": 11, "target": 3, "value": 3},
{"source": 11, "target": 2, "value": 3},
{"source": 11, "target": 0, "value": 5},
{"source": 12, "target": 11, "value": 1},
{"source": 13, "target": 11, "value": 1},
{"source": 14, "target": 11, "value": 1},
{"source": 15, "target": 11, "value": 1},
{"source": 17, "target": 16, "value": 4},
{"source": 18, "target": 16, "value": 4},
{"source": 18, "target": 17, "value": 4},
{"source": 19, "target": 16, "value": 4},
{"source": 19, "target": 17, "value": 4},
{"source": 19, "target": 18, "value": 4},
{"source": 20, "target": 16, "value": 3},
{"source": 20, "target": 17, "value": 3},
{"source": 20, "target": 18, "value": 3},
{"source": 20, "target": 19, "value": 4},
{"source": 21, "target": 16, "value": 3},
{"source": 21, "target": 17, "value": 3},
{"source": 21, "target": 18, "value": 3},
{"source": 21, "target": 19, "value": 3},
{"source": 21, "target": 20, "value": 5},
{"source": 22, "target": 16, "value": 3},
{"source": 22, "target": 17, "value": 3},
{"source": 22, "target": 18, "value": 3},
{"source": 22, "target": 19, "value": 3},
{"source": 22, "target": 20, "value": 4},
{"source": 22, "target": 21, "value": 4},
{"source": 23, "target": 16, "value": 3},
{"source": 23, "target": 17, "value": 3},
{"source": 23, "target": 18, "value": 3},
{"source": 23, "target": 19, "value": 3},
{"source": 23, "target": 20, "value": 4},
{"source": 23, "target": 21, "value": 4},
{"source": 23, "target": 22, "value": 4},
{"source": 23, "target": 12, "value": 2},
{"source": 23, "target": 11, "value": 9},
{"source": 24, "target": 23, "value": 2},
{"source": 24, "target": 11, "value": 7},
{"source": 25, "target": 24, "value": 13},
{"source": 25, "target": 23, "value": 1},
{"source": 25, "target": 11, "value": 12},
{"source": 26, "target": 24, "value": 4},
{"source": 26, "target": 11, "value": 31},
{"source": 26, "target": 16, "value": 1},
{"source": 26, "target": 25, "value": 1},
{"source": 27, "target": 11, "value": 17},
{"source": 27, "target": 23, "value": 5},
{"source": 27, "target": 25, "value": 5},
{"source": 27, "target": 24, "value": 1},
{"source": 27, "target": 26, "value": 1},
{"source": 28, "target": 11, "value": 8},
{"source": 28, "target": 27, "value": 1},
{"source": 29, "target": 23, "value": 1},
{"source": 29, "target": 27, "value": 1},
{"source": 29, "target": 11, "value": 2},
{"source": 30, "target": 23, "value": 1},
{"source": 31, "target": 30, "value": 2},
{"source": 31, "target": 11, "value": 3},
{"source": 31, "target": 23, "value": 2},
{"source": 31, "target": 27, "value": 1},
{"source": 32, "target": 11, "value": 1},
{"source": 33, "target": 11, "value": 2},
{"source": 33, "target": 27, "value": 1},
{"source": 34, "target": 11, "value": 3},
{"source": 34, "target": 29, "value": 2},
{"source": 35, "target": 11, "value": 3},
{"source": 35, "target": 34, "value": 3},
{"source": 35, "target": 29, "value": 2},
{"source": 36, "target": 34, "value": 2},
{"source": 36, "target": 35, "value": 2},
{"source": 36, "target": 11, "value": 2},
{"source": 36, "target": 29, "value": 1},
{"source": 37, "target": 34, "value": 2},
{"source": 37, "target": 35, "value": 2},
{"source": 37, "target": 36, "value": 2},
{"source": 37, "target": 11, "value": 2},
{"source": 37, "target": 29, "value": 1},
{"source": 38, "target": 34, "value": 2},
{"source": 38, "target": 35, "value": 2},
{"source": 38, "target": 36, "value": 2},
{"source": 38, "target": 37, "value": 2},
{"source": 38, "target": 11, "value": 2},
{"source": 38, "target": 29, "value": 1},
{"source": 39, "target": 25, "value": 1},
{"source": 40, "target": 25, "value": 1},
{"source": 41, "target": 24, "value": 2},
{"source": 41, "target": 25, "value": 3},
{"source": 42, "target": 41, "value": 2},
{"source": 42, "target": 25, "value": 2},
{"source": 42, "target": 24, "value": 1},
{"source": 43, "target": 11, "value": 3},
{"source": 43, "target": 26, "value": 1},
{"source": 43, "target": 27, "value": 1},
{"source": 44, "target": 28, "value": 3},
{"source": 44, "target": 11, "value": 1},
{"source": 45, "target": 28, "value": 2},
{"source": 47, "target": 46, "value": 1},
{"source": 48, "target": 47, "value": 2},
{"source": 48, "target": 25, "value": 1},
{"source": 48, "target": 27, "value": 1},
{"source": 48, "target": 11, "value": 1},
{"source": 49, "target": 26, "value": 3},
{"source": 49, "target": 11, "value": 2},
{"source": 50, "target": 49, "value": 1},
{"source": 50, "target": 24, "value": 1},
{"source": 51, "target": 49, "value": 9},
{"source": 51, "target": 26, "value": 2},
{"source": 51, "target": 11, "value": 2},
{"source": 52, "target": 51, "value": 1},
{"source": 52, "target": 39, "value": 1},
{"source": 53, "target": 51, "value": 1},
{"source": 54, "target": 51, "value": 2},
{"source": 54, "target": 49, "value": 1},
{"source": 54, "target": 26, "value": 1},
{"source": 55, "target": 51, "value": 6},
{"source": 55, "target": 49, "value": 12},
{"source": 55, "target": 39, "value": 1},
{"source": 55, "target": 54, "value": 1},
{"source": 55, "target": 26, "value": 21},
{"source": 55, "target": 11, "value": 19},
{"source": 55, "target": 16, "value": 1},
{"source": 55, "target": 25, "value": 2},
{"source": 55, "target": 41, "value": 5},
{"source": 55, "target": 48, "value": 4},
{"source": 56, "target": 49, "value": 1},
{"source": 56, "target": 55, "value": 1},
{"source": 57, "target": 55, "value": 1},
{"source": 57, "target": 41, "value": 1},
{"source": 57, "target": 48, "value": 1},
{"source": 58, "target": 55, "value": 7},
{"source": 58, "target": 48, "value": 7},
{"source": 58, "target": 27, "value": 6},
{"source": 58, "target": 57, "value": 1},
{"source": 58, "target": 11, "value": 4},
{"source": 59, "target": 58, "value": 15},
{"source": 59, "target": 55, "value": 5},
{"source": 59, "target": 48, "value": 6},
{"source": 59, "target": 57, "value": 2},
{"source": 60, "target": 48, "value": 1},
{"source": 60, "target": 58, "value": 4},
{"source": 60, "target": 59, "value": 2},
{"source": 61, "target": 48, "value": 2},
{"source": 61, "target": 58, "value": 6},
{"source": 61, "target": 60, "value": 2},
{"source": 61, "target": 59, "value": 5},
{"source": 61, "target": 57, "value": 1},
{"source": 61, "target": 55, "value": 1},
{"source": 62, "target": 55, "value": 9},
{"source": 62, "target": 58, "value": 17},
{"source": 62, "target": 59, "value": 13},
{"source": 62, "target": 48, "value": 7},
{"source": 62, "target": 57, "value": 2},
{"source": 62, "target": 41, "value": 1},
{"source": 62, "target": 61, "value": 6},
{"source": 62, "target": 60, "value": 3},
{"source": 63, "target": 59, "value": 5},
{"source": 63, "target": 48, "value": 5},
{"source": 63, "target": 62, "value": 6},
{"source": 63, "target": 57, "value": 2},
{"source": 63, "target": 58, "value": 4},
{"source": 63, "target": 61, "value": 3},
{"source": 63, "target": 60, "value": 2},
{"source": 63, "target": 55, "value": 1},
{"source": 64, "target": 55, "value": 5},
{"source": 64, "target": 62, "value": 12},
{"source": 64, "target": 48, "value": 5},
{"source": 64, "target": 63, "value": 4},
{"source": 64, "target": 58, "value": 10},
{"source": 64, "target": 61, "value": 6},
{"source": 64, "target": 60, "value": 2},
{"source": 64, "target": 59, "value": 9},
{"source": 64, "target": 57, "value": 1},
{"source": 64, "target": 11, "value": 1},
{"source": 65, "target": 63, "value": 5},
{"source": 65, "target": 64, "value": 7},
{"source": 65, "target": 48, "value": 3},
{"source": 65, "target": 62, "value": 5},
{"source": 65, "target": 58, "value": 5},
{"source": 65, "target": 61, "value": 5},
{"source": 65, "target": 60, "value": 2},
{"source": 65, "target": 59, "value": 5},
{"source": 65, "target": 57, "value": 1},
{"source": 65, "target": 55, "value": 2},
{"source": 66, "target": 64, "value": 3},
{"source": 66, "target": 58, "value": 3},
{"source": 66, "target": 59, "value": 1},
{"source": 66, "target": 62, "value": 2},
{"source": 66, "target": 65, "value": 2},
{"source": 66, "target": 48, "value": 1},
{"source": 66, "target": 63, "value": 1},
{"source": 66, "target": 61, "value": 1},
{"source": 66, "target": 60, "value": 1},
{"source": 67, "target": 57, "value": 3},
{"source": 68, "target": 25, "value": 5},
{"source": 68, "target": 11, "value": 1},
{"source": 68, "target": 24, "value": 1},
{"source": 68, "target": 27, "value": 1},
{"source": 68, "target": 48, "value": 1},
{"source": 68, "target": 41, "value": 1},
{"source": 69, "target": 25, "value": 6},
{"source": 69, "target": 68, "value": 6},
{"source": 69, "target": 11, "value": 1},
{"source": 69, "target": 24, "value": 1},
{"source": 69, "target": 27, "value": 2},
{"source": 69, "target": 48, "value": 1},
{"source": 69, "target": 41, "value": 1},
{"source": 70, "target": 25, "value": 4},
{"source": 70, "target": 69, "value": 4},
{"source": 70, "target": 68, "value": 4},
{"source": 70, "target": 11, "value": 1},
{"source": 70, "target": 24, "value": 1},
{"source": 70, "target": 27, "value": 1},
{"source": 70, "target": 41, "value": 1},
{"source": 70, "target": 58, "value": 1},
{"source": 71, "target": 27, "value": 1},
{"source": 71, "target": 69, "value": 2},
{"source": 71, "target": 68, "value": 2},
{"source": 71, "target": 70, "value": 2},
{"source": 71, "target": 11, "value": 1},
{"source": 71, "target": 48, "value": 1},
{"source": 71, "target": 41, "value": 1},
{"source": 71, "target": 25, "value": 1},
{"source": 72, "target": 26, "value": 2},
{"source": 72, "target": 27, "value": 1},
{"source": 72, "target": 11, "value": 1},
{"source": 73, "target": 48, "value": 2},
{"source": 74, "target": 48, "value": 2},
{"source": 74, "target": 73, "value": 3},
{"source": 75, "target": 69, "value": 3},
{"source": 75, "target": 68, "value": 3},
{"source": 75, "target": 25, "value": 3},
{"source": 75, "target": 48, "value": 1},
{"source": 75, "target": 41, "value": 1},
{"source": 75, "target": 70, "value": 1},
{"source": 75, "target": 71, "value": 1},
{"source": 76, "target": 64, "value": 1},
{"source": 76, "target": 65, "value": 1},
{"source": 76, "target": 66, "value": 1},
{"source": 76, "target": 63, "value": 1},
{"source": 76, "target": 62, "value": 1},
{"source": 76, "target": 48, "value": 1},
{"source": 76, "target": 58, "value": 1}
]
}

Here is a modified version of Mike Bostock's example which only displays labels of top 10 nodes:
var width = 960,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.gravity(0.05)
.distance(100)
.charge(-100)
.size([width, height]);
var json = {"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1},{"name":"Mlle.Baptistine","group":1},{"name":"Mme.Magloire","group":1},{"name":"CountessdeLo","group":1},{"name":"Geborand","group":1},{"name":"Champtercier","group":1},{"name":"Cravatte","group":1},{"name":"Count","group":1},{"name":"OldMan","group":1},{"name":"Labarre","group":2},{"name":"Valjean","group":2},{"name":"Marguerite","group":3},{"name":"Mme.deR","group":2},{"name":"Isabeau","group":2},{"name":"Gervais","group":2},{"name":"Tholomyes","group":3},{"name":"Listolier","group":3},{"name":"Fameuil","group":3},{"name":"Blacheville","group":3},{"name":"Favourite","group":3},{"name":"Dahlia","group":3},{"name":"Zephine","group":3},{"name":"Fantine","group":3},{"name":"Mme.Thenardier","group":4},{"name":"Thenardier","group":4},{"name":"Cosette","group":5},{"name":"Javert","group":4},{"name":"Fauchelevent","group":0},{"name":"Bamatabois","group":2},{"name":"Perpetue","group":3},{"name":"Simplice","group":2},{"name":"Scaufflaire","group":2},{"name":"Woman1","group":2},{"name":"Judge","group":2},{"name":"Champmathieu","group":2},{"name":"Brevet","group":2},{"name":"Chenildieu","group":2},{"name":"Cochepaille","group":2},{"name":"Pontmercy","group":4},{"name":"Boulatruelle","group":6},{"name":"Eponine","group":4},{"name":"Anzelma","group":4},{"name":"Woman2","group":5},{"name":"MotherInnocent","group":0},{"name":"Gribier","group":0},{"name":"Jondrette","group":7},{"name":"Mme.Burgon","group":7},{"name":"Gavroche","group":8},{"name":"Gillenormand","group":5},{"name":"Magnon","group":5},{"name":"Mlle.Gillenormand","group":5},{"name":"Mme.Pontmercy","group":5},{"name":"Mlle.Vaubois","group":5},{"name":"Lt.Gillenormand","group":5},{"name":"Marius","group":8},{"name":"BaronessT","group":5},{"name":"Mabeuf","group":8},{"name":"Enjolras","group":8},{"name":"Combeferre","group":8},{"name":"Prouvaire","group":8},{"name":"Feuilly","group":8},{"name":"Courfeyrac","group":8},{"name":"Bahorel","group":8},{"name":"Bossuet","group":8},{"name":"Joly","group":8},{"name":"Grantaire","group":8},{"name":"MotherPlutarch","group":9},{"name":"Gueulemer","group":4},{"name":"Babet","group":4},{"name":"Claquesous","group":4},{"name":"Montparnasse","group":4},{"name":"Toussaint","group":5},{"name":"Child1","group":10},{"name":"Child2","group":10},{"name":"Brujon","group":4},{"name":"Mme.Hucheloup","group":8}],"links":[{"source":1,"target":0,"value":1},{"source":2,"target":0,"value":8},{"source":3,"target":0,"value":10},{"source":3,"target":2,"value":6},{"source":4,"target":0,"value":1},{"source":5,"target":0,"value":1},{"source":6,"target":0,"value":1},{"source":7,"target":0,"value":1},{"source":8,"target":0,"value":2},{"source":9,"target":0,"value":1},{"source":11,"target":10,"value":1},{"source":11,"target":3,"value":3},{"source":11,"target":2,"value":3},{"source":11,"target":0,"value":5},{"source":12,"target":11,"value":1},{"source":13,"target":11,"value":1},{"source":14,"target":11,"value":1},{"source":15,"target":11,"value":1},{"source":17,"target":16,"value":4},{"source":18,"target":16,"value":4},{"source":18,"target":17,"value":4},{"source":19,"target":16,"value":4},{"source":19,"target":17,"value":4},{"source":19,"target":18,"value":4},{"source":20,"target":16,"value":3},{"source":20,"target":17,"value":3},{"source":20,"target":18,"value":3},{"source":20,"target":19,"value":4},{"source":21,"target":16,"value":3},{"source":21,"target":17,"value":3},{"source":21,"target":18,"value":3},{"source":21,"target":19,"value":3},{"source":21,"target":20,"value":5},{"source":22,"target":16,"value":3},{"source":22,"target":17,"value":3},{"source":22,"target":18,"value":3},{"source":22,"target":19,"value":3},{"source":22,"target":20,"value":4},{"source":22,"target":21,"value":4},{"source":23,"target":16,"value":3},{"source":23,"target":17,"value":3},{"source":23,"target":18,"value":3},{"source":23,"target":19,"value":3},{"source":23,"target":20,"value":4},{"source":23,"target":21,"value":4},{"source":23,"target":22,"value":4},{"source":23,"target":12,"value":2},{"source":23,"target":11,"value":9},{"source":24,"target":23,"value":2},{"source":24,"target":11,"value":7},{"source":25,"target":24,"value":13},{"source":25,"target":23,"value":1},{"source":25,"target":11,"value":12},{"source":26,"target":24,"value":4},{"source":26,"target":11,"value":31},{"source":26,"target":16,"value":1},{"source":26,"target":25,"value":1},{"source":27,"target":11,"value":17},{"source":27,"target":23,"value":5},{"source":27,"target":25,"value":5},{"source":27,"target":24,"value":1},{"source":27,"target":26,"value":1},{"source":28,"target":11,"value":8},{"source":28,"target":27,"value":1},{"source":29,"target":23,"value":1},{"source":29,"target":27,"value":1},{"source":29,"target":11,"value":2},{"source":30,"target":23,"value":1},{"source":31,"target":30,"value":2},{"source":31,"target":11,"value":3},{"source":31,"target":23,"value":2},{"source":31,"target":27,"value":1},{"source":32,"target":11,"value":1},{"source":33,"target":11,"value":2},{"source":33,"target":27,"value":1},{"source":34,"target":11,"value":3},{"source":34,"target":29,"value":2},{"source":35,"target":11,"value":3},{"source":35,"target":34,"value":3},{"source":35,"target":29,"value":2},{"source":36,"target":34,"value":2},{"source":36,"target":35,"value":2},{"source":36,"target":11,"value":2},{"source":36,"target":29,"value":1},{"source":37,"target":34,"value":2},{"source":37,"target":35,"value":2},{"source":37,"target":36,"value":2},{"source":37,"target":11,"value":2},{"source":37,"target":29,"value":1},{"source":38,"target":34,"value":2},{"source":38,"target":35,"value":2},{"source":38,"target":36,"value":2},{"source":38,"target":37,"value":2},{"source":38,"target":11,"value":2},{"source":38,"target":29,"value":1},{"source":39,"target":25,"value":1},{"source":40,"target":25,"value":1},{"source":41,"target":24,"value":2},{"source":41,"target":25,"value":3},{"source":42,"target":41,"value":2},{"source":42,"target":25,"value":2},{"source":42,"target":24,"value":1},{"source":43,"target":11,"value":3},{"source":43,"target":26,"value":1},{"source":43,"target":27,"value":1},{"source":44,"target":28,"value":3},{"source":44,"target":11,"value":1},{"source":45,"target":28,"value":2},{"source":47,"target":46,"value":1},{"source":48,"target":47,"value":2},{"source":48,"target":25,"value":1},{"source":48,"target":27,"value":1},{"source":48,"target":11,"value":1},{"source":49,"target":26,"value":3},{"source":49,"target":11,"value":2},{"source":50,"target":49,"value":1},{"source":50,"target":24,"value":1},{"source":51,"target":49,"value":9},{"source":51,"target":26,"value":2},{"source":51,"target":11,"value":2},{"source":52,"target":51,"value":1},{"source":52,"target":39,"value":1},{"source":53,"target":51,"value":1},{"source":54,"target":51,"value":2},{"source":54,"target":49,"value":1},{"source":54,"target":26,"value":1},{"source":55,"target":51,"value":6},{"source":55,"target":49,"value":12},{"source":55,"target":39,"value":1},{"source":55,"target":54,"value":1},{"source":55,"target":26,"value":21},{"source":55,"target":11,"value":19},{"source":55,"target":16,"value":1},{"source":55,"target":25,"value":2},{"source":55,"target":41,"value":5},{"source":55,"target":48,"value":4},{"source":56,"target":49,"value":1},{"source":56,"target":55,"value":1},{"source":57,"target":55,"value":1},{"source":57,"target":41,"value":1},{"source":57,"target":48,"value":1},{"source":58,"target":55,"value":7},{"source":58,"target":48,"value":7},{"source":58,"target":27,"value":6},{"source":58,"target":57,"value":1},{"source":58,"target":11,"value":4},{"source":59,"target":58,"value":15},{"source":59,"target":55,"value":5},{"source":59,"target":48,"value":6},{"source":59,"target":57,"value":2},{"source":60,"target":48,"value":1},{"source":60,"target":58,"value":4},{"source":60,"target":59,"value":2},{"source":61,"target":48,"value":2},{"source":61,"target":58,"value":6},{"source":61,"target":60,"value":2},{"source":61,"target":59,"value":5},{"source":61,"target":57,"value":1},{"source":61,"target":55,"value":1},{"source":62,"target":55,"value":9},{"source":62,"target":58,"value":17},{"source":62,"target":59,"value":13},{"source":62,"target":48,"value":7},{"source":62,"target":57,"value":2},{"source":62,"target":41,"value":1},{"source":62,"target":61,"value":6},{"source":62,"target":60,"value":3},{"source":63,"target":59,"value":5},{"source":63,"target":48,"value":5},{"source":63,"target":62,"value":6},{"source":63,"target":57,"value":2},{"source":63,"target":58,"value":4},{"source":63,"target":61,"value":3},{"source":63,"target":60,"value":2},{"source":63,"target":55,"value":1},{"source":64,"target":55,"value":5},{"source":64,"target":62,"value":12},{"source":64,"target":48,"value":5},{"source":64,"target":63,"value":4},{"source":64,"target":58,"value":10},{"source":64,"target":61,"value":6},{"source":64,"target":60,"value":2},{"source":64,"target":59,"value":9},{"source":64,"target":57,"value":1},{"source":64,"target":11,"value":1},{"source":65,"target":63,"value":5},{"source":65,"target":64,"value":7},{"source":65,"target":48,"value":3},{"source":65,"target":62,"value":5},{"source":65,"target":58,"value":5},{"source":65,"target":61,"value":5},{"source":65,"target":60,"value":2},{"source":65,"target":59,"value":5},{"source":65,"target":57,"value":1},{"source":65,"target":55,"value":2},{"source":66,"target":64,"value":3},{"source":66,"target":58,"value":3},{"source":66,"target":59,"value":1},{"source":66,"target":62,"value":2},{"source":66,"target":65,"value":2},{"source":66,"target":48,"value":1},{"source":66,"target":63,"value":1},{"source":66,"target":61,"value":1},{"source":66,"target":60,"value":1},{"source":67,"target":57,"value":3},{"source":68,"target":25,"value":5},{"source":68,"target":11,"value":1},{"source":68,"target":24,"value":1},{"source":68,"target":27,"value":1},{"source":68,"target":48,"value":1},{"source":68,"target":41,"value":1},{"source":69,"target":25,"value":6},{"source":69,"target":68,"value":6},{"source":69,"target":11,"value":1},{"source":69,"target":24,"value":1},{"source":69,"target":27,"value":2},{"source":69,"target":48,"value":1},{"source":69,"target":41,"value":1},{"source":70,"target":25,"value":4},{"source":70,"target":69,"value":4},{"source":70,"target":68,"value":4},{"source":70,"target":11,"value":1},{"source":70,"target":24,"value":1},{"source":70,"target":27,"value":1},{"source":70,"target":41,"value":1},{"source":70,"target":58,"value":1},{"source":71,"target":27,"value":1},{"source":71,"target":69,"value":2},{"source":71,"target":68,"value":2},{"source":71,"target":70,"value":2},{"source":71,"target":11,"value":1},{"source":71,"target":48,"value":1},{"source":71,"target":41,"value":1},{"source":71,"target":25,"value":1},{"source":72,"target":26,"value":2},{"source":72,"target":27,"value":1},{"source":72,"target":11,"value":1},{"source":73,"target":48,"value":2},{"source":74,"target":48,"value":2},{"source":74,"target":73,"value":3},{"source":75,"target":69,"value":3},{"source":75,"target":68,"value":3},{"source":75,"target":25,"value":3},{"source":75,"target":48,"value":1},{"source":75,"target":41,"value":1},{"source":75,"target":70,"value":1},{"source":75,"target":71,"value":1},{"source":76,"target":64,"value":1},{"source":76,"target":65,"value":1},{"source":76,"target":66,"value":1},{"source":76,"target":63,"value":1},{"source":76,"target":62,"value":1},{"source":76,"target":48,"value":1},{"source":76,"target":58,"value":1}]};
// Let's add a random "connect" value to nodes:
json.nodes = json.nodes
.map(n => { n.connect = Math.floor(Math.random() * 100) + 1; return n; })
// Let's get a list of the top 10 nodes based on the value of "connect":
// By the way, the sort would modify the nodes order of the json (which is
// important to draw the force layout) and thus we create a deep copy of the
// nodes to sort them:
var top10nodes = JSON.parse(JSON.stringify(json.nodes))
.sort( function(a, b) { return b.connect - a.connect; })
.slice(0, 9)
.map(n => n.name);
// And we include a "top10" boolean on each node to able to later filter them
// when drawing the label:
json.nodes = json.nodes.map( function(d) {
if (top10nodes.indexOf(d.name) > -1) d.top10 = true;
return d;
});
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.filter( function(d) { return d.top10; }).append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
<script src="//d3js.org/d3.v3.min.js"></script>
The idea is to include a top10 field on each node representing the fact that the connect field of the element has its value in the top 10 biggest:
var json = {"nodes":[{"name":"Myriel","group":1},{"name":"Napoleon","group":1}, ...
// Let's add a random "connect" value to nodes to simulate your dataset:
// {nodes: [{name: "Myriel", group: 1, connect: 66}, ... :
json.nodes = json.nodes
.map(n => { n.connect = Math.floor(Math.random() * 100) + 1; return n; })
// Let's get a list of the top 10 nodes based on the value of "connect":
// By the way, the sort would modify the nodes order of the json (which is
// important to draw the force layout) and thus we create a deep copy of the
// nodes to sort them:
// ["MotherPlutarch", "Simplice", "Fantine", "Gueulemer", "CountessdeLo", "Count", "Perpetue", "Champtercier", "Mme.Pontmercy"]
var top10nodes = JSON.parse(JSON.stringify(json.nodes))
.sort( function(a, b) { return b.connect - a.connect; })
.slice(0, 9)
.map(n => n.name);
// And we include a "top10" boolean on each node to able to later filter them
// when drawing the label:
json.nodes = json.nodes.map( function(d) {
if (top10nodes.indexOf(d.name) > -1) d.top10 = true;
return d;
});
This way the in the definition of labels, we can filter only nodes for which this top10 field is true:
node.filter( function(d) { return d.top10; }).append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });

Forced directed D3 Graph setting specific image for each node

Hi I have gone through few questions and possible solutions of putting image as node in forced directed. But all of them are either putting randomly or one image for all. Is there any way i can assign particular image to particular node? Basically i am creating dynamically and fetching data from database. Any help would be highly appreciated.

hi just click the load button and heres the sample of what you want http://jsfiddle.net/elviz/V6Qr8/91/
function loadImage() {
if (LoadData) {
root = {
"name": "physics",
"imageURL": "",
"type": "user",
"children": [{
"name": "DragForce",
"imageURL": "",
"size": 1082,
"type": "user"
}, {
"name": "GravityForce",
"imageURL": "",
"size": 1336,
"type": "user"
}, {
"name": "IForce",
"imageURL": "",
"size": 319,
"type": "user"
}, {
"name": "NBodyForce",
"imageURL": "",
"size": 10498,
"type": "user"
}, {
"name": "Node 1",
"imageURL": "",
"type": "user",
"children": [{
"name": "DragForce 1.1",
"imageURL": "",
"size": 1082,
"type": "chat"
}, {
"name": "DragForce 1.2",
"imageURL": "",
"size": 1082,
"type": "message"
}]
},
{
"name": "Particle",
"imageURL": "",
"size": 2822,
"type": "user"
}, {
"name": "Simulation",
"imageURL": "",
"size": 9983,
"type": "user"
}, {
"name": "Node 2",
"imageURL": "",
"type": "user",
"children": [{
"name": "DragForce 2.1",
"imageURL": "",
"size": 1082,
"type": "message"
}, {
"name": "DragForce 2.2",
"imageURL": "",
"size": 1082,
"type": "message"
}]
},
{
"name": "Spring",
"imageURL": "",
"size": 2213,
"type": "user"
}, {
"name": "SpringForce",
"imageURL": "",
"size": 1681,
"type": "user"
}, {
"name": "Node 3",
"imageURL": "",
"type": "user",
"children": [{
"name": "DragForce 2.1",
"imageURL": "",
"size": 1082,
"type": "chat"
}, {
"name": "DragForce 3.2",
"imageURL": "",
"size": 1082,
"type": "chat"
}]
}]
};

Try as shown in fiddle:
http://jsfiddle.net/cyril123/n28k7oqo/3/
You can specify your data as and pass the image as shown below
var graph = {
"nodes": [
{"x": 469, "y": 410, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
{"x": 493, "y": 364, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-09-128.png"},
{"x": 442, "y": 365, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-17-128.png"},
{"x": 467, "y": 314, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-22-128.png"},
{"x": 477, "y": 248, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-13-128.png"},
{"x": 425, "y": 207, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
{"x": 402, "y": 155, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-03-128.png"},
{"x": 369, "y": 196, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
{"x": 350, "y": 148, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
{"x": 539, "y": 222, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
{"x": 594, "y": 235, 'img': "https://cdn0.iconfinder.com/data/icons/ikooni-outline-free-basic/128/free-23-128.png"},
{"x": 582, "y": 185, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"},
{"x": 633, "y": 200, 'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"}
],
"links": [
{"source": 0, "target": 1},
{"source": 1, "target": 2},
{"source": 2, "target": 0},
{"source": 1, "target": 3},
{"source": 3, "target": 2},
{"source": 3, "target": 4},
{"source": 4, "target": 5},
{"source": 5, "target": 6},
{"source": 5, "target": 7},
{"source": 6, "target": 7},
{"source": 6, "target": 8},
{"source": 7, "target": 8},
{"source": 9, "target": 4},
{"source": 9, "target": 11},
{"source": 9, "target": 10},
{"source": 10, "target": 11},
{"source": 11, "target": 12},
{"source": 12, "target": 10}
]
}
Explanation
The x and y in the json is the probable place where you want to place the circle. Imagine you don't have x and y for any of the nodes; in such case don't pass the x and y in JSON. Something like this:
..."nodes": [
{
'img': "https://cdn1.iconfinder.com/data/icons/industry-2/96/Mine-512.png"
}, ....
Regarding the img pass the url of the image you wish to see on the node.
Like I have done above.
This will append the image to the node group:
//make groups which will hold the image and the circle
nodes = node.data(graph.nodes)
.enter().append("g");
//make a node circle in the group
var circles = nodes.append("circle")
.attr("class", "node")
.attr("r", 12)
.on("dblclick", dblclick)
.call(drag);
//make images in the group
var images = nodes.append("svg:image")
.attr("xlink:href",function(d) {return d.img})
.attr("height", "20")
.attr("width", "20");
The node group is the group which contains the circle and the image.

Like in my Arda family tree I load the images locally by the name of the person. So every person has it's own picture.
Also make sure that you have the onerror in HTML used to show a default image when the wanted image is deleted or something else. Otherwhise the Google Chrome shows an ugly red cross. Just as a tip =)
If you have any further question, just ask.

D3.js stacked layout - for repeated X values

Currently d3.layout.stack calculates the stacked-Y value based on the layers or series given.
Now I would like to generate stacked layout by both "X" value and by series. Anyway I am having 2-dimensional array of equal size.
For eg if my given data is,
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290},
{ "x": 1, "y": 190},
{ "x": null, "y": null}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49},
{ "x": 1, "y": 50},
{ "x": 2, "y": 220}
]
}
];
Here I have two layers ("apple","oranges"). My "x" values are [0,1,2];But If "X " values in the same layers looks same, then Y coordinate should be calculated based on the previous X value and series. Currently Y coordinate was calculated mapped by index.
Actual output for previous data:
var stacked_actual= [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91,"y0":0},
{ "x": 1, "y": 290, ,"y0":0},
{ "x": 1, "y": 190, ,"y0":0},
{ "x": null, "y": null, ,"y0":0}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9,"y0":91},
{ "x": 1, "y": 49,"y0":290},
{ "x": 1, "y": 50,"y0":190},
{ "x": 2, "y": 220,"y0":0}
]
}
];
Expected output for previous data:
var stacked_expected= [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91,"y0":0},
{ "x": 1, "y": 290 ,"y0":0},
{ "x": 1, "y": 190,"y0":190},
{ "x": null, "y": null ,"y0":0}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9,"y0":91},
{ "x": 1, "y": 49,"y0":480},
{ "x": 1, "y": 50,"y0":520},
{ "x": 2, "y": 220,"y0":0}
]
}
];
Is there any way to achieve this model?
Pls check the reference image
enter link description here

Resources