Mathematics

Data Visualization

Interactive data visualization has never been so wonderful. R packages like ggviz or shiny made it doable for many users like me. And D3? Does it have any limit? I could not resist to put a simple D3 example that could be reproduced by anyone. The main purpose is to demonstrate the quality of user interactivity with a data plot. To make it simple we used color as our input data, we interact with a text while the colored circle is focused. Note that interacting text could be any other plot where we would like to display some information based on each circle.

Just move your mouse over circles and see the color of that particular circle.

HTML Source Code

The complete HTML source code to generate this simple D3 example is given below. If you want to reproduce this, please copy the codes in a plain text editor and save as (say circleD3.html). Open the saved HTML file on a web browser.

<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
circle {
stroke: white;
stroke-width: 3px;
}
</style>
</head>
<body>

<div id="svgHolder">
<p>Just move your mouse over circles and see the color of that particular circle.</p>
<svg id="d3svg"> </svg>
<h4 id="colorN"> </h4>
</div>

<script>
var svg = d3.select("#d3svg");

// JSON data format for circle color and x coordinate
var data = [
{"x":"70", "colorN":"#F8766D"},
{"x":"130", "colorN":"#7CAE00"},
{"x":"180", "colorN":"#00BFC4"},
{"x":"240", "colorN":"#C77CFF"}
];

//drawing the circles on svg element
svg.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", 60)
.attr("r", 35)
.style("fill", function(d) { return d.colorN; });

//action on circles starts here
d3.selectAll("circle")
.on("mouseover", function() {
makeBig(d3.select(this));
getColor(d3.select(this));
})
.on("mouseout", function() {
makeNormal(d3.select(this));
d3.select("#colorN").text("");
});


//defining some functions
makeBig = function(thisCircle){
thisCircle
.transition()
.duration(1000)
.attr("r", 60);
}

makeNormal = function(thisCircle){
thisCircle
.transition()
.duration(500)
.attr("r", 35);
}

getColor = function(thisCircle){
colorVal = thisCircle.style("fill");
msg = "The color of this circle is : " + colorVal;
d3.select("#colorN")
.text(msg)
.style("color", colorVal);
}

</script>

</body>
</html>

Note: In case the HTML file do not run, you may need to put it in a web server or convert your machine into a temporary web server. For MAC users, a command like python -m http.server 8888 & can turn the machine into a temporary web server. You have to run this command from the same directory where you save your newly created HTML file. Now it can be viewed in any web browser from the link localhost:8888/circleD3.html

R Code

In this example 4 contrasting colors were used. These colors are taken from equally spaced hues around the color wheel. The R codes to obtain these colors is shown below. This is the default color scheme for R package ggplot2.
n <- 4
hues <- seq(15, 375, length=n+1)
cols <- hcl(h=hues, l=65, c=100)[1:n]
#list the color
cols