An Even Better Context Menu Example

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<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 = d3.select("#labels");



// Let's make a scale so the bar data fills the chart space.
// First, we need to get the maximum value of...