Customize Timevis by adjusting the font size with your own CSS styling

I am looking to create a timevis plot where the font size varies based on the importance of each variable.

While I can change the font color using the 'style' option in the source data frame, attempting to adjust the font size in the same manner causes rendering issues in R.

Below is a snippet of my dataset:

data <-    structure(list(groups = c("Deadline.1", "Deadline.1", "Deadline.1", 
"Deadline.1", "Deadline.1"), content = c("Geography Tutorials: Critical 
Thinking & Techniques",  "Principles of Geographical Inquiry I", "Geography 
in Action", 
"Physical Geography: Earth Surface Processes & Landforms", "Biogeography & 
Ecology"
), start = structure(c(17459, 17505, 17631, 17911, 18048), class = "Date"), 
end = structure(c(17459, 17505, 17631, 17911, 18048), class = "Date"), 
type = c("point", "point", "point", "point", "point"), id = c(1L, 
2L, 7L, 9L, 10L), Assessment = c("1500 word essay ", "Group survey", 
"20% attendance (5% per block)", "2 hr exam ", "2 hr exam "
), Percentage = c(15, 15, 20, 100, 100), style = c("'font-size:15px;'", 
"'font-size:15px;'", "'font-size:20px;'", "'font-size:100px;'", 
"'font-size:100px;'")), row.names = c(NA, 5L), class = "data.frame")

Here is a portion of my code where I attempt to link the 'percentage' variable with the font size, which unfortunately does not work as expected.

library(shiny)
library(timevis)
library(tidyr)
library(plyr)
library(dplyr)


data$style            <- paste0("'font-size:", data$Percentage, "px;'")


### example time vis rendering (doesn't work)

timevis(data = data[2:3, ])  ### random variable choice


### but this works

data$style            <- 'color: red'
timevis(data = data[2:3, ])

Any suggestions or feedback would be greatly appreciated. I come from a modeling background rather than app development, so any help with potential HTML errors would be beneficial.

Answer №1

To make it function properly, simply delete the ' character:

data$style <- paste0("font-size:", data$Percentage, "px;")
timevis(data = data[2:3, ])

https://i.sstatic.net/Hvnok.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Experiencing Issues with the Email Button Functionality on My Website

I am looking to create an "Email" button that will send the user-entered text to my email address. Here is the code snippet: <form method="post" action="malto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cb ...

Clicking on an ID within a jQuery list will return the value

<ul id='myid' > <li>Apple MacBook Pro</li> <li>Apple iPad Pro</li> <li>Apple iPhone 12 Pro</li> <li>Apple Watch Series 6</li> <li>Apple AirPods Pro</li> </ul> ...

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

Select2.js Dropdown List with Case Sensitivity

Currently making use of select2.js version 4.0.3 Situation: Imagine the dropdown list contains the following options: JavaScript javascript Javascript javaScript So, when a user types in java, all options are displayed (case is n ...

Reduced complications with mixin scopes

I have developed a parametric mixin that utilizes a unique "node-value" system to locate the children of an element. The process involves detecting the children through a loop function named ".extractArrays", which contains ".deliverChild" within it. Subse ...

Creating an XY plot with multiple discrete y values plotted against x

Currently, I have a data frame structured like this: df <-data.frame("networkNO"=c(1:length(dg)),"AverageDegree"=average_degree,"AverageBetweenness"=average_betweenness,"AverageCloseness"=average_closeness,"ClusterCoefficient"=cluster_coefficient) Eac ...

The element is being hidden by the Bootstrap visibility utility even though it should be visible

On smaller screen sizes, I want to hide the "Updated: " text and only display the date, which is currently working correctly. However, the issue arises on larger screen sizes where it hides the date and only shows the "Updated: " part in the span. .u-da ...

Understanding glmnet: selecting the reference category for multinomial logit models

After asking on the Cross Validate forum about glmnet and multinomial regression, I am still unclear about how to set the reference category in glmnet for this type of logistic regression. Can anyone provide an explanation? Despite glmnet being used for s ...

Text located in the bottom right corner of the window with the use of JavaScript

Is there a way to replace text at the bottom right of the window, as opposed to the page, so that it remains fixed in the corner of the window? I'm looking to create a "share" link that is always visible. ...

What is the best way to position a single element in React using the Grid Component without causing any overlap?

I am struggling with positioning 3 components on my react page: PageHeader, SideMenu & FeatureList (which consists of Display Cards). Here is the code for each component: App.js // App.js code here... PageHeader.js // PageHeader.js code here... SideMenu ...

Tips for customizing the appearance of path elements within an external SVG file being utilized as a background image

How can I change the color of the paths in an SVG background image assigned to a div using CSS? ...

Struggling with incorporating HTML5 elements (such as background colors and text colors) into my website using the WordPress editor

My research process began with browsing the internet to find solutions. I stumbled upon this website that provided some insights. Seeking further guidance, I consulted a friend who recommended using specific code, like this: <head> <link rel="st ...

What is the process for setting data to the value attribute in an input tag, retrieved from a firebase database?

I utilized the following code snippet to retrieve data from Firebase database and store it in the Name variable. var userId = localStorage.getItem('keyName'); var dbRefName = firebase.database().ref() .child(& ...

Conceal a div element using a button through JavaScript

I've been scouring various online resources for solutions, including Stack Overflow and W3Schools, but I haven't had any luck so far. Here's a simplified version of my current code: <script language="javascript"> function remove() ...

Show a popover within a parent div that has limited visible space due to its hidden overflow

Struggling with AngularJS, I can't seem to find a simple solution for this problem. In my code, there's a div element with the overflow: hidden property set due to an internal scrollbar. Inside this div, there's a dropdown menu that is trigg ...

Prevent unwanted padding in lists by using CSS float inside

When organizing my list element, I want to position the control buttons next to the left of the list item text. To achieve this layout, I have applied the CSS property float: left;. However, a problem arises when there are multiple lines in a list - each n ...

Resizing an image proportionally using a div container with a child specifying the height dimension

When using a div element on its own, it automatically adjusts its height to fit its contents. I am trying to achieve a layout where a parent div contains two child elements: another div (or left-aligned image) and an unordered list (ul). The inner div (or ...

The native javascript modal fails to appear

I'm attempting to implement the functionality from this Codepen demo into my project. I've copied over the HTML, CSS, and JavaScript code: <!DOCTYPE HTML> <html> <head> <script> var dialog = docume ...

Improving the efficiency of functions for a 3D array

I am currently working on applying a custom function to individual cells within a 3D array. These cells contain character vectors such as "N", "A", "", "1", and "0" due to previous formatting. I aim to generate a new 3D array with the same dimensions, w ...

How to add a new row to a Kendo grid with a unique custom styling

I am looking for a way to insert new data into a Kendo grid, but I want the added row to have a custom class so that I can style it with a different background color. How can I achieve this? I have searched through all the documentation but couldn't f ...