Bar Chart with Transparent Bars

by duarteleao

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.19/require.min.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/amd/require.config.js"></script>
<script src="//webdetails.github.io/ccc/charts/lib/q01-01.js"></script>
<div id="cccExample" />

JavaScript

require([
  "ccc/pvc", 
  "ccc/def", 
  "ccc/protovis"
], function(pvc, def, pv) {

    new pvc.BarChart({
        canvas: "cccExample",
        width:  550,
        height: 400,

        paddings: 20,
        
        // Data source
        crosstabMode: false,

        // Interaction
        animate:    false,
        selectable: true,
        hoverable:  true,
        legend:     false,
        
        colorRole: "category",
        
        // Proportion of Band occupied vs free space
        baseAxisBandSizeRatio: 0.6,
        
        orthoAxisOffset: 0.02,
        
        base_fillStyle: "black",
        
        // Show a single series.
        dataWhere: function(datum) {
            return datum.atoms.series.value === "London";
        },
        
        bar_fillStyle: function() {
          return this.index === 0 ? this.delegate() : null;
        },
        
        // Don't apply interaction effects.
        bar_strokeStyle: function() {
          return this.finished(this.delegate());
        },
        
        bar_lineWidth: function() {
          return this.finished(this.index === 0 ? this.delegate() : 1);
        }
    })
    .setData(relational_01)
    .render();
});