Here’s a solution using base R graphics: #Some sample data x <- runif(100) dat <- data.frame(x = x,y = x^2 + 1) #Create a function to generate a continuous color palette rbPal <- colorRampPalette(c(‘red’,’blue’)) #This adds a column of color values # based on the y values dat$Col <- rbPal(10)[as.numeric(cut(dat$y,breaks = 10))] plot(dat$x,dat$y,pch = 20,col … Read more
Just as depicted in Pyplot: vertical gradient fill under curve? one may use an image to create a gradient plot. Since bars are rectangular the extent of the image can be directly set to the bar’s position and size. One can loop over all bars and create an image at the respective position. The result … Read more
Transitions are not supported yet on webkit gradients. It’s in the spec, but it doesn’t work yet. (p.s. if you’re doing color transitions only – you may want to check out -webkit-filters – which do animate!) Update: gradient transitions apparently do work in IE10+
And here’s an approach in base R, where we fill the entire plot area with rectangles of graduated colour, and subsequently fill the inverse of the area of interest with white. shade <- function(x, y, col, n=500, xlab=’x’, ylab=’y’, …) { # x, y: the x and y coordinates # col: a vector of colours … Read more
There may be a better way, but here goes: from matplotlib import pyplot as plt x = range(10) y = range(10) z = [[z] * 10 for z in range(10)] num_bars = 100 # more bars = smoother gradient plt.contourf(x, y, z, num_bars) background_color=”w” plt.fill_between(x, y, y2=max(y), color=background_color) plt.show() Shows:
I’ve been wondering this exact same thing. The solution is actually quite simple. Although this is of course quite a modern feature, so you’re stuck to browser compatibility. Webkit can take care of this with a single line of CSS: -webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) (The new standardised way of doing it … Read more
Just use in the CSS whatever you would use in a fill attribute. Of course, this requires that you have defined the linear gradient somewhere in your SVG. Here is a complete example: rect { cursor: pointer; shape-rendering: crispEdges; fill: url(#MyGradient); } <svg width=”100″ height=”50″ version=”1.1″ xmlns=”http://www.w3.org/2000/svg”> <style type=”text/css”> rect{fill:url(#MyGradient)} </style> <defs> <linearGradient id=”MyGradient”> <stop … Read more
This is by far the most hassle free and best way to implement this. It is purely CSS and very very simple to do, no extra files – nothing. Ok, it’s not the best way possible, but it works very well, very reliable (never failed when testing across very old browsers) and very fast to … Read more
To do this in code, you create a GradientDrawable. The only chance to set the angle and color is in the constructor. If you want to change the color or angle, just create a new GradientDrawable and set it as the background View layout = findViewById(R.id.mainlayout); GradientDrawable gd = new GradientDrawable( GradientDrawable.Orientation.TOP_BOTTOM, new int[] {0xFF616261,0xFF131313}); … Read more
I created a JS library, RainbowVis-JS to solve this general problem. You just have to set the number of items using setNumberRange and set the start and end colour using setSpectrum. Then you get the hex colour code with colourAt. var numberOfItems = 8; var rainbow = new Rainbow(); rainbow.setNumberRange(1, numberOfItems); rainbow.setSpectrum(‘red’, ‘black’); var s=””; … Read more