![]() In the default setting, these values apply to the bounding box of the element onto which the gradient will be applied. The bounding box is the smallest rectangle that can enclose the entire shape. These values define a vector, an arrow, from the starting point to the end point along which the gradient should run. Do we want it to go from left to right (horizontal), top to bottom (vertical) or along an angle? To set this, we use the x1, y1, x2 and y2 attributes in the same manner as an SVG line. Next we have to define the direction of the gradient. Var linearGradient = defs.append( "linearGradient") Append a linearGradient element to the defs and give it a unique id Append a defs (for definition) element to your SVG It’s very important that the gradient gets a unique id that can be referenced later when we set the fill of the rectangle. It contains special elements such as gradients (and filters). But this must be nested within a defs element, where defs is short for definitions. There actually exists a linearGradient element. So how to create an SVG gradient? Creating a Linear SVG gradient And it’s nothing more than an SVG rectangle filled with a linear gradient. The darker the color, the more accidents that happened. It shows a smooth transition between all the colors of my color scale together with numbers designating broadly what each color means in terms of the number of accidents. It’s the colored rectangle below the heatmap that I want to focus on. A smooth color legend for a more general heatmap And if you look longer, you’ll see more interesting trends. With the evenings being even worse than the mornings. No surprise to see the numbers jump up during the morning and evening rush hours. Looking at the data from a different angle than I did in my previous project, this visual (based on Miles McCrocklin’s Heatmap block) shows the number of traffic accidents that occur on each given hour throughout the week. The one below is based on a similar dataset that I used for my Traffic Accidents project, but with data from 2014 instead of 2013. I think a heatmap is a very good example where you can use a smooth color legend. From SVG gradients that can be based on data, dynamic, animated gradients and more, to SVG filters for creating glow, gooey, and fuzzy effects. You can find links to all the other blogs in my kick-off article here. Even for a subject as narrow as SVG filters and gradients, there are more things possible than you might think. ![]() My goal with the talk was to inspire people to experiment with the norm, to create new ways of making a visual more effective or fun. This blog is part of the SVGs beyond mere shapes tutorial series. ![]() It was more about seeing trends and getting a general sense of the numbers, so chopping the colors up into 5 or 6 bins wasn’t what I wanted. It wasn’t really necessary to read the exact value each color represented. I was looking for a way to create a legend that would smoothly go from one color in my color scale to another. My first deviation from just using SVGs merely for their shapes came while trying to create a color legend. Posted on Creating a smooth color legend with an SVG gradient ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |