partially filled svg visualization

Using gradient stops and transparency we can fill circle partially in svg. Doing this dynamically using data may be great visualization technique.

You can read my another article which uses the circle over circle and clipping to do similar task here Create filled circle to visualize data using svg.

So, moving on to gradient stops and transparency technique.

First you will require d3.js get it here

Partially filled circle data visualization in svg using d3js

Here is our Javascript

var data = d3.range(30);

var svg ="body").append("svg");

var minY = 10;
var maxY = 210;

// This is a discrete values array that can be visualized with this example.
// In this tutorial we assume the data value is a set of discrete categories.
// Like low, medium, medium high, high, extreme , etc for continuous values like 81 or so
// You will have to use the other technique of which I shared the link above.
// Though you wont have transparencies in your circles you will have to use your bg color
// to mimic the transparency.

var gradientData = [0,25,50,75,100];
var gradient = svg
    .attr("y1", "1")
    .attr("y2", "0")
    .attr("x1", "0")
    .attr("x2", "0")
    .attr("gradientUnits", "objectBoundingBox")
    .attr('id', function(d){return "gradient-"+d})
        .attr("offset", "0")
        .attr("stop-opacity", "1")
    .attr("stop-color", function(d){return "hsl("+ -d*1.5 +",50%,50%)";})
        .attr("offset", function(d){return d+"%"})
        .attr("stop-opacity", "1")
         .attr("stop-color", function(d){return "hsl("+ -d*1.5 +",50%,50%)";})
        .attr("offset",  function(d){return d+"%"})
        .attr("stop-opacity", "0")
        .attr("stop-color", "#fa0")

// Now drawing the circles and using the appropriate gradient to fill them.
    .attr("cx", function(d){return d*35+50})
.attr("cy", function(d){return Math.random()*250+50} ) //randomly positioning the circle
    .attr("stroke-width", 1)
    .attr("stroke", "hsl(100,50%,50%)") 
    .attr("r", function(d){return Math.random()*20+20}) // Random radius .. you can use this to illustrate some other dimension of your data.
.attr("fill", function(d){return "url(#gradient-"+ (Math.round(Math.random()*4)*25) +")"});
// I used the random function that will give 0 25 50 75 100 as the value


See it working here



Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>