i was trying to run plot of 300,000 data points through leaflet but failed miserably. I found an alternative package called "leaflet.glify". However i could not find any proper documentation for it. I was trying to change the color of the datapoint based on different ID's in the dataset. Not sure how to go about it.
Please help !
You can use color property and return the color rgb value corresponding to the each and every lat-long point plotted.
L.glify.points({
map: this.map,
size:10,
click: function (e, point, xy) {
//set up a standalone popup (use a popup as a layer)
L.popup()
.setLatLng(point)
.setContent("Tooltip content")
.openOn(this.map);
},
data: JSON.parse(JSON.stringify(geoJSONObj)),
color: function(index,latLng){
return dataObject[latLng[0]+","+latLng[1]].color;
},
opacity:1
});
Related
I am adding data to scatter series like below , how do we receive the custom parameter value I add here
series.add({
x: 0,
y: 22,
color: ColorRGBA(255, 0, 0),
size: 10,
rotation: 45,
value: "custom message",
});
From the above series how do I extract the value "custom message" .. basically is there anyway to get it ? so I can to use it in table formatter like below .
series.setCursorResultTableFormatter((builder, series, xValue, yValue,value) => {
return builder.addRow(value).addRow(series.getValue());
});
Also another doubt is can we change shape of series dynamically like we change color and size ?
With v.3.1 this kind of logic is not supplied out of the box.
To implement it you'd need to add some kind of custom logic which finds your custom data based on the X and Y information.
In next release, v.3.2 we'll add an extra parameter to cursor result table formatters, so you can use it like follows:
series.setCursorResultTableFormatter((builder, series, x, y, dataPoint) => {
// `dataPoint` has all same information as user supplied, size, rotation, value or anything.
return builder.addRow(x).addRow(y).addRow(dataPoint.value);
});
Please note that these custom properties (size, rotation, value, etc.) will only be included when cursor interpolation is disabled.
At this time v.3.2 is scheduled for late September, but this could change.
2nd question about changing shape of point series, we currently don't have active plans to change this, but when there is enough motivation it will be improved on.
I'm working on a stacked bar chart in Observable's new Plot library. It's not too bad coming from Vega and D3, but I cannot find or figure how to order the resulting stacked bars from the Plot.binX() I'm using.
My actual mark looks something like this today:
Plot.rectY(hourlyUsageData, Plot.binX({
y: "sum",
title: bin => bin[0].Name
}, {
x: d => d3.timeHour.count(d3.timeDay(d.DateTime), d.DateTime),
y: d => d.kWh,
thresholds: 24,
fill: "Name",
//order: "sum",
//reverse: true
}))
Plot.binX() does just fine, resulting in a chart in which the stack is ordered according to the input ordering.
I'd like the stack to be ordered based on a sum, and in fact if I add the Plot.stack option for order (see commented line above), I can order by sum:
Close! Now I just need to reverse the order. I hypothesize that, since I can use the order option, perhaps I can also use the reverse option (see commented line above). That doesn't seem to work.
My second hypothesis is that, since these transforms are supposed to be "composable", that I should be able to combine my binX with a stackY, but I cannot find an example of such a composition. I've tried Plot.stackY(Plot.binX({...}, { ... order:"sum", reverse:true }), and similar variations, but they don't seem to work either.
In summary, I'd love to know how to control the order of the stacks in my stacked bar chart while also using binX. Thanks!
Thank you. It seems that there is a bug and the {order} option is consumed for nothing by the bin transform. We'll try to fix this. In the meantime you can add it "outside" the bin transform like so:
Plot.rectY(data,
Plot.stackY({
...Plot.binX(
{ y: "count" },
{ x: "body_mass", fill: "species", order: "sum" }
),
reverse: true
})
).plot()
Pull-request to solve this issue: https://github.com/observablehq/plot/pull/439
Overall context: I have a db of cross-references among pages in a wiki space, and want an incrementally-growing visualization of links.
I have working code that shows clusters of labels as you mouseover. But when you move away, rather than hiding all the labels, I want to keep certain key labels (e.g. the centers of clusters).
I forked an existing example and got it roughly working.
info is at http://webseitz.fluxent.com/wiki/WikiGraphBrowser
near the bottom of that or any other page in that space, in the block that starts with "BackLinks:", at the end you'll find "Click here for WikiGraphBrowser" which will launch a window with the interface
equivalent static subset example visible at http://www.wikigraph.net/static/d3/cgmartin/WikiGraphBrowser/:
code for that example is at https://github.com/BillSeitz/WikiGraphBrowser/blob/master/js/wiki_graph.js
Code that works at removing all labels:
i = j = 0;
if (!bo) { //bo=False - from mouseout
//labels.select('text.label').remove();
labels.filter(function(o) {
return !(o.name in clicked_names);
})
.text(function(o) { return ""; });
j++;
}
Code attempting to leave behind some labels, which does not work:
labels.forEach(function(o) {
if (!(d.name in clicked_names)) {
d.text.label.remove();
}
I know I'm just not grokking the d3 model at all....
thx
The problem comes down to your use of in to search for a name in an array. The Javascript in keyword searches object keys not object values. For an array, the keys are the index values. So testing (d.name in clicked_names) will always return false.
Try
i = j = 0;
if (!bo) { //bo=False - from mouseout
//labels.select('text.label').remove();
labels.filter(function(o) {
return (clicked_names.indexOf(o.name) < 0);
})
.text(function(o) { return ""; });
j++;
}
The array .indexOf(object) method returns -1 if none of the elements in the array are equal (by triple-equals standards) to the parameter. Alternatively, if you are trying to support IE8 (I'm assuming not, since you're using SVG), you could use a .some(function) test.
By the way, there's a difference between removing a label and just setting it's text content to the empty string. Which one to use will depend on whether you want to show the text again later. Either way, just be sure you don't end up with a proliferation of empty labels clogging up your browser.
We're displaying time series data (utilisation of a compute resource, sampled hourly over months) on a stacked area chart using D3.js:
d3.json("/growth/instance_count_1month.json", function( data ) {
data.forEach(function(d) {
d.datapoints = d.datapoints.map(
function(da) {
// NOTE i'm not sure why this needs to be multiplied by 1000
return {date: new Date(da[1] * 1000),
count: da[0]};
});
});
x.domain(d3.extent(data[0].datapoints, function(d) { return d.date; }));
y.domain([0,
Math.ceil(d3.max(data.map(function (d) {return d3.max(d.datapoints, function (d) { return d.count; });})) / 100) * 100
]);
The result is rather spiky for my tastes:
Is there an easy way to simplify the data, either using D3 or another readily available library? I want to reduce the spikiness, but also reduce the volume of data to be graphed, as it will get out of hand.
I have a preference for doing this at the UI level, rather than touching the logging routines (even though redundant JSON data will have to be transferred.)
You have a number of options, you need to decided what is the best way forward for the type of data you have and the needs of it been used. Without knowing more about your data the best I can suggest is re-sampling. Simply report the data at longer intervals ('rolling up' the data). Alternatively you could use a rolling average or look at various line smoothing algorithms.
I'm new to Google Charts tools and I was wondering what I'am doing wrong. I want to make the BarChart (or ColumnChart) stacked by adding 'isStacked':true but then the chart gives me wrong data.
You can try it yourself on the Google playground with this code
(Just add 'isStacked':true to the options to see the wrong results)
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable({"cols":[{"id":"","label":"Date","type":"string"},
{"id":"","label":"Complaints","type":"number"},
{"id":"","label":"Compliments","type":"number"},
{"id":"","label":"Questions","type":"number"},
{"id":"","label":"Suggestions","type":"number"}],
"rows":[{"c":[{"v":"12\/2011"},{"v":30},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"1\/2012"},{"v":93},{"v":"5"},{"v":0},{"v":0}]},
{"c":[{"v":"2\/2012"},{"v":82},{"v":"5"},{"v":0},{"v":0}]},
{"c":[{"v":"3\/2012"},{"v":72},{"v":"10"},{"v":0},{"v":0}]},
{"c":[{"v":"4\/2012"},{"v":68},{"v":"8"},{"v":0},{"v":0}]},
{"c":[{"v":"5\/2012"},{"v":59},{"v":"7"},{"v":0},{"v":0}]},
{"c":[{"v":"6\/2012"},{"v":30},{"v":"3"},{"v":"3"},{"v":0}]},
{"c":[{"v":"7\/2012"},{"v":37},{"v":"3"},{"v":"4"},{"v":"3"}]},
{"c":[{"v":"8\/2012"},{"v":31},{"v":"2"},{"v":"5"},{"v":0}]},
{"c":[{"v":"9\/2012"},{"v":47},{"v":"2"},{"v":"1"},{"v":"1"}]},
{"c":[{"v":"10\/2012"},{"v":67},{"v":0},{"v":"5"},{"v":"1"}]},
{"c":[{"v":"11\/2012"},{"v":38},{"v":"1"},{"v":"4"},{"v":0}]},
{"c":[{"v":"12\/2012"},{"v":14},{"v":"1"},{"v":"1"},{"v":"1"}]}
]});
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:1000, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
I hope somebody can help me...
Thanks!
I just had the very same problem. The solution is, numeric values should NOT be between quotation marks, otherwise "3"+"4" becomes 34 instead of 7.
Just remove the " marks if there's a numeric value there.
cheers, greg
UPDATE: if you use 'f:' values as well, you will need the quotation marks again, otherwise mouseover might not work on the chart.
{"c":[{"v":"12\/2012"},{"v":14, "f":"14"},{"v":1, "f":"1"},{"v":1, "f":"1"},{"v":1, "f":"1"}]}