We Keep Coding

Make a vega heatmap with means of binned values

Let's start from this example:
https://vega.github.io/vega/examples/heatmap/
This is a glimpse of the underlying data:
date pressure temperature wind
2010-01-01T01:00:00 1016.6 4 3.8
2010-01-01T02:00:00 1016.6 3.9 3.8
2010-01-01T03:00:00 1016.7 3.8 3.8
2010-01-01T04:00:00 1016.7 3.8 3.7
2010-01-01T05:00:00 1016.5 3.7 3.8
2010-01-01T06:00:00 1016.4 3.7 3.8
In the above figure, the color of each cell in the heatmap represents the value of temperature from a single row in the data table.
Suppose we want to change the display, so that the color of each cell in the heatmap represents the average of multiple rows in the data table?
For example, suppose we want to apply binning to both the x-axis and to the y-axis.
For the y-axis, we would create 3 bins:
6am-11am, 12pm-6pm, 7pm-12am
For the x-axis, we would create 12 bins:
one bin for each month
Then, the heatmap would have 3 rows and 12 columns, and the color of each cell in the heatmap would correspond to the average of temperature values in the corresponding bin.
Questions:
How would you do this with vega? Can we use a transform to accomplish this task?
Should we use another javascript library to do the binning first, and then pass the result to vega?
Could you share a code snippet or suggest a library for efficient 2d binning (e.g., for a million items with continuous x,y positions)?
Suppose some of the bins correspond to no data (0 rows in the data table). Can we skip drawing them entirely? Or color them with a background color?
Thanks for your help!

You can use transform calculate to group them in your bands using ternary conditions and create a new field as timeGroup and then use it in your y-axis as done below or in
Try it in the editor: link
Here's the figure:
Here's the code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"autosize": {"contains": "padding", "type": "fit", "resize": true},
"width": 600,
"height": 150,
"padding": {"left": 15, "right": 60, "bottom": 5},
"data": {
"url": "data/seattle-weather-hourly-normals.csv",
"format": {"type": "csv", "parse": {"date": "date"}}
},
"transform": [
{"calculate": "month(datum.date)", "as": "cvDate"},
{"calculate": "utchours(datum.date)", "as": "hoursDate"},
{
"calculate": "0 < datum.hoursDate && datum.hoursDate < 7 ? '1 am - 6 am': 6 < datum.hoursDate && datum.hoursDate < 13 ? '7 am - 12 pm' : 12 < datum.hoursDate && datum.hoursDate < 19 ? '1 pm - 6 pm': '7 pm - 12 am'",
"as": "timeGroup"
},
{
"calculate": "datum.timeGroup == '1 am - 6 am' ? 0 : datum.timeGroup == '7 am - 12 pm' ? 1 : datum.timeGroup == '1 pm - 6 pm' ? 2 : 3",
"as": "orderRank"
}
],
"encoding": {
"y": {
"field": "timeGroup",
"type": "ordinal",
"sort": {"field": "orderRank", "order": "descending"}
},
"x": {
"field": "date",
"type": "ordinal",
"timeUnit": "month",
"sort": null
}
},
"layer": [
{
"mark": {"type": "rect"},
"encoding": {
"fill": {
"field": "temperature", "type": "quantitative",
"aggregate": "mean"
}
}
}
]
}

After looking through the vega-lite documentation again, I think I stumbled into an answer that looks good.
Try it in the editor: link
Here's the figure:
And the code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {"url": "data/movies.json"},
"transform": [
{
"filter": {
"and": [
{"field": "IMDB Rating", "valid": true},
{"field": "Rotten Tomatoes Rating", "valid": true}
]
}
}
],
"mark": "rect",
"width": 300,
"height": 200,
"encoding": {
"x": {
"bin": {"maxbins": 60},
"field": "IMDB Rating",
"type": "quantitative"
},
"y": {
"bin": {"maxbins": 40},
"field": "Rotten Tomatoes Rating",
"type": "quantitative"
},
"color": {
"aggregate": "mean",
"field": "Worldwide Gross",
"type": "quantitative"
}
},
"config": {"view": {"stroke": "transparent"}}
}
And the link to documentation about how to use "aggregate":
https://vega.github.io/vega-lite/docs/aggregate.html#aggregate-op-def

Stacked D3 bar chart with multiple level

I want to create a responsive D3 bar chart using my JSON.
I tried pushing my values into an array and create a bar chart using the same array. But it didn't come out well. I don't know what I am missing.
Can anyone please help me with this?
JSON = {
"Resource 1": {
"metrics": [
{
"2021-04-07": {
"percent": {
"avg": 15,
"max": 30,
"min": 10
}
}
},
{
"2021-04-08": {
"percent": {
"avg": 30,
"max": 50,
"min": 12
}
}
},
{
"2021-04-09": {
"percent": {
"avg": 35,
"max": 60,
"min": 5
}
}
}
]
},
"Resource 2": {
"metrics": [
{
"2021-04-07": {
"percent": {
"avg": 30,
"max": 50,
"min": 10
}
}
},
{
"2021-04-08": {
"percent": {
"avg": 15,
"max": 30,
"min": 10
}
}
},
{
"2021-04-09": {
"percent": {
"avg": 27,
"max": 39,
"min": 15
}
}
}
]
}
}
My y-axis will be numeric with a maximum value = 100 and the x-axis will be a date.
1 whole bar = 1 Resource, each resource contains three segments (Minimum, Average, and Maximum) stacked one above the other.
Each date will have multiple resources. When the cursor moved to the minimum value of resource1 in one date, it should highlight all the minimum value of the same resource1 on others dates too.
While moving the cursor to the bar the tooltip should show the resource name with resource value like
Resource1
min: 10
I have attached my fiddle.
https://jsfiddle.net/oLqdrymh/
Thanks in advance.

Highchart spline Chart with no markers and legends markers as circle's

Can anyone help me with this, I need the following legend marker symbol marked in the image as a circle?
I have tried adding marker: circle inside series but it is not working.
I am new to Highcharts. Is there any possible way to fix this?
Thanks in advance.
NOTE: My chart has multiple series.
{
"series": [{
"name": "Test series",
"data": [{
"y": 8,
}, {
"y": 10,
}, {
"y": 15,
}, {
"y": 8,
}],
"type": "spline",
"color": "#dd0014",
marker: {
symbol: 'circle'
}
}],
"xAxis": {
"categories": ["cat-1", "cat-2", "cat-3"],
},
"plotOptions": {
"series": {
"marker": {
"symbol": "circle",
"enabled": false
},
},
},
"legend": {
"align": "right",
"enabled": true,
"y": 35,
"x": 0,
"verticalAlign": "top",
"layout": "vertical",
"itemStyle": {
"fontSize": "12px",
"fontWeight": "light"
},
"reversed": true,
"symbolRadius": 9,
"itemMarginTop": 3,
"itemMarginBottom": 3,
"marker": "circle"
},
"colors": ["#00B19D", "#4E3363", "#3A99D5", "#00AE84", "#49494A", "#318ACA"],
"credits": {
"enabled": false
},
}
JsFiddle Link here

I have found a workaround solution after going through the Highcharts documentation.
chart: {
events: {
load: function() {
$(".highcharts-legend-item path").attr('stroke-width', 10);
$(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
$(".highcharts-legend-item path").attr("stroke-linecap", "round");
},
redraw: function() {
$(".highcharts-legend-item path").attr('stroke-width', 10);
$(".highcharts-legend-item path").attr('d', "M 8 14.75 Z 61.25 61.25 99 1 1 33.45 44.00");
$(".highcharts-legend-item path").attr("stroke-linecap", "round");
}
}
},
added this to update legend symbols using JQUERY
DEMO LINK HERE

Plot median,lower quartile in dimplejs horizontal bar char

I have plot the simple horizontal grouped bar chart what i want is to create a point on median and lower quartile on each bar using dimpleJs tried many way still can't find how to do it?
my JSON data is:
var data = [{
"topic_id": 38,
"level": "easy",
"all_marks": [100],
"total marks": 80,
"name": "gamma",
"topic label": "sec A",
"median" : 18,
}, {
"topic_id": 38,
"level": "medium",
"all_marks": [30],
"total marks": 10,
"name": "alpha",
"topic label": "sec A",
"median" : 11,
}, {
"topic_id": 38,
"level": "difficult",
"all_marks": [40],
"total marks": 10,
"median" : 15,
"name": "delta",
"topic label": "sec A"
}, {
"topic_id": 39,
"level": "easy",
"all_marks": [100],
"total marks": 80,
"median" : 13,
"name": "gamma",
"topic label": "sec B"
}, {
"median" : 11,
"topic_id": 39,
"level": "medium",
"all_marks": [30],
"total marks": 10,
"name": "alpha",
"topic label": "sec B"
}, {
"median" : 10,
"topic_id": 39,
"level": "difficult",
"all_marks": [40],
"total marks": 10,
"name": "delta",
"topic label": "sec B"
}];

I can see median in your data but not lower quartile, if you can get that in to the data in the same format as median it will be fairly straightforward to add it to the chart. Here is an example adding median as a floating marker, you can change the series type to bubble if you would rather have dots than rectangles:
// Set up the chart as usual
var svg = dimple.newSvg("#chartContainer", 800, 600);
var c = new dimple.chart(svg, data);
var totalAxis = c.addMeasureAxis("x", "total marks");
var categoryAxis = c.addCategoryAxis("y", ["topic label", "level"]);
// Add an additional measure axis. By passing an axis object rather than a position letter to the first parameter
// we create a composite axis which draws both measures on the same physical axis.
var medianAxis = c.addMeasureAxis(totalAxis, "median");
// Add the bar series
var totalSeries = c.addSeries("level", dimple.plot.bar, [categoryAxis, totalAxis]);
// Add a separate bar series for median
var medianSeries = c.addSeries(null, dimple.plot.bar, [categoryAxis, medianAxis]);
// By setting to not be stacked on a bar series it draws floating bars which work as markers
medianSeries.stacked = false;
c.draw();
Here it is in action: https://jsfiddle.net/w9tjqq6c/

highcharts zoom bug (column chart)

There's a zooming bug that we're struggling.
If you zoom in the left side of the chart, the right side of the chart is zoomed.
Simple example:
http://jsfiddle.net/andrut/TfG6c/
I do it like that:
{
"chart": {
"renderTo": "container",
"zoomType": "xy",
"type": "column"
},
"plotOptions": {
"series": {
"groupPadding": 0.04
}
},
"series": [{
"name": "col0",
"data": [{
"y": 93723,
"color": "#773676"
}]
}, {
"name": "col1",
"data": [{
"y": 68630,
"color": "#ff9900"
}]
}]
}
Is there any workaround to fix this? I haven't found anything interesting anywhere...
Thanks,
Karol

You need to set minRange paramter
yAxis:{
minRange: 1000
},
http://jsfiddle.net/TfG6c/1/