Skip to content

Commit

Permalink
correct blen modes
Browse files Browse the repository at this point in the history
  • Loading branch information
@jgaffuri
jgaffuri committed Oct 23, 2023
1 parent 6927da1 commit 4b4bac5
Show file tree
Hide file tree
Showing 7 changed files with 39 additions and 37 deletions.
2 changes: 1 addition & 1 deletion dist/gridviz.min.js
View file

Large diffs are not rendered by default.

24 changes: 12 additions & 12 deletions examples/DE.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@
stretching: { fun: 'expRev', alpha: -7 },
//set alpha and blend operation
//alpha: (zf) => zf < 70 ? 0.75 : 1.0,
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({ maxZoom: 7 }),
],
Expand Down Expand Up @@ -276,7 +276,7 @@
},
//set alpha and blend operation
//alpha: (zf) => zf < 70 ? 0.75 : 1.0,
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
})
]
}),
Expand Down Expand Up @@ -319,7 +319,7 @@
shape: () => 'circle',
sizeCol: 'TOT',
size: (v, r, s, zf) => 1.3 * r * gviz.sPow(v / s.max, 0.2),
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -384,7 +384,7 @@
size: (v, r, s, zf) => 1 * r * gviz.sPow(v / s.max, 0.25, 0),
stripesOrientation: () => 90,
//agePyramidHeight: (c, r) => 0.95 * r,
blendOperation: (zf) => zf < 6 ? "multiply" : "normal"
blendOperation: (zf) => zf < 6 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -448,7 +448,7 @@
size: (v, r, s, zf) => r * gviz.sPow(v / s.max, 0.25, 0),
stripesOrientation: () => 90,
//agePyramidHeight: (c, r) => 0.95 * r,
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -503,7 +503,7 @@
colorCol: 'age_ratio',
color: (v, r, s) => d3.interpolateSpectral(1 - v),
shape: () => 'circle',
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -564,7 +564,7 @@
size: sized ? (v, r, s, zf) => 1.3 * r * gviz.sPow(v / s.max, 0.25, 0) : undefined,
stripesOrientation: sized ? undefined : () => 90,
//agePyramidHeight: (c, r) => 0.95 * r,
blendOperation: sized ? undefined : (zf) => zf < 6 ? "multiply" : "normal"
blendOperation: sized ? undefined : (zf) => zf < 6 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -632,7 +632,7 @@
size: sized ? (v, r, s, zf) => 1.3 * r * gviz.sPow(v / s.max, 0.25, 0) : undefined,
stripesOrientation: sized ? undefined : () => 90,
//agePyramidHeight: (c, r) => 0.95 * r,
blendOperation: sized ? undefined : (zf) => zf < 6 ? "multiply" : "normal"
blendOperation: sized ? undefined : (zf) => zf < 6 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -700,7 +700,7 @@
size: sized ? (v, r, s, zf) => 1 * r * gviz.sPow(v / s.max, 0.25, 0) : undefined,
stripesOrientation: () => 90,
//agePyramidHeight: (c, r) => 0.95 * r,
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -759,7 +759,7 @@
sizeCol: 'TOT',
size: (v, r, s, zf) => 1 * r * gviz.sPow(v / s.max, 0.25, 0),
stripesOrientation: () => 90,
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -843,7 +843,7 @@
sizeCol: 'TOT',
size: (v, r, s, zf) => 1 * r * gviz.sPow(v / s.max, 0.25, 0),
stripesOrientation: () => 90,
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -898,7 +898,7 @@
size: (v, r, s, zf) => 1.2 * r * gviz.sPow(v / s.max, 0.25, 0),
//stripesOrientation: () => 90,
//agePyramidHeight: (c, r) => 0.95 * r,
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down
14 changes: 7 additions & 7 deletions examples/EUR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,7 +238,7 @@
colorCol: layCode_,
color: d3.interpolateOrRd,
stretching: { fun: 'expRev', alpha: -7 },
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({
strokeColorCol: layCode_,
Expand Down Expand Up @@ -281,7 +281,7 @@
return d3.interpolateSpectral(1 - t)
},
shape: () => 'square',
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({ maxZoom: 80 }),
],
Expand Down Expand Up @@ -474,7 +474,7 @@
color: d3.interpolateGnBu,
tFun: (v, r, s) => Math.min(v, 100) / 100,
stretching: { fun: 'expRev', alpha: 2 },
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({
strokeColorCol: 'rp',
Expand Down Expand Up @@ -532,7 +532,7 @@
sizeCol: 'TOT_P',
size: (v, r, s, zf) => 1.2 * r * gviz.sPow(v / s.max, 0.3),
shape: () => 'circle',
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
})
//set legend
popStyle.legends.push(
Expand All @@ -549,7 +549,7 @@
new gviz.SquareColorCatWGLStyle({
colorCol: 'cH',
color: colorsH,
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
}),
strokeStyle,
],
Expand Down Expand Up @@ -610,7 +610,7 @@
sizeCol: 'TOT_P',
size: (v, r, s, zf) => 1.2 * r * gviz.sPow(v / s.max, 0.3),
shape: () => 'circle',
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
})
//set legend
popStyle.legends.push(
Expand All @@ -627,7 +627,7 @@
new gviz.SquareColorCatWGLStyle({
colorCol: 'cE',
color: colorsE,
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
}),
strokeStyle,
],
Expand Down
2 changes: 1 addition & 1 deletion examples/EUR_bu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@
if (value == -999) return;
return gviz.sExp(value / stats.max, -25)
},*/
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
}),

