We Keep Coding

Plotly sunburst sub-section custom color JavaScript

I'm working with plotly in JS, trying to draw a sunburst chart. Everything works, but i would like to make it so that the child sections on the chart each have a different color. I cant seem to figure it out, any help is extremely appreciated.
Here is how my sunburst looks:
Notice that "Enos" and "Noam" have the same color, I would like them to have either different colors, or at least different opacities.
Like so:
Here is my code:
var data = [{
"type": "sunburst",
"labels": ["Eve", "Awan", "Seth", "Enos", "Noam", "Enoch"],
"parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
"values": [100, 20, 80, 60, 20, 20]
}];
var layout = {
sunburstcolorway: ["#636efa", "#ef553b"]
};
Plotly.newPlot('myChart', data, layout)

If you want to have custom colors for your traces, then you need to set the colors array of the marker object. There you can set the color for every single part of the sunburst diagram:
var data = [{
"type": "sunburst",
"labels": ["Eve", "Awan", "Seth", "Enos", "Noam","Enoch"],
"parents": ["", "Eve", "Eve", "Seth", "Seth", "Awan"],
"values": [100, 20, 80, 60, 20, 20],
"opacity" : 1,
"marker": {
colors: ["#ffffff","#fc6e08","#3e81ed","#3293e3","#c429ad","#d99543"]
}
}];
var layout = {
// sunburstcolorway: ["#636efa", "#ef553b"]
};
Plotly.newPlot('myChart', data, layout)
So the first value ("Eve") has the first color of the array, the second value ("Awan")the second color, and so on. In the example, I set the opacity to 1 to get the real colors from the colors array.

How can I pass a 3 dimensional tensor into a dense layer (tensorflow.js)

I'm looking for a way to feed in a normalized graph into my tensorflow.js model. Right now, it is passing in a 2-dimensional tensor and that code works flawlessly. I found a new data point that I want to add into that 2-dimensional tensor, however, that data point is an array of points that when normalized, it ranges between 0-1. If there was a set number of points the array had, I would just each individual one as a data point; however, the size of the array varies between all my data. Here is my code and an example data set in javascript object form:
{
"rank": "27",
"fame": "4505",
"deaths": "1",
"accountAge": 199,
"characters": "7",
"skins": "0",
"verified": 1,
"oneDay": [ 3856, 4003, 4138, 4282, 4316, 4431, 4505, 4719],
"oneWeek": [ 1100, 1243, 1511, 1948, 2814, 3267, 3557],
"lifeTime": [231, 1711, 2257, 4104, 5366, 7610, 9142, 11123, 12831, 15003, 15154, 16600, 17438, 18466, 19777, 20626, 22230, 24180, 24970, 25918, 26728, 28325, 29318, 30187, 30645, 31068, 33142, 35088, 35582, 35984, 37162, 39567, 0, 41089, 42615, 43609, 44254, 46740, 47231, 48261, 50673, 51161, 52646, 53592, 55470, 56487, 57254, 58422, 58428, 62407, 65122, 0, 65122, 69784, 70703, 72511, 77764, 78240, 80642, 81143, 81204, 82929, 85771, 89594, 90746, 92073, 92265, 376, 425, 476, 702, 776, 777, 827, 828, 1089, 1091, 998, 1031, 1084, 1148, 1100 ]
}
The model setup
model = tf.sequential();
//input layer
model.add(tf.layers.dense({
units: 100,
inputShape: [9],
activation: 'sigmoid'
}))
//hidden layers
model.add(tf.layers.dense({
units: 50,
activation: 'sigmoid'
}))
//output layer
model.add(tf.layers.dense({
units: 1,
activation: 'sigmoid'
}))
The current data setup
var xs2D = [], ys2D = []
for (let i of data) {
//removed data normalization because it was very big
xs2D.push([rank, fame, deaths, age, char, skin, od, ow, lt])
ys2D.push([i.verified])
}
const xs = tf.tensor2d(xs2D)
const ys = tf.tensor2d(ys2D)

