generating bar chart from scatterplot at real time

by Nivaldo

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<h1 style="color:#1D4F91; font-size: 32px"> D3 Scatterplot 1 </h1>

 <h2 style="color:#1D4F91; font-size: 24px"> SAMPLE CODE FOR PROJECT </h2> 
<div id="container" style="width:1050px; height:300px; background-color: lightgray; float: left;">
    <div id="container1" style="width:500px; height:300px; background-color: lightgray; float: left;"></div>
    <div id="containerFill" style="width:50px; height:300px; background-color: #13294B; float: left;"></div>
    <div id="container2" style="width:500px; height:300px; background-color: #cccccc; float: left;"></div>
</div>
<p style="font-family: serif; color: #1D4F91; position: absolute; left:800px; top:115px;">Click bubble to add data to bar chart.
    </

CSS

.axis path, .axis line {
    fill: none;
    opacity: 1;
    stroke: black;
    shape-rendering: crispEdges;
}
.axis text {
    font-family:sans-serif;
    font-size: 12px;
}
rect {
    fill: steelblue;
}

JavaScript

var dataset = [];
var numDataPoints = 250;
var xRange = Math.random();
var yRange = Math.random();
for (var i = 0; i < numDataPoints; i++) {
    var newNumber1 = Math.random() * xRange;
    var newNumber2 = Math.random() * yRange;
    dataset.push([newNumber1, newNumber2]);
}

//Create empty data set for bar chart 

var barChartData = [];

//Add a scalable vector graphic (SVG) "element" that 
//will call on the D3 document object model (DOM). 
//This will define the 'space' or box that will 
//display the code.
//It is easier to first add a few variables here to 
//to centralize deminsions for our 'space'.  We can
//use "w" for width and "h" for height.  We will also use 
//a "padding" variable to ensure the visuals do not get cut
//off.

var h = 300;
var w = 500;
var padding = 75;
var svg = d3.select("#container1")
    .append("svg")
    .attr("width", w)
    .attr("height", h);


//Width and height for second chart area
var w2 = w;
var h2 = h;
//Space between bars in the bar chart
var barPadding2 = 5;

//Number formatting for chart 1 axes:
var formatAsPercentage = d3.format(".1%");

//Now we start to add scale to our data, which is the
//first step in adding axis.
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[0];
})])
    .range([padding, w - 25]); //set low range to '0'.

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[1];
})])
    .range([h - 25, 25]); //set low range to '0'.


//...and a scale for the radius of the circles.
var rScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
    return d[1];
})])
    .range([2, 5]);

//Create a variables for the axes:
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
//Format the tick marks and numbers like this
.ticks(5)
    .tickFormat(formatAsPercentage);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
//Format the tick marks like this
.ticks(5)
   ...