Shifting the key of a choropleth map with R, rMaps, and datamaps

My challenge is to center the legend below a choropleth map of the United States. I don't have much experience with JS or CSS, but I decided to delve into the datamaps.all.min.js file in the R-3.2.1\library\rMaps\libraries\datamaps\js directory in search for the tag for the legend and its default values. Here's what I discovered:

.datamaps-legend dt, .datamaps-legend dd { 
  float: left; 
  margin: 0 3px 0 0;

} .datamaps-legend dd {
  width: 20px; 
  margin-right: 6px; 
  border-radius: 3px;

} .datamaps-legend {
  padding-bottom: 20px; 
  z-index: 1001; 
  position: absolute; 
  left: 4px; 
  font-size: 12px; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

I made some changes and added it to my header.html file as follows:

.datamaps-legend dt, .datamaps-legend dd { 
  float: left; 
  margin: 0 3px 0 0;

} .datamaps-legend dd {
  width: 20px; 
  margin-right: 6px; 
  border-radius: 3px;

} .datamaps-legend {
  padding-bottom: 20px; 
  z-index: 1001; 
  position: absolute; 
  left: 40px; 
  font-size: 10px; 
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

}

However, it seems like these adjustments are either incorrect or ineffective due to another css file taking precedence over these instructions. Currently, the map section appears like this:

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

The issues include an unexpected bold and italic text treatment and the graphic overflowing onto the tables below despite setting "position: absolute".

cssrrchartsdatamapsrmaps

Answer №1

To customize the appearance of the legend, you can add some CSS code like this:

.datamaps-legend {
  position: absolute;
}

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
}

Answer №2

After some advice from @markmarkoh, I decided to make changes to the template script chart.html found in the directory 

~\R-3.2.1\library\rCharts\libraries\datamaps\layouts
. At the end of the script, I modified it like so:

<style>
.datamaps {
  position: relative;
  display: inline-block;
  text-align: center;
}
.datamaps-legend {
  position: static;
}

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
}
</style>

Next, I saved this edited version to my working folder and updated the figure's template location with the following code:

map1$setTemplate(script = 'chart.html')

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

Guide to vertical centering of inline elements within an inline-block using HTML and CSS

Despite reading numerous resources and articles on vertical alignment/centering in HTML/CSS, I still can't seem to get my specific case working as expected. If you have a moment, please take a look at http://jsfiddle.net/pf29r/3/ <div class="oute ...

htmlcss

The CSS does not get applied to the returned element in Next JS

When I create a function to return a DOM element with an associated className, the local style doesn't seem to be applied. For example: export default function thing(){ const elem = function(){ return (<div className="myCss">Hello< ...

cssreactjsnext.jsstyled-jsx

Troubleshooting a navigation problem with DNN and Bootstrap-3 specifically for mobile devices

Here are the steps to demonstrate this issue: 1. Visit the following page of the website: 2. Resize your browser window to mobile size and close the menu using the icon. After the animation finishes, the navigation items reappear. I have been struggling ...

csstwitter-bootstrap-3dotnetnuke

Disabling the movement of arrows in the client-testimonials-carousel plugin

This plugin that I'm currently using is working flawlessly: However, I'm unsure about how to make the arrows stationary and prevent them from moving. Currently, they are centering themselves based on the height of the div, but I want them to rem ...

javascriptjqueryhtmlcss

pages with parallax scrolling arranged in a unique and unconventional manner

Below the fullscreen home card, I want the about div to appear I am struggling to get it to display correctly. In my HTML code, both divs are in the correct order, but I couldn't find any solutions online. <body> <div class="homeCard"& ...

htmlcssparallax

Utilize custom scrollbar design exclusively for Windows operating system

My goal is to customize the scrollbar style of a div specifically for Windows systems. While most mobile devices have invisible scrollbars that I want to keep hidden, the aesthetics of Mac OS scrollbars are acceptable to me. What I really need is to make t ...