If xs is a 3d tensor of shape [a, b, c], then inputShape of the first layer should be [b, c].
Since ys is not a 3d tensor, then a flatten later should be pass before the last layer, for it to return a 2d tensor.
Here is a small example:
const model = tf.sequential({
layers: [tf.layers.dense({units: 1, inputShape: [1, 10]}),
tf.layers.flatten(),
tf.layers.dense({units: 1})]
});
model.compile({optimizer: 'sgd', loss: 'meanSquaredError'});
// the loss function and the optimizer are just for the sake of example
// in order to use compile, required before using fit
await model.fit(tf.ones([8, 1, 10]), tf.ones([8, 1]));
model.predict(tf.ones([8, 1, 10]))

Dynamically change view column names in Google Charts

My data is as below
var data = google.visualization.arrayToDataTable([
['Date', 'A|36~Batman', 'A|37~Superman', 'A|38~Aquaman'],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
While plotting this chart in the graph, I want to show the label values split after the '~' sign i.e. (Batman, Superman, Aquaman). I need the values before the tilde during the OnClick event of my chart so I need those values in the data as my onclick code is as below
var col = chart.getSelection()[0]['column'];
var Id = data.getColumnLabel(col).substr(0, data.getColumnLabel(col).indexOf("~"));
So to fetch data, I need the Id values as well. I was able to loop the columns and modify the column label values, but I don't know the code to set the column label as new values. My code to loop is as below
var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
var ColumnName = view.getColumnLabel(i);
var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
// set new column name in the view
}
How to replace the old column name with the new column name?

use method --> setColumnLabel
however, this method does not exist on the view,
so you'll have to change the column label on the data table
since the view is based on the data table,
the view pick up the new label as well...
var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
var ColumnName = view.getColumnLabel(i);
var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
data.setColumnLabel(i, NewColumnName);
}
EDIT
instead of using the label to store two values,
take advantage of the properties available on the column.
var data = google.visualization.arrayToDataTable([
['Date', {id: 'A|36', label: 'Batman'}, {id: 'A|37', label: 'Superman'}, {id: 'A|38', label: 'Aquaman'}],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
then you can use methods --> getColumnId() & getColumnLabel()
if that isn't enough, you can provide your own custom properties...
var data = google.visualization.arrayToDataTable([
['Date', {id: '36', label: 'Batman', p: {category: 'A'}}, {id: '37', label: 'Superman', p: {category: 'A'}}, {id: '38', label: 'Aquaman', p: {category: 'A'}}],
['01/08/2018', 950, 654, 123],
['02/08/2018', 760, 786, 423],
['03/08/2018', 1121, 856, 632],
['04/08/2018', 842, 475, 257],
['05/08/2018', 948, 658, 324]
]);
then use method --> getColumnProperty(1, 'category')

Formatting json for leaflet wind map

I'm trying to convert netCDF data to json for use in leaflet-velocity, which used the same format as the output of grib2json used by cambecc in earth. Here's another example of sample json data given by danwild in wind-global.json
Using netCDF4 I've managed to extract arrays of lat/ lot wind data from my netCDF.
I was wondering how the "data" part of the json file (example below) is structured? It seems to be a long array of values (e.g. for 'eastward wind' in the example), but I don't understand how they get mapped to lat/ lon coords later on?
Is there something in the json header which tells Leaflet how to structure the output, or must there be another function in leaflet-velocity.js doing the work?
This question had some clues, but I've been at a loss for some time now trying to adapt it for my own netCDF file.
[
{
"header": {
"parameterUnit": "m.s-1",
"parameterNumber": 2,
"dx": 1.0,
"dy": 1.0,
"parameterNumberName": "eastward_wind",
"la1": -7.5,
"la2": -28.5,
"parameterCategory": 2,
"lo2": 156.0,
"nx": 14,
"ny": 22,
"refTime": "2017-02-01 23:00:00",
"lo1": 143.0
},
"data":[
-2.12,
-2.27,
-2.41,
...
]
}
]

This may help. NCO-JSON produces a different JSON dialect than grib2json, yet works directly and completely for all netCDF files, and, by default, includes brackets indicating array dimensional boundaries. You might find it easier for your purposes...
zender#aerosol:~$ ncks -C -v three_dmn_rec_var --jsn ~/nco/data/in.nc
{
"dimensions": {
"lat": 2,
"lon": 4,
"time": 10
},
"variables": {
"three_dmn_rec_var": {
"shape": ["time", "lat", "lon"],
"type": "float",
"attributes": {
"long_name": "three dimensional record variable",
"units": "watt meter-2",
"_FillValue": -99.0
},
"data": [[[1.0, 2.0, 3.0, 4.0], [5.0, 6.0, 7.0, 8.0]], [[9.0, 10.0, 11.0, 12.0], [13.0, 14.0, 15.0, 16.0]], [[17.0, 18.0, 19.0, 20.0], [21.0, 22.0, 23.0, 24.0]], [[25.0, 26.0, 27.0, 28.0], [29.0, 30.0, 31.0, 32.0]], [[33.0, 34.0, 35.0, 36.0], [37.0, 38.0, 39.0, 40.0]], [[41.0, 42.0, 43.0, 44.0], [45.0, 46.0, 47.0, 48.0]], [[49.0, 50.0, 51.0, 52.0], [53.0, 54.0, 55.0, 56.0]], [[57.0, 58.0, 59.0, 60.0], [61.0, 62.0, 63.0, 64.0]], [[65.0, 66.0, 67.0, 68.0], [69.0, 70.0, 71.0, 72.0]], [[73.0, 74.0, 75.0, 76.0], [77.0, 78.0, 79.0, 80.0]]]
}
}
}

Multiple C3.js charts automatically hidden, except the last one

I am trying to generate multiple c3 charts with the following code :
var datas=[[
["name", "position", "y", "bigRect", "myBars"],
["One 22", 2, 2, 2, 2],
["One 33", 3, 3, 2, 2],
["One 44", 4, 4, 2, 2]
],[
["name", "position", "y", "bigRect", "myBars"],
["Two 55", 5, 5, 2, 2],
["Two 66", 6, 6, 2, 2],
["Two 77", 7, 7, 2, 2]
],[
["name", "position", "y", "bigRect", "myBars"],
["Three 88", 8, 8, 2, 2],
["Three 99", 9, 9, 2, 2],
["Three 00", 0, 0, 2, 2]
]];
var iData = 0;
var charts = [];
for(iData in datas){
var d = datas[iData];
document.querySelector(".container").innerHTML += "<div id='chart"+iData+"'></div>";
var chartSelector = "#chart"+iData;
charts[iData] = c3.generate({
bindto: d3.select(chartSelector),
data: {
rows: d,
type: "scatter",
types: {
bigRect: "area",
myBars: "bar"
},
x: "position",
y: "y"
},
zoom: {
enabled: true
}
});
}
All the charts look empty except the last one that works perfectly. You can see what it looks like on this JSbin link.
On the hidden charts, all the SVGs are generated, but
the g SVG elements that contain the path drawing the dots and bars are set on opacity: 0, hiding all their contents.
the zoom and the tooltip do not work either
Do you know why c3 is disabling the first charts and how to enable them ?
My apologies for my poor English and thank you very much for your time.

You've got it working now, but I can also get it working by replacing one line like so:
d3.select(".container").append("div").attr("id", "chart"+iData);
//document.querySelector(".container").innerHTML += "<div id='chart"+iData+"'></div>";
It appears adding stuff to and then replacing .innerHtml has side effects for the existing contents, in your case the first charts you build
Is it possible to append to innerHTML without destroying descendants' event listeners?
This includes wiping out event handlers and 'unofficial' (for want of a better term) attributes like the __data__ field d3 populates and uses (it's undefined for the first 2 sets of bars as this code will reveal)
for(iData in datas){
console.log (d3.select("#chart"+iData+" .c3-bars").node().__data__);
}

I finally solved my problem by creating all the #chartX containers in another loop before that calling c3.
I assume it has something to do with the non-procedural execution order of JS but I'm still looking for a precise explanation of the phenomenon.
Here is the link to the corrected JSbin.