D3 Playground

by Maria Karanasou

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<div id="chart"></div>

JavaScript

var dataArray = [{"name":"CABOOLTURE","number":"354"},{"name":"KILCOY","number":"15"},{"name":"Pine Rivers","number":"352"},{"name":"RBWH","number":"1840"},{"name":"REDCLIFFE","number":"197"},{"name":"TPCH","number":"1578"}];

var dataArrayDos = [{"name":"CABOOLTURE","number":"54"},{"name":"KILCOY","number":"14"},{"name":"Pine Rivers","number":"52"},{"name":"RBWH","number":"840"},{"name":"REDCLIFFE","number":"97"},{"name":"TPCH","number":"178"}];



var max = d3.max(dataArray, function(d) { return parseInt(d.number); } );

var MyWidth = 700;

        var margin = {top: 20, right: 5, bottom: 30, left: 53},
            width = MyWidth - margin.left - margin.right,
            height = ( (width*0.75) - margin.top - margin.bottom );

        var yScale = d3.scale.linear()
            .domain([0, max])
            .range([0, height]);

        var colors = d3.scale.linear()
            .domain([0, max])
            .range(["#269", "#fa1"]);

        var xScale = d3.scale.ordinal()
            .domain(d3.range(0, dataArray.length))
            .rangeBands([0, width]);

        var tooltip = d3.select('body').append('div')
            .style('position', 'absolute')
            .style('background', '#fff')
            .style('padding', '8 21px')
            .style('border', '2px rgba(0, 0, 0, 0.74) solid')
            .style('border-radius', '5px')
            .style('opacity', '0')
            .style('font-size', 'large');

        var animateDuration =0,
            animateDelay = 0;

//SVG element

        var myChart = d3.select('#chart').append("svg")
            .attr("class", 'myChart')
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .style("background", 'rgba(200, 200, 200, 0.04)')
            .append('g')
            .attr('transform', 'translate('+margin.left+','+margin.top+')')

            .selectAll("rect")
            .data(dataArray)
           ...