csscss-selectorsscrollbar

Rotating numerous columns using specific names_pattern

I am looking to transform my data frame using pivot_longer() to include a column with the original row number of the data. Here is an example data frame: set.seed(0) df <- data.frame( a = runif(3), b = runif(3), c = runif(3) ) %>% mutate("row ...

rtidyr

Ways to eliminate the gap produced by a fixed element

Why is my chatbox (marked in red) creating unnecessary space at the top (highlighted in yellow), even though it has a sticky position and should not be affecting that area? The other elements on the webpage seem to be impacted by this. How can I prevent th ...

htmlcss

JavaScript personalized video controls. Silence the video by manipulating the input range element

As a newcomer to javascript, I am working on creating custom video controls using js. One issue I am facing is with a span element that contains a mute/unmute icon. When I hover over this span element, a child element appears with an input range bar for ad ...

javascripthtmlcss

utilizing replica variable to generate plots with ggplot2

I am attempting to create a ggplot_dumbbell using the code provided below: library(ggplot2) library(ggalt) theme_set(theme_classic()) df_senPhi <- structure(list(phi = c(0.1, 0.15, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 0.9, 1), W = c(7833625.7334, ...

rggplot2

Implementing jQuery form validation including checking for the strength of the password

My understanding of jQuery was quite basic until I began working on jQuery form validation with password strength check. I successfully completed the password strength check portion, but now I am unsure of how to enable the submit button once the condition ...

javascriptjqueryhtmlcssvalidation

Execute the function when the element comes into view

Is there a way to create a function that will automatically attach itself to an element when it comes into view? I have multiple elements on my page - element1, element2, and element3. Instead of using a large if statement, I would like to write a functio ...

javascriptjqueryhtmlcss

Dynamic row addition in Material Design Lite table causes format to break

Here's the HTML markup for creating a checkbox using material-design-lite: <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox"> <input type="checkbox" id="checkbox" class="mdl-checkbox__input" /> <span c ...

javascripthtmlcssvue.jsmaterial-design-lite

Eliminate pivot_longer identifiers that contain more than one value in R

I have a dataframe with color, sex, id, var, and value columns. color sex id var value 1 blue 0 1 dog_clm NA 2 blue 0 1 dog_clm NA 3 blue 0 1 dog_clm 1 4 blue 1 2 dog_clm ...

rdplyr

What is the best approach to transfer information from the client side to a node

I have an ejs page that looks like this: <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" & ...

javascripthtmlcssnode.jsexpress

Utilizing JavaScript to assign a CSS class to an <li> list item

I am working on a page that includes a menu feature: https://jsfiddle.net/dva4zo8t/ When a menu button is clicked, the color changes and I need to retain this color even after the page is reloaded: $('[id*="button"]').click(function() { $( ...

javascriptjquerycssmenuhighlight

Tips on keeping a Material UI menu item open when clicked

My menu consists of a single item, which is a text field along with a button. The idea is to input some information, save it by clicking the button, and then close the menu either by hitting "close" or the original button again. How can I stop the MenuItem ...

htmlcssreactjsmaterial-ui

A beginner's guide to retrieving random names and images from JSON data for every object using JavaScript

I have a creative idea for a random ruffling game, where it picks a user's name and image randomly. However, I'm facing an issue with ensuring that each image matches the correct user when selected randomly. I want to make sure that every objec ...

javascripthtmlcssarraysjson

Creating a chart of network performance using ggplot2

Does anyone know how to create an NP chart using ggplot2 in R? I have a simple R script that generates bar and point charts, using data from a CSV file. How many columns should I specify and what arguments do I need to pass to the ggplot functions? I am ...

rggplot2

How to Achieve an Overlapping Background Image Effect with Divs Using HTML and CSS

Is it possible to achieve the following scenario using just HTML and CSS? I want to display the background image of my HTML body through a clipped div. Keep in mind that the final website needs to be responsive (mobile-first), so any solution should accom ...

htmlcss