/*new gviz.SquareColorCatWGLStyle({
Expand Down
24 changes: 12 additions & 12 deletions examples/FR.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@
colorCol: 'ind',
color: d3.interpolateYlOrRd,
stretching: { fun: 'expRev', alpha: -7 },
blendOperation: (zf) => zf < 20 ? "multiply" : "normal"
blendOperation: (zf) => zf < 20 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({ maxZoom: 15 }),
new gviz.ShapeColorSizeStyle({
Expand Down Expand Up @@ -388,7 +388,7 @@
colorCol: 'age_ratio',
color: (v, r, s) => d3.interpolateSpectral(1 - v),
shape: () => 'circle',
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -435,7 +435,7 @@
//t = t > 1 ? 1 : t < 0 ? 0 : t
return 1 - Math.pow(t < 0 ? 0 : t, 1.5)
},
blendOperation: (zf) => zf < 20 ? "multiply" : "normal"
blendOperation: (zf) => zf < 20 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({ maxZoom: 15 }),
],
Expand Down Expand Up @@ -467,7 +467,7 @@
return d3.interpolateYlOrRd(gviz.sPow(v, 0.65))
},
shape: () => 'circle',
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -510,7 +510,7 @@
stripesOrientation: () => 90,
sizeCol: "men",
size: (v, r, s, zf) => 1.3 * r * gviz.sPow(v / s.max, 0.15, 0),
//blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
//blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -557,7 +557,7 @@
color: (v, r, s) =>
v == 0 ? '#ccc' : d3.interpolateYlOrRd(gviz.sPow(v, 0.4)),
shape: () => 'circle',
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -598,7 +598,7 @@
colorCol: 'rMen_prop',
color: (v) => d3.interpolatePuBuGn(1 - gviz.sPow(1 - v, 0.6)),
shape: () => 'circle',
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -637,7 +637,7 @@
colorCol: 'rMenSurf',
color: d3.interpolateSpectral,
tFun: (v, r, s) => 1 - (v - s.min) / (s.max - s.min),
blendOperation: (zf) => zf < 20 ? "multiply" : "normal"
blendOperation: (zf) => zf < 20 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({ maxZoom: 15 }),
],
Expand Down Expand Up @@ -676,7 +676,7 @@
stripesOrientation: () => 90,
sizeCol: "men",
size: (v, r, s, zf) => r * gviz.sPow(v / s.max, 0.15, 0),
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -725,7 +725,7 @@
//stripesOrientation: () => 90,
sizeCol: "log",
size: (v, r, s, zf) => r * gviz.sPow(v / s.max, 0.1, 0),
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -788,7 +788,7 @@
type: () => 'ring',
sizeCol: "log",
size: (v, r, s, zf) => 1.3 * r * gviz.sPow(v / s.max, 0.15, 0),
blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
],
{
Expand Down Expand Up @@ -837,7 +837,7 @@
color: d3.interpolatePuBuGn,
tFun: (v, r, s) => (+v == 0 ? null : v),
//if (!v) return "#ccc"
blendOperation: (zf) => zf < 20 ? "multiply" : "normal"
blendOperation: (zf) => zf < 20 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({ maxZoom: 15 }),
],
Expand Down
4 changes: 3 additions & 1 deletion examples/FR_pop.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
let containerDiv = document.getElementById('viz-container')

const app = new gviz.App(containerDiv)
.setZoomFactorExtent([10, 1500])
.setZoomFactorExtent([3, 1500])
.setViewFromURL()

//load datasets, one per geo region
Expand Down Expand Up @@ -173,6 +173,7 @@
colorCol: year,
color: colR,
stretching: { fun: 'expRev', alpha: -7 },
blendOperation: (zf) => zf < 25 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({
strokeColorCol: year,
Expand Down Expand Up @@ -211,6 +212,7 @@
colorCol: year,
color: colR,
stretching: { fun: 'expRev', alpha: -7 },
//blendOperation: (zf) => zf < 25 ? "multiply" : "source-over"
}),
new gviz.StrokeStyle({
strokeColorCol: year,
Expand Down
6 changes: 3 additions & 3 deletions examples/NO.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@
stretching: { fun: 'expRev', alpha: -7 },
//set alpha and blend operation
//alpha: (zf) => zf < 70 ? 0.75 : 1.0,
//blendOperation: (zf) => zf < 10 ? "multiply" : "normal"
//blendOperation: (zf) => zf < 10 ? "multiply" : "source-over"
}),
//show stroke for low resolutions
new gviz.StrokeStyle({ maxZoom: 7 }),
Expand Down Expand Up @@ -226,7 +226,7 @@
},
//set alpha and blend operation
//alpha: (zf) => zf < 70 ? 0.75 : 1.0,
blendOperation: (zf) => zf < 50 ? "multiply" : "normal"
blendOperation: (zf) => zf < 50 ? "multiply" : "source-over"
})
]
}),
Expand Down Expand Up @@ -267,7 +267,7 @@
shape: () => 'circle',
sizeCol: 'p',
size: (v, r, s, zf) => 1.3 * r * gviz.sPow(v / s.max, 0.2),
blendOperation: (zf) => zf < 4 ? "multiply" : "normal"
blendOperation: (zf) => zf < 4 ? "multiply" : "source-over"
}),
],
{
Expand Down

0 comments on commit 4b4bac5

Please sign in to comment.