Context Card

1st Version of the Context Card as used by the Business Landscape Explorer

by IPWright83

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="contextContainer" class="card context-card">
</div>

CSS

svg {
    height: 150px;
}

svg:hover {
    background: #f0f0f0;
}

.card {
    float: left !important;
    overflow: visible !important;
}

.text-sizer {
    fill: red;
}

.main {
    fill: white;
    border: thin solid #8bc34a;
    stroke: #efefef;
    stroke-width: 3px;
}

.stroke {
    fill: none;
    stroke-width: 3px;
    stroke: #8bc34a;
}

.context-card svg .label {
    fill: #8bc34a;
    font-size: 18px;
   text-anchor: middle;
}

.context-card svg .count {
    fill: #8bc34a;
    font-size: 20px;
   text-anchor: middle;
}


/* cards menu */
/* Mixins */
/* Comment here */
.card-list {
  background: #ffffff;
  position: absolute;
  top: 0;
  right: 0;
  width: 338px;
  padding: 10px 10px 10px 10px;
  min-height: 100%;
  opacity: 1;
  z-index: 10;
}
.card {
  margin-bottom: 11px;
  background: #fafafa;
  float: right;
  clear: both;
  font-family: 'Open Sans', Arial, sans-serif;
  width: 318px;
  padding: 10px 12px 15px 12px;
  -moz-transition: box-shadow 0.5s ease;
  -webkit-transition: box-shadow 0.5s ease;
  -o-transition: box-shadow 0.5s ease;
  transition: box-shadow 0.5s ease;
  box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
  /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
  position: relative;
  overflow: hidden !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.card:hover {
  box-shadow: 0px 10px 50px 10px #c6c6c6;
}
.card .content {
  padding: 0px 0px 0px 0px;
}
.card .state {
  padding-right: 0px;
  padding-left: 0px;
  clear: both;
  width: 100%;
}
.card .notification {
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  position: absolute;
}
.card .title {
  color: #33bdde;
  font-size: 14px;
  font-weight: normal;
  display: block;
  padding-bottom: 5px;
}
.card .name {
  color: #303e45;
  font-size: 12px;
  font-weight: normal;
}
.card .label {
  color: #303e45;
  font-size: 12px;
  font-weight: normal;
 ...

JavaScript

var data = [
    { name: "Budget", count: 1000 },    
    { name: "CoM Land", count: 1 },
    { name: "Operating Centre", count: 180 }
];

setTimeout(function() {
    data = [
        { name: "Budget", count: 500 },    
        { name: "CoM Air", count: 1 },
        { name: "Operating Centre", count: 316 },
        { name: "a b c d e f g h i j k l m n o p q r s t u v w x y z", count: 50 },
        { name: "This is quite a long piece of text - wonder how it wraps", count: 50 },
        { name: "C", count: 10 },
        { name: "D", count: 50 },
    ];
    
    render(data);
    
}, 5000);

function render(data) {
    
     function wrap(text, width) {
        var words = text.text().split(/\s+/).reverse();
        var word;
        var line = [];
        var lineNumber = 0;
        var lineHeight = 1.1; // ems
        var y = text.attr("y");
        var dy = parseFloat(text.attr("dy") || 0);
        var tspan = text.text(null)
                        .append("tspan")
                        .attr("x", 0)
                        .attr("y", y)
                        .attr("dy", dy + "em");
        
        var lastTSpan = tspan;
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > width) {               
                line.pop();
                tspan.text(line.join(" "));
                line = [word];
                if(lineNumber === 1) { 
                    lastTSpan.text(lastTSpan.text() + "...");
                    return;
                }
                tspan = text.append("tspan")
                            .attr("x", 0)
                            .attr("y", y)
                            .attr("dy", ++lineNumber * lineHeight + dy + "em")
                            .text(word);
                lastTSpan = tspan;
            }
        }
     };
        
    var circumference = 2 * Math.PI * 40;
    var scale = d3.scale.linear().range([0,...