D3 Examples - CS 725 Information Visualization

Christos Tsolakis

The scatterplot uses the y-coordinate as a position on a common scale to express magnitude(price) and the x-coordinate as spatial region channel to express identity (year). The difference of the proce throughout the years os cleary seen and thus discriminability is preserved.

based on scatterplot d3 code from : /weiglemc/6185069
dataset source http://www.nma.org/pdf/gold/his_gold_prices.pdf

The stacked barchart expresses the magnitude as area of each box and the identity as color hue. Discriminability is retained since the relative sizes betwwen the shares is effectively represented and easily distiguished.

based on stack barchart from http://codepen.io/benlister/pen/bNeLQy
data source http://www.statista.com/statistics/199359/market-share-of-wireless-carriers-in-the-us-by-subscriptions/

R Language - Recreation

#Scatterplot Time <-seq(2005,2011,1) Price <-c(444.74,603.46,695.39,871.96,972.35,1224.53,1571.52) plot(Time,Price,ylab="Price $/troy ounce",main="Price of Gold",pch=19,col="blue")

#Stacked Barchart A <- c(33,34,1,16,16) L <- c("Verizon","AT&T","US Cellular","Sprint","T-Mobile") title <- "Market share of wireless subscriptions in the U.S. for Q3 2015" barplot(as.matrix(A),legend=L,width=0.7,xlim=c(0,1.5),col=c("blue","lightblue","orange","yellow","green"),main=title)

xxxxxxxxxx
 
 <!DOCTYPE html>
<html>
<head>
    <title>IV4 </title>
</head>
<body>
​
​
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">
h1 { 
  font-family: helvetica, arial, sans-serif; 
  text-align:center; 
  margin-top: 80px;
}
​
​
​
    path { fill: #83B0EA;}  
.domain { 
        fill: none; 
        stroke: #000; 
        stroke-width: 1px; 
    }
    
    </style>
<div> 
<script>
    
    
    
    
    
     var dataset0 =
        [[ 2005, 444.74],
        [2006, 603.46],
        [2007, 695.39],
    [2008, 871.96],
    [2009, 972.35],
    [2010, 1224.53],
    [2011, 1571.52]]
  
var margin = {top: 20, right: 20, bottom: 30, left: 61},
    width = 580 - margin.left - margin.right,
    height = 358 - margin.top - margin.bottom;
​
/* 
 * value accessor - returns the value to encode for a given data object.
 * scale - maps value to a visual display encoding, such as a pixel position.
 * map function - maps from data value to display value
 * axis - sets up axis
 */ 
​
// setup x 
var xValue = function(d) { return d[0];} // data -> value
    xScale = d3.scale.linear().range([0, width]), // value -> display
    xMap = function(d) { return xScale(xValue(d));}, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom").
    tickFormat(d3.format(".0f"))  // remove comma from year
​
// setup y
var yValue = function(d) { return d[1];}, // data -> value
    yScale = d3.scale.linear().range([height,0]), // value -> display
    yMap = function(d) { return yScale(yValue(d));}, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(10)
​
​
// add the graph canvas to the body of the webpage
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
​
​
  // don't want dots overlapping axis, so add in buffer to data domain
  xScale.domain([d3.min(dataset0, xValue)-1, d3.max(dataset0, xValue)+1]);
  yScale.domain([d3.min(dataset0, yValue)-100, d3.max(dataset0, yValue)+100]);
​
  // x-axis
  svg.append("g")
      .attr("class","axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Year")
           
​
  // y-axis
  svg.append("g")
       .attr("class","axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y",15)
      .attr("x",-220)
      .attr("dy", "0.1988em")
      .style("text-anchor", "middle")
      .text("Price  $/troy ounce");
​
  // draw dots
  var Dots = svg.selectAll(".dot")
      .data(dataset0)
      .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 4.5)
      .attr("cx", xMap)
      .attr("cy", height)
        .attr("fill","blue")
  //Adding ta title
  //source https://www.d3noob.org/2013/01/adding-title-to-your-d3js-graph.html
svg.append("text")
        .attr("x", (width / 2))             
        .attr("y", 0 - (margin.top /5))
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Price of Gold ");
​
    Dots.transition()
        .duration(2500)
        .ease("linear")
        .attr("cy",yMap)
​
</script>
</div>
<div>
<script>
    //==============================================================================
  var data = [
       {
            "Verizon":33,
            "AT&T":34,
            "US Cellular":1,
            "Sprint":16,
            "T-Mobile":16,
      
         },
​
];
​
    var margin = {  top: 56,
            right: 76,
            bottom: 40,
            left: 183
            },
            width = 614 - margin.left - margin.right,
            height = 315 - margin.top - margin.bottom,
            that = this;
​
​
            var x = d3.scale.ordinal().rangeRoundBands([0, width],0.5);
​
            var y = d3.scale.linear().rangeRound([height, 0]);
​
            var color = d3.scale.category20();
​
            var xAxis = d3.svg.axis().scale(x).orient("bottom");
​
            var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".0%"));
​
            var svg = d3.selectAll("body").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
            color.domain(d3.keys(data[0]))
​
            data.forEach(function (d) {
                var y0 = 0;
​
                d.rates = color.domain()
                        .map(function (name) { return {
                                              name: name,
                                              y0: y0,
                                              y1: y0+=d[name],
                                              amount: d[name]
                                            };
                                          });
        d.rates.forEach(function (d) {d.y0 /= y0;
                                    d.y1 /= y0;});
​
                console.log(data);
                                                                });
​
​
            x.domain(data.map(function (d) { return d.interest_rate;}));
​
            svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
​
            svg.append("g").attr("class", "y axis").call(yAxis);
​
            var interest_rate = svg.selectAll()
                               .data(data)
                               .enter()
                               .append("g")
                               .attr("transform", function (d) {return "translate(" + x(d.interest_rate) + ",0)";});
​
            interest_rate.selectAll("rect")
                         .data(function (d) { return d.rates;})
                         .enter()
                         .append("rect")
                         .attr("width", x.rangeBand())
                         .attr("y", function (d) { return y(d.y1);  })
                         .attr("height", function (d) { return y(d.y0) - y(d.y1);})
                         .style("fill", function (d) {return color(d.name);})
                         .attr("data-legend",function(d) { return d.name})
      
​
            
​
​
​
            var legend = svg.selectAll(".legend")
                        .data(color.domain().slice().reverse())
                        .enter().append("g")
                        .attr("class", "legend")
                        .attr("transform", function (d, i) {return "translate(0," + i * 60 + ")";})
                        
      
​
            //category colors
            legend.append("rect")
                .attr("x", width + -101)
                .attr("width", 11)
                .attr("height", 10)
                .style("fill", color);
​
            legend.append("text")
                .attr("x", width - 76)
                .attr("y", 10)
                .style("text-anchor", "start")
                .text(function (d) {return d;   });
    //Title
    svg.append("text")
        .attr("x", (width)-200)
       .attr("y", (margin.top )-80)
        .attr("text-anchor", "middle")  
        .style("font-size", "16px") 
        .style("text-decoration", "underline")  
        .text("Market share of wireless subscriptions  in the U.S. for Q3 2015 ");
​
​
​
    </script>
    </div>
</body>
</html>
​
​
    