Context Menu Example (No Menu)

HTML

<h1>Over Here, Captain</h1>
<p>Casualties by division in <cite>Star Trek</cite>'s original series.</p>
<div class="canvas">
<svg>
    <rect id="backdrop" />
    <g id="chart">
        <g id="art" />
        <g id="labels" />
    </g>
</svg>
</div>

<p>Data from <a href="http://en.memory-alpha.org/wiki/Portal:Main">Memory Alpha</a>, compiled by <a href="http://preview.tinyurl.com/af7ur8q">Matthew Barsalou</a>.

CSS

/* Styles for our labels */
.label {
    font-family: arial,helvetica,'sans-serif';
    font-size: 24px;
    text-anchor: middle;
    alignment-baseline: text-before-edge;
}

.canvas {
    position: absolute;
}

.popup {
    position: absolute;
    left: 0;
    top: 0;
    background-color: #fff;
    width: 200px;
    border: 1px #ccc solid;
    border-radius: 6px;
    box-shadow: #333 2px 2px 4px;
    padding: 8px;
    font-family: arial, helvetica, sans-serif;
}

.popup h2 {
  margin: 0 0 1rem 0;    
}


/* Assign styles to bars based on division labels */
.com {
    fill: goldenrod;
}
.sci {
    fill: royalblue;
}
.ops {
    fill: crimson;
}

svg {
    border: 1px #000 solid;
}

#backdrop {
    fill: oldlace;   
}
}

JavaScript

// Our dataset, based on data from 
// http://en.memory-alpha.org/wiki/Portal:Main and 
// collected by Matthew Barsalou, http://preview.tinyurl.com/af7ur8q
over_here_captain = [
    {
        division: "com",
        display_division: "Command",
        display_color: "Gold",
        casualties: 9,
        link: "http://en.memory-alpha.org/wiki/Command_division",
        link_text: "Read more about this division."        
    },
    {
        division: "sci",
        display_division: "Sciences",
        display_color: "Blue",
        casualties: 7,
        link: "http://en.memory-alpha.org/wiki/Sciences_division",
        link_text: "Read more about this division."        
    },
    {
        division: "ops",
        display_division: "Operations",        
        display_color: "Red",
        casualties: 24,
        link: "http://en.memory-alpha.org/wiki/Operations_division",
        link_text: "Read more about this division."        
    }
];

// Define the size of our chart and 
// some common layout properties
cDim = {
    height: 500,
    width: 500,
    barMargin: 10
};

/* 
 *  Chart drawing block
 *  We have to have something to label before
 *  we can label anything.
 */

// Let's precalculate the bar width. We can 
// get away with this because the data set
// is not dynamic.

// Figure out how much space is actually available 
// for the bars.
marginlessWidth = cDim.width - (cDim.barMargin * (over_here_captain.length - 1));
cDim.barWidth = marginlessWidth  / over_here_captain.length;

// Set the height and width of our SVG element
svg = d3.select("svg").attr({
    height: cDim.height,
    width: cDim.width
});

// Set the height and width of our backdrop rect
backdrop = d3.select("#backdrop").attr({
    x:0,
    y:0,
    height: cDim.height,
    width: cDim.width
});

// Store references to our two layers. 
// "Art" is our chart canvas and "labels,"
// funnily enough, is where we're going to 
// put our labels.
art = d3.select("#art");
labels =...