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, first create the svg element and define the gradient.
The gradient can take only discrete values to visualize. 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 won’t have transparencies in your circles you will have to use your bg color to mimic the transparency.

var data = d3.range(30);

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

var minY = 10;
var maxY = 210;

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('opacity', '0.8')
    .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 
    .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

I used random values in the radius field and x / y, but you can use these to illustrate some other dimension of your data.

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>

This site uses Akismet to reduce spam. Learn how your comment data is processed.