Solid Bar scales and decorations

graphing inside of a function

by Nivaldo

CSS

path {
    stroke: black;
    fill: none;
}

line {
    stroke: black;
}

path.marker {
    fill: red;
    stroke: red;
}

JavaScript

var dataset = [{ "keyword": "1", "global": 1, }, { "keyword": "2", "global": 7, }, { "keyword": "3", "global": 5, }, { "keyword": "4", "global": 0, }, { "keyword": "5", "global": 3, }, { "keyword": "6", "global": 1, }, { "keyword": "7", "global": 0, }, { "keyword": "8", "global": 4, }, { "keyword": "9", "global": 4, }, { "keyword": "10", "global": 0, }];

    Graph(dataset);
    function Graph(input) {
        var margin = {
            top: 15,
            right: 10,
            bottom: 60,
            left: 60
        }, w = 400
            h = 220 - margin.top - margin.bottom;
        var padding = 10;

        // update the margin based on the title size
        var titleSize = measure("Title of Diagram", "title");
        margin.top = titleSize.height + 20;

        //Create X Scale for bar graph
        var xScale = d3.scale.ordinal().domain(input.map(function (d) {
            return d.keyword;
        })).rangeRoundBands([0, w], 0.05);

        //Create Y Scale for bar graph
        var yScale = d3.scale.linear().domain([0, d3.max(input, function (d) {
            return d.global;
        })]).range([h, 0]);

        //Create X Axis
        var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

        //Create Y Axis
        var yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5);

        //Create SVG element
        var svg = d3.select("body").append("svg").attr("width", w + margin.left + margin.right).attr("height", h + margin.top + margin.bottom).append('g').attr("viewBox", "0 0 100 100").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        //Create X axis
        svg.append("g").attr("class", "axis x").attr("transform", "translate(0," + h + ")").call(xAxis).style("fill", "#515151");;

        //Create Title
        svg.append("text").attr("x", w / 2).attr("y", -titleSize.height  + 10).attr("class", "title").style("text-anchor", "start").style("font-size", "24px").text("The Eye of the World");

        //Create...