I've created a plot using Vega-Lite that allows me to use a binder to alter the parameters of a functions that I'm visualizing. It's similar to this sample code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"width": 300,
"height": 150,
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"transform": [
{"calculate": "amp.sin * sin(datum.x)", "as": "sin(x)"},
{"calculate": "amp.cos * cos(datum.x)", "as": "cos(x)"},
{"fold": ["sin(x)", "cos(x)"]}
],
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal", "title": null}
},
"selection": {
"amp": {
"type": "single",
"fields": ["sin", "cos"],
"init": {"sin": 1, "cos": 1},
"bind": {
"sin": {"input": "range", "min": 0, "max": 10, "step": 0.1},
"cos": {"input": "range", "min": 0, "max": 10, "step": 0.1}
}
}
}
}
Here is the code above in the Vega editor.
Now, what I'd like to do is to create another visualization parallel to this one, but with another function, but that would also vary with the same binder.
Is this possible? Note that in my code, each plot uses a different dataset, but share the variable of the binder in common.
Yes, for example you can do this using a "concat". Here is an example based on your chart (open in editor):
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Plots two functions using a generated sequence.",
"data": {"sequence": {"start": 0, "stop": 12.7, "step": 0.1, "as": "x"}},
"concat": [
{
"width": 300,
"height": 150,
"transform": [
{"calculate": "amp.sin * sin(datum.x)", "as": "sin(x)"},
{"calculate": "amp.cos * cos(datum.x)", "as": "cos(x)"},
{"fold": ["sin(x)", "cos(x)"]}
],
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"field": "value", "type": "quantitative"},
"color": {"field": "key", "type": "nominal", "title": null}
},
"selection": {
"amp": {
"type": "single",
"fields": ["sin", "cos"],
"init": {"sin": 1, "cos": 1},
"bind": {
"sin": {"input": "range", "min": 0, "max": 10, "step": 0.1},
"cos": {"input": "range", "min": 0, "max": 10, "step": 0.1}
}
}
}
},
{
"width": 300,
"height": 150,
"transform": [
{
"calculate": "amp.cos * cos(datum.x) - amp.sin * sin(datum.x)",
"as": "cos(x) - sin(x)"
}
],
"mark": "line",
"encoding": {
"x": {"type": "quantitative", "field": "x"},
"y": {"field": "cos(x) - sin(x)", "type": "quantitative"}
}
}
],
"resolve": {"scale": {"y": "shared", "color": "independent"}}
}
I'm working on this Wordpress website and trying to change the video background of the slider on the homepage. I see it in the code, I see it in the site editor, and it seems to be part of a revolution slider, yet in this slider's properties, I cannot find any instruction relating to it.
Has anyone worked with this situation before? Did I miss something obvious? or did I just research the wrong question?
Here is the JSON definition of the slider in question:
{
"addOns": [],
"carousel": {
"borderRadius": 0,
"borderRadiusUnit": "px",
"ease": "power3.inOut",
"fadeOut": true,
"horizontal": "center",
"infinity": false,
"justify": false,
"justifyMaxWidth": false,
"maxItems": 3,
"maxOpacity": 100,
"maxRotation": 0,
"offsetScale": false,
"paddingBottom": 0,
"paddingTop": 0,
"rotation": false,
"scale": false,
"scaleDown": 50,
"showAllLayers": "false",
"snap": true,
"space": 0,
"speed": 800,
"stretch": false,
"varyFade": false,
"varyRotate": false,
"varyScale": false,
"vertical": "center"
},
"class": "",
"codes": {
"css": "",
"javascript": ""
},
"def": {
"autoResponsive": true,
"background": {
"fit": "cover",
"fitX": 100,
"fitY": 100,
"imageSourceType": "full",
"position": "center center",
"positionX": 0,
"positionY": 0,
"repeat": "no-repeat"
},
"delay": 9000,
"intelligentInherit": true,
"panZoom": {
"blurEnd": 0,
"blurStart": 0,
"duration": 10000,
"ease": "none",
"fitEnd": 100,
"fitStart": 100,
"rotateEnd": 0,
"rotateStart": 0,
"set": false,
"xEnd": 0,
"xStart": 0,
"yEnd": 0,
"yStart": 0
},
"responsiveChilds": true,
"responsiveOffset": true,
"transition": "fade",
"transitionDuration": 300
},
"general": {
"autoPlayVideoOnMobile": true,
"disableFocusListener": false,
"disableOnMobile": false,
"disablePanZoomMobile": false,
"firstSlide": {
"alternativeFirstSlide": 1,
"alternativeFirstSlideSet": false,
"duration": 300,
"set": false,
"slotAmount": 7,
"type": "fade"
},
"layerSelection": false,
"lazyLoad": "none",
"nextSlideOnFocus": false,
"progressbar": {
"color": "rgba(255,255,255,0.5)",
"height": 5,
"position": "bottom",
"set": false
},
"slideshow": {
"initDelay": 0,
"loopSingle": false,
"presetSliderHeight": false,
"shuffle": false,
"slideShow": true,
"stopAfterLoops": 0,
"stopAtSlide": 1,
"stopOnHover": false,
"stopSlider": false,
"viewPort": false,
"viewPortArea": {
"d": {
"e": false,
"u": "",
"v": "200px"
},
"m": {
"e": false,
"u": "",
"v": "200px"
},
"n": {
"e": false,
"u": "",
"v": "200px"
},
"t": {
"e": false,
"u": "",
"v": "200px"
}
},
"viewPortStart": "wait",
"waitForInit": false
},
"useWPML": false
},
"googleFont": [],
"hero": {
"activeSlide": -1
},
"id": "",
"layout": {
"bg": {
"color": "transparent",
"dottedOverlay": "none",
"fit": "cover",
"image": "",
"imageSourceType": "full",
"padding": 0,
"position": "center center",
"repeat": "no-repeat",
"shadow": 0,
"useImage": false
},
"position": {
"addClear": false,
"align": "center",
"fixedOnTop": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0
},
"spinner": {
"color": "#ffffff",
"type": "0"
}
},
"layouttype": "fullwidth",
"modal": {
"bodyclass": "",
"cover": true,
"coverColor": "rgba(0,0,0,0.5)",
"horizontal": "center",
"vertical": "middle"
},
"modalshortcode": "[rev_slider usage=\"modal\" alias=\"slider-1\"][/rev_slider]",
"nav": {
"arrows": {
"alwaysOn": true,
"animDelay": "1000ms",
"animSpeed": "1000ms",
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"left": {
"align": "slider",
"anim": "fade",
"horizontal": "left",
"offsetX": 30,
"offsetY": 0,
"vertical": "center"
},
"preset": "default",
"presets": [],
"right": {
"align": "slider",
"anim": "fade",
"horizontal": "right",
"offsetX": 30,
"offsetY": 0,
"vertical": "center"
},
"rtl": false,
"set": false,
"style": "1000"
},
"bullets": {
"align": "slider",
"alwaysOn": true,
"anim": "fade",
"animDelay": "1000ms",
"animSpeed": "1000ms",
"direction": "horizontal",
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"horizontal": "center",
"offsetX": 0,
"offsetY": 20,
"preset": "default",
"presets": [],
"rtl": false,
"set": false,
"space": 5,
"style": "3000",
"vertical": "bottom"
},
"keyboard": {
"direction": "horizontal",
"set": false
},
"mouse": {
"reverse": "default",
"set": "off"
},
"preview": {
"height": 100,
"width": 50
},
"swipe": {
"blockDragVertical": false,
"direction": "horizontal",
"minTouch": 1,
"set": false,
"setDesktopCarousel": true,
"setMobileCarousel": true,
"setOnDesktop": false,
"velocity": 75
},
"tabs": {
"align": "slider",
"alwaysOn": true,
"amount": 5,
"anim": "fade",
"animDelay": "1000ms",
"animSpeed": "1000ms",
"direction": "horizontal",
"height": 50,
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"horizontal": "center",
"innerOuter": "inner",
"offsetX": 0,
"offsetY": 20,
"padding": 5,
"preset": "default",
"presets": [],
"rtl": false,
"set": false,
"space": 5,
"spanWrapper": false,
"style": "4000",
"vertical": "bottom",
"width": 100,
"widthMin": 100,
"wrapperColor": "transparent"
},
"thumbs": {
"align": "slider",
"alwaysOn": true,
"amount": 5,
"anim": "fade",
"animDelay": "1000ms",
"animSpeed": "1000ms",
"direction": "horizontal",
"height": 50,
"hideDelay": 200,
"hideDelayMobile": 1200,
"hideOver": false,
"hideOverLimit": 0,
"hideUnder": false,
"hideUnderLimit": 778,
"horizontal": "center",
"innerOuter": "inner",
"offsetX": 0,
"offsetY": 20,
"padding": 5,
"preset": "default",
"presets": [],
"rtl": false,
"set": false,
"space": 5,
"spanWrapper": false,
"style": "2000",
"vertical": "bottom",
"width": 100,
"widthMin": 100,
"wrapperColor": "transparent"
}
},
"parallax": {
"ddd": {
"BGFreeze": false,
"layerOverflow": false,
"overflow": false,
"shadow": false,
"zCorrection": 65
},
"disableOnMobile": false,
"levels": [
5,
10,
15,
20,
25,
30,
35,
40,
45,
46,
47,
48,
49,
50,
51,
30
],
"mouse": {
"bgSpeed": 0,
"layersSpeed": 0,
"origo": "slidercenter",
"speed": 0,
"type": "scroll"
},
"set": false,
"setDDD": false
},
"scrolleffects": {
"bg": false,
"direction": "both",
"disableOnMobile": false,
"layers": false,
"maxBlur": 10,
"multiplicator": "1.3",
"multiplicatorLayers": "1.3",
"parallaxLayers": false,
"set": false,
"setBlur": false,
"setFade": false,
"setGrayScale": false,
"staticLayers": false,
"staticParallaxLayers": false,
"tilt": 30
},
"scrolltimeline": {
"ease": "none",
"fixed": false,
"fixedEnd": 4000,
"fixedStart": 2000,
"layers": false,
"set": false,
"speed": 500
},
"shortcode": "[rev_slider alias=\"slider-1\"][/rev_slider]",
"size": {
"custom": {
"d": true,
"m": true,
"n": true,
"t": true
},
"disableForceFullWidth": false,
"editorCache": {
"d": 500,
"m": 270,
"n": 600,
"t": 430
},
"forceOverflow": false,
"fullScreenOffset": "",
"fullScreenOffsetContainer": "",
"gridEQModule": false,
"height": {
"d": "500px",
"m": "270px",
"n": "600px",
"t": "430px"
},
"keepBPHeight": false,
"maxHeight": 0,
"maxWidth": 0,
"minHeight": "",
"minHeightFullScreen": "",
"overflow": false,
"overflowHidden": false,
"respectAspectRatio": false,
"useFullScreenHeight": true,
"width": {
"d": 1240,
"m": 480,
"n": 1024,
"t": 778
}
},
"skins": {
"cid": 2,
"colors": [
{
"alias": "Highlight",
"ref": [],
"v": "#ff0000"
},
{
"alias": "Headline Text",
"ref": [],
"v": "#ffffff"
},
{
"alias": "Content Text",
"ref": [],
"v": "#00ffff"
}
],
"colorsAtStart": false
},
"snap": {
"adjust": "none",
"gap": 20,
"helpLines": false,
"snap": false
},
"source": {
"facebook": {
"album": "",
"appId": "",
"appSecret": "",
"count": "",
"pageURL": "",
"transient": 1200,
"typeSource": "album"
},
"flickr": {
"apiKey": "",
"count": "",
"galleryURL": "",
"groupURL": "",
"photoSet": "",
"transient": 1200,
"type": "publicphotos",
"userURL": ""
},
"gallery": [],
"instagram": {
"count": "",
"hashTag": "",
"transient": 1200,
"type": "user",
"userId": ""
},
"post": {
"category": "",
"excerptLimit": 55,
"fetchType": "cat_tag",
"list": "",
"maxPosts": 30,
"sortBy": "ID",
"sortDirection": "DESC",
"subType": "post",
"types": "post"
},
"twitter": {
"accessSecret": "",
"accessToken": "",
"consumerKey": "",
"consumerSecret": "",
"count": "",
"excludeReplies": false,
"imageOnly": false,
"includeRetweets": false,
"transient": 1200,
"userId": ""
},
"vimeo": {
"albumId": "",
"channelName": "",
"count": "",
"groupName": "",
"transient": 1200,
"typeSource": "user",
"userName": ""
},
"woo": {
"category": "",
"excerptLimit": 55,
"featuredOnly": false,
"inStockOnly": false,
"maxProducts": 30,
"regPriceFrom": "",
"regPriceTo": "",
"salePriceFrom": "",
"salePriceTo": "",
"sortBy": "ID",
"sortDirection": "DESC",
"types": "product"
},
"youtube": {
"api": "",
"channelId": "",
"count": "",
"playList": "",
"transient": 1200,
"typeSource": "channel"
}
},
"sourcetype": "gallery",
"troubleshooting": {
"alternateImageType": "off",
"alternateURL": "",
"ignoreHeightChanges": false,
"ignoreHeightChangesUnderLimit": 0,
"jsInBody": false,
"jsNoConflict": false,
"outPutFilter": "none",
"simplify_ie8_ios4": false
},
"type": "standard",
"version": "6.2.2",
"visibility": {
"hideAllLayersUnderLimit": 0,
"hideSelectedLayersUnderLimit": 0,
"hideSliderUnderLimit": 0
},
"wrapperclass": ""
}
I can see that is is revolution slider. This is the source I saw for the video
<source src="//askdrdougnow.com/wp-content/uploads/2020/05/videoplayback.webm" type="video/mp4" data-stylerecorder="true" style="text-align: left; line-height: 20px; letter-spacing: 0px; font-weight: 400; border-color: rgb(0, 0, 0); border-style: none; margin: 0px; border-radius: 0px; padding: 0px;">
I know Revolution Slider has a place for editing all sliders and you can set the background of a slider as a video so that is were you would need to find and remove it.
Sample Code
JsFiddle Example for below code.
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares in January, 2018'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [
{
"name": "Display",
"y": 0.1,
"value": 5
},
{
"name": "Paid Social",
"y": 0,
"value": 0,
sliced: true,
selected: true
},
{
"name": "Direct",
"y": 14.5,
"value": 559
},
{
"name": "Referral",
"y": 2,
"value": 77
},
{
"name": "Email",
"y": 4,
"value": 152
},
{
"name": "Other",
"y": 0,
"value": 1
},
{
"name": "Organic Search",
"y": 23.4,
"value": 901
},
{
"name": "Meta Search",
"y": 0.2,
"value": 5
},
{
"name": "Organic Social",
"y": 2.4,
"value": 93
},
{
"name": "Directory",
"y": 0.2,
"value": 9
},
{
"name": "Other Advertising",
"y": 0.1,
"value": 3
},
{
"name": "OTA Referral Traffic",
"y": 0.7,
"value": 26
},
{
"name": "Paid Search",
"y": 27.8,
"value": 1068
},
{
"name": "Local",
"y": 24.5,
"value": 941
}]
}]
});
Scenario
I want to display dataLabels for all even y value is zero.
In Above code We have "name": "Display" y=0.1 but still it is not displaying in Pie Chart don't know why. If any one have idea about this problem please let me know.
The dataLabels are hidden due to lack of space and overlapping. As a solution you can set: padding: 0
plotOptions: {
pie: {
...,
dataLabels: {
padding: 0,
...
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/g5s27tyb/
API Reference: https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels.padding