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.
How can I apply different styles to the delivered and pending section lists?
I would like to change the color text of the status data.
Like status data pending Text should be red.
And status data delivered Text should be green.
How can I do this?
or I Should put this data manually? s
Code Bellow:
const delivered = [
{
id: 1,
title: 'Lanche, MADERO',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 2,
title: 'McDonalds',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 3,
title: 'Bobs',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 4,
title: 'Burguer King',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 5,
title: 'Outback',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 6,
title: 'Esfiha',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 7,
title: 'Habibs',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
{
id: 8,
title: 'McDonalds',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Delivered',
},
];
const pending = [
{
id: 1,
title: 'Sushi Garden',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Pending',
},
{
id: 2,
title: 'Gendai Sushi',
description: 'Rua Joao da silva, 22, 12 horas atrás',
status: 'Situação: Pending',
},
];
export default class LastOrders extends Component {
renderItem = ({item}) => (
<TouchableOpacity
onPress={() => {
const {navigation} = this.props;
navigation.navigate('OrderDetail');
}}>
<View style={styles.productContainer}>
<Text style={styles.productTitle}>{item.title}</Text>
<Text style={styles.productDescription}>{item.description}</Text>
<Text style={styles.productStatus}>{item.status}</Text>
</View>
</TouchableOpacity>
);
render() {
return (
<View style={styles.container}>
<SectionList
sections={[
{title: 'Entregas Pendentes', data: pending},
{title: 'Entregas Completas', data: delivered},
]}
renderItem={this.renderItem}
renderSectionHeader={({section}) => (
<View>
<Text style={styles.header}>{section.title}</Text>
</View>
)}
showsVerticalScrollIndicator={false}
keyExtractor={(item) => item.id}
/>
</View>
);
Styles Code Bellow:
import {StyleSheet} from 'react-native';
export default StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
list: {
padding: 20,
},
productContainer: {
backgroundColor: '#f5f5f5',
borderWidth: 1,
borderColor: '#fff',
borderRadius: 4,
padding: 20,
marginBottom: 20,
},
productTitle: {
fontSize: 18,
fontWeight: 'bold',
color: '#000',
},
productDescription: {
fontSize: 16,
color: '#999',
marginTop: 5,
lineHeight: 24,
},
productStatus: {
fontSize: 16,
color: 'red',
marginTop: 5,
lineHeight: 24,
},
header: {
fontWeight: 'bold',
fontSize: 20,
marginTop: 30,
marginLeft: 20,
},
});
You just have to set the style conditionally.
Your renderItem should be something like below, here I've compared the string directly, if you have some sort of ID for status better compare that.
renderItem = ({ item }) => (
<TouchableOpacity
onPress={() => {
const { navigation } = this.props;
navigation.navigate('OrderDetail');
}}>
<View style={styles.productContainer}>
<Text style={styles.productTitle}>{item.title}</Text>
<Text style={styles.productDescription}>{item.description}</Text>
<Text
style={
item.status === 'Situação: Pending'
? styles.productStatus
: styles.productStatusDelivered
}>
{item.status}
</Text>
</View>
</TouchableOpacity>
);
You will need a new style like this as well
productStatusDelivered: {
fontSize: 16,
color: 'green',
marginTop: 5,
lineHeight: 24,
},
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
Vega is available as CDN script that can be included in HTML & used directly in js code.
But, how to proceed if we wish to use the same with generic web components built with polymer or StencilJS. including CDN js is not a good idea there.
Is there any way to include vega as npm module in such projects ?
have a look at this fiddle it is a native webComponent using vega:
<script src="https://cdn.jsdelivr.net/npm/vega#5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite#3"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed#4"></script>
<script type="module">
const barChart = {
"$schema": "https://vega.github.io/schema/vega/v5.json",
"width": 400,
"height": 200,
"padding": 5,
"data": [
{
"name": "table",
"values": [
{"category": "A", "amount": 28},
{"category": "B", "amount": 55},
{"category": "C", "amount": 43},
{"category": "D", "amount": 91},
{"category": "E", "amount": 81},
{"category": "F", "amount": 53},
{"category": "G", "amount": 19},
{"category": "H", "amount": 87}
]
}
],
"signals": [
{
"name": "tooltip",
"value": {},
"on": [
{"events": "rect:mouseover", "update": "datum"},
{"events": "rect:mouseout", "update": "{}"}
]
}
],
"scales": [
{
"name": "xscale",
"type": "band",
"domain": {"data": "table", "field": "category"},
"range": "width",
"padding": 0.05,
"round": true
},
{
"name": "yscale",
"domain": {"data": "table", "field": "amount"},
"nice": true,
"range": "height"
}
],
"axes": [
{ "orient": "bottom", "scale": "xscale" },
{ "orient": "left", "scale": "yscale" }
],
"marks": [
{
"type": "rect",
"from": {"data":"table"},
"encode": {
"enter": {
"x": {"scale": "xscale", "field": "category"},
"width": {"scale": "xscale", "band": 1},
"y": {"scale": "yscale", "field": "amount"},
"y2": {"scale": "yscale", "value": 0}
},
"update": {
"fill": {"value": "steelblue"}
},
"hover": {
"fill": {"value": "red"}
}
}
},
{
"type": "text",
"encode": {
"enter": {
"align": {"value": "center"},
"baseline": {"value": "bottom"},
"fill": {"value": "#333"}
},
"update": {
"x": {"scale": "xscale", "signal": "tooltip.category", "band": 0.5},
"y": {"scale": "yscale", "signal": "tooltip.amount", "offset": -2},
"text": {"signal": "tooltip.amount"},
"fillOpacity": [
{"test": "datum === tooltip", "value": 0},
{"value": 1}
]
}
}
}
]
}
class VegaElement extends HTMLElement {
constructor() {
super()
this.innerHTML = "<div id='view'></div>"
}
connectedCallback() {
vegaEmbed( '#view', barChart ); }
}
customElements.define('vega-element', VegaElement);
</script>
<vega-element></vega-element>