I am utilizing this chart as a guide for my current project
Explore Vega Editor here
https://i.sstatic.net/VGOee.png
Is there a way to rearrange the order of the 'Measure' while keeping 'Measure 1' at the top, disregarding its negative value? I want to display the '-' sign in the text but have the bar appear at the top.
To David: One of the bars needs to be positioned so that even if it is negative, it remains on top
Is this what you're looking for? If so, a sort is necessary.
https://i.sstatic.net/EV9RR.png
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"Value": 0.321, "Date": "09/30/2021", "Measure": "Measure 4"},
{"Value": 0.031, "Date": "09/30/2021", "Measure": "Measure 3"},
{"Value": 0.123, "Date": "09/30/2021", "Measure": "Measure 2"},
{"Value": -0.475, "Date": "09/30/2021", "Measure": "Measure 1"}
]
},
"width": 500,
"height": 250,
"resolve": {"scale": {"color": "independent"}},
"layer": [
{
"mark": "bar",
"encoding": {
"y": {
"field": "Value",
"type": "quantitative",
"axis": {"format": ".1%"},
"sort": "descending"
},
"x": {"field": "Date", "type": "nominal", "axis": {"labelAngle": -45}},
"color": {"field": "Measure", "type": "nominal"}
}
},
{
"transform": [
{
"stack": "Value",
"groupby": ["Date"],
"as": ["lower", "upper"],
"sort": [{"field": "Measure", "order": "descending"}]
},
{"calculate": "(datum.lower + datum.upper) / 2", "as": "midpoint"}
],
"mark": {"type": "text"},
"encoding": {
"y": {"field": "midpoint", "type": "quantitative"},
"x": {"field": "Date", "type": "nominal"},
"color": {
"field": "Measure",
"type": "nominal",
"scale": {"range": ["white"]},
"legend": null
},
"text": {"aggregate": "sum", "field": "Value"}
}
}
]
}
As I follow a tutorial, I am working on importing the stripe function from two js files. The goal is to display my stripe payment in a modal. However, I am unsure how to close the modal once I receive a successful payment message in the child. Below are s ...
Currently, I am facing an issue while trying to load text from a txt document into a div using the following code: $(document).ready(function(){ $('button').click(function(){ $('#contenthere').load('Load.txt'); ...
I am looking to implement a function that needs to be called under certain conditions: It should be triggered every second while a key is being held down (for example, if the key is held down for five seconds, it should fire 5 times every second). If ...
Is my webpage optimized for SEO if it was created using appendChild and innerHTML with JavaScript? Can react.js improve the SEO of a webpage? ...
One common method I have come across for storing tiles offline with Leaflet involves using localforage. Here's an example: const map = L.map("map-id"); const offlineLayer = L.tileLayer.offline('https://server.arcgisonline.com/ArcGIS/res ...
I have come across a stunning 2D Highway background image that I plan to use for my mobile racing game project which involves JS and CSS3. The image can be found at this link. My goal is to create an animation of the road in order to give players the illu ...
I have a script that scans through a field and highlights the words related to the search input. I want this script to not only filter by title, but also by name. How can I adjust the code to filter both the title and name when searching? <li ng-repeat ...
In my MVC 3 project, I have generated a csv file in an Action Method on the server named GetCSV() which is designated as an [HttpPost] action method. My goal is to send this csv file directly to the web browser for download. While I was able to achieve t ...
I'm having trouble sending data from my React application to an AWS Lambda function through API Gateway. Here is the code snippet from my React app: const exampleObj = { firstName: 'Test', lastName: 'Person' }; fetch(process.env.R ...
Currently tackling an issue with my small blog app and I seem to be stuck at this error- { "message": "Cast to ObjectId failed for value \" 597c4ce202ca9c353fc80e8a\" at path \"_id\" for model \"Blog\"", "name": "CastErr ...
Exploring websocket connections, I am looking to send a JSON object from the client to the server: const WebSocket = require('ws'); const wss = new WebSocket.Server({port: 8082}); wss.on("connection", (ws) => { console.log('s ...
On my website, there is an arrow located on the middle right side that, when hovered over with the mouse, reveals a sidebar. Clicking on each icon in the sidebar further extends it to reveal more content. However, the issue I am facing is that the sidebar ...
I am a beginner in the realm of react and have encountered an issue with my app, which is a simple e-commerce platform. The problem arises when I try to enter the shipping address during the checkout process, as it throws an error. TypeError: Cannot read ...
Struggling to find a solution after reading several articles, I am working on fetching a large JSON from an API and I want to cache the response in the localStorage. The goal is for the script to check for an object with the requested ID in the cached JSON ...
I'm currently facing an issue with integrating FullCalendar into my rails application. Specifically, I am encountering difficulties with saving after performing drag-and-drop actions. Within my application, I have two models - Event and Workout. The ...
I'm trying to update this code snippet import React from 'react' const App = () => { function getScrollPercent() { var h = document.documentElement, b = document.body, st = 'scrollTop', sh = 'scrollHeight ...
My Table Cell Checkbox Behavior Issue: Within a table cell, I have a checkbox that changes upon clicking it. However, the change only occurs the first time. Subsequent clicks on the same checkbox do not trigger any change until I click outside the cell. T ...
Is there a way to make a post request to the mLab Database in order to determine if a user account already exists? The server's response states that the User is not defined. Can you please review my code? // @route post api/user/login# router.post(& ...
After transforming an XML file with xsl and loading it into a browser as html, I am making the html editable using the content editable attribute of html5. How can I transform their edits back to the original xml document, even if they add new nodes to e ...
Is there a way to incorporate an environmental texture into Autodesk Forge Viewer v6.0? I know in Three.js you can apply a texture to the scene's background and environment, so how would I achieve this in APS viewer? I'm not looking for a skybox ...