Horizontal Bar Chart

A simple horizontal bar chart

main
run-button
run-button
reset-button
    // Data is fetched from https://www.charts.com/data/cars-data.json and assigned to the variable data.
    // Schema is fetched from https://www.charts.com/data/cars-schema.json and assigned to the variable schema.
    // An element with id `chart-container` is available in the DOM to house the visualization
    // Create a new DataModel instance with data and schema
    const DataModel = muze.DataModel;
    // Create a new DataModel instance with data and schema
    let dm = new DataModel(data, schema);
    // Perform the groupBy operation followed by binning. This is performed from outside as groupBy needs to happen before sorting.
    dm = dm.groupBy(['Year']).sort([["Acceleration", 'ASC']]);
    // Define a custom mark named 'labeledBar'. There are two labels, one from the dimension plotted in y axis another one from the bar length.
     muze.layerFactory.composeLayers('labeledBar', [{ // Draws the bar layer
        name: 'simplebar',
        mark: 'bar',
        encoding: {
            x: 'labeledBar.encoding.x',
            y: 'labeledBar.encoding.y',
            color: 'labeledBar.encoding.color'
        }
    }, { // Layer for drawing the axis lables on the left hand side
        mark: 'text',
        interactive: false,
        encoding: {
            x: 'labeledBar.encoding.x',
            y: 'labeledBar.encoding.y',
            text: 'labeledBar.encoding.axisText'
        },
        encodingTransform: function encodingTransform(points, layer, dependencies) {
            // after the plots physical dimensions are resolved, encoding transform is used to
            // further change the points
            var barHeight = layer.axes().y.getUnitWidth();

            var pad = 0;
            for (var i = 0; i < points.length; i++) {
                var updateAttrs = points[i].update;
                var textSize = dependencies.smartLabel.getOriSize(points[i].text);
                updateAttrs.x = textSize.width / 2 + 5;
                updateAttrs['alignment-baseline'] = 'middle';
                points[i].color = '#fff';
            }
            return points;
        }
    }, { // Layer for drawing the values of bars on the right hand side
        mark: 'text',
        interactive: false,
        encoding: {
            x: 'labeledBar.encoding.x',
            y: 'labeledBar.encoding.y',
            text: {
                field: 'labeledBar.encoding.valueText.field',
                formatter: function formatter(value) {
                    return value.toFixed(2);
                }
            }
        },
        encodingTransform: function encodingTransform(points, layer, dependencies) {
            // after the plots physical dimensions are resolved, encoding transform is used to
            // further change the points
            var barHeight = layer.axes().y.getUnitWidth();
            var pad = 0;
            for (var i = 0; i < points.length; i++) {
                var updateAttrs = points[i].update;
                var textSize = dependencies.smartLabel.getOriSize(points[i].text);
                updateAttrs.x += textSize.width / 2 + 5;
                updateAttrs['alignment-baseline'] = 'middle';
                points[i].color = '#000';
            }
            return points;
        }
    }]);

    // Create a global environment to share common configs across charts
    var env = window.muze();
    // Create a canvas from the global environment
    var canvas = env.canvas();
    canvas.data(dm).rows(["Year"]) // Year goes in y-axis
    .columns(['Acceleration']) // Acceleration goes in x-axis
    .config({
        axes: { // Dont show the y axis as we are showing the labels on the bars itself
            y: {
                show: false
            }
        },
        border: { // Hide the layout borders for better visibility
            showValueBorders: {
                left: false,
                bottom: false
            }
        }
    }).layers([{
        mark: 'labeledBar', // Use that custom mark to pass encoding values
        encoding: {
            axisText: {
                field: 'Year'
            },
            valueText: {
                field: 'Acceleration'
            }
        }
    }])
    .width(800)
    .height(500)
    .title('Bar chart with axis labels inside the plot area', { position: 'top', align: 'center' })
    .subtitle('Acceleration vs Year', { position: 'top', align: 'center' })
    .mount('#chart-container');