Skip to content

Commit

Permalink
study the structure to hold other charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@ucaiado
ucaiado committed Aug 27, 2015
1 parent 7b77726 commit 0f16b38
Show file tree
Hide file tree
Showing 5 changed files with 187 additions and 136 deletions.
16 changes: 13 additions & 3 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,15 @@ color: #a81817;
.warning{
color: rgb( 240, 20, 20 )
}
/********************************
** FILE: ink.css
********************************/

.ink {

font-family: Arial, Helvetica, sans-serif;

}

/********************************
** FILE: basicChart.css
Expand All @@ -94,12 +103,13 @@ color: #a81817;
stroke: #666;
}
.axis text {
font-family: Arial, Helvetica, sans-serif;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 12px;
font-weight: lighter;
}
.y text {
fill:#666;
font-weight: normal;
/*font-weight: normal;*/
}

.y.axis .tick.minor {
Expand All @@ -119,7 +129,7 @@ color: #a81817;
}

rect {
/*fill: lightgrey;*/
fill: #71718E;
shape-rendering: crispEdges;
}

Expand Down
Binary file added data/img1-md.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
54 changes: 47 additions & 7 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ <h1>How Important Is The Time Spent Studying Out Of School</h1>

</div>


<!-- Show udacity hours chart -->
<div class="my-canvas-wrap">
<div class="row">
<div class="row" id="FirstChart" style="display:none;">
<div class="my-canvas-legend">
Hours
<div class="my-canvas-tiny-legend">
Expand All @@ -67,19 +67,57 @@ <h1>How Important Is The Time Spent Studying Out Of School</h1>
</div>

<div class="my-explainer">
<div class="my-title">Hours Studied at Udacity</div>
<div class="my-description">
Describe number of weeks and median of week.
</div>
<div class="my-title" id="firstTitle"></div>
<div class="my-description" id="firstTxt"></div>
</div>

<div class="col-md-12 my-canvas">
<div id = "UdacityBars"\></div>
<div id = "UdacityBars"></div>
</div>
<div class="my-canvas-legend my-canvas-legend-bottom">
Date
</div>
</div>
<!-- Show OCDE dashboard -->
<div class="row" id="SecondChart" style="display:none;">
<div class="row">
<div class="col-md-12 my-canvas">
<div class="my-canvas-legend">
Hours
<div class="my-canvas-tiny-legend">
per week
</div>
</div>

<div class="my-explainer">
<div class="my-title" id="otherTitle"></div>
<div class="my-description" id="otherTxt"></div>
</div>

<img src="/data/img1-md.jpg" alt="..." style="width:770px;height:228px;">
<!-- <div id = "UdacityBars"></div> -->

<div class="my-canvas-legend my-canvas-legend-bottom">
Date
</div>
</div>


</div>
<div class="row">
<div class="col-md-6 my-canvas">
<img src="/data/img1-md.jpg" alt="..." style="width:304px;height:228px;">
</div>
<div class="col-md-6 my-canvas">
<img src="/data/img1-md.jpg" alt="..." style="width:304px;height:228px;">
</div>


</div>



</div>



Expand Down Expand Up @@ -150,7 +188,9 @@ <h4>Bla</h4>
//Handle data;
handle_data();

//draw udacity chart
draw_udacity();
displayUdacity("show");



Expand Down
243 changes: 120 additions & 123 deletions js/udacity_hours.js
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,136 @@
"use strict";

//draw the bar chart
function draw_udacity(data) {



//************************************************************
// begin of help functions
//************************************************************

//render chart
function renderChart(data){
// debugger;
// whitespace on either side of the bars in units of MPG
var margin = {top: 30, right: 70, bottom: 70, left: 70};
var width = 1000 - margin.left - margin.right;
var height = 450 - margin.top - margin.bottom;
var i_Width = width + margin.left + margin.right;
var i_Height = height + margin.top + margin.bottom;
//calculate the extent of each dimension of the datase
var values_extent = d3.extent(data, function(d) {
return d.MINT;
});
var time_extent = d3.extent(data, function(d) {
return d.DATE;
//************************************************************
// begin of help functions
//************************************************************

function displayUdacity(s_type){
//hide (show another chart) and show udacity bar chart
if(s_type=="show"){
d3.select("#FirstChart").attr("style","display:inline;");
d3.select("#SecondChart").attr("style","display:none;");
}
else{
d3.select("#FirstChart").attr("style","display:none;");
d3.select("#SecondChart").attr("style","display:inline;");
}

}



//************************************************************
// end of help functions
//************************************************************


//create the chart object
function renderChart(data){
// debugger;
//change txt in the description
d3.select("#firstTitle").text("Hours Studied at Udacity");
var txt = `Describe number of
weeks and median
of week.`;
d3.select("#firstTxt").text(txt);
// whitespace on either side of the bars in units of MPG
var margin = {top: 30, right: 70, bottom: 58, left: 70};
var width = 1000 - margin.left - margin.right;
var height = 450 - margin.top - margin.bottom;
var i_Width = width + margin.left + margin.right;
var i_Height = height + margin.top + margin.bottom;
//calculate the extent of each dimension of the datase
var values_extent = d3.extent(data, function(d) {
return d.MINT;
});
var time_extent = d3.extent(data, function(d) {
return d.DATE;
});

// Set a map function to convert datum to pixels.
var xScaleDate = d3.time.scale()
.range([0, width])
.domain(time_extent);

var ordinalXScale = d3.scale.ordinal()
.domain(d3.map(time_extent, function(d) { return d.DATE; }))
.rangeBands([0, width], 0.1,0.2);

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

var barWidth = width / data.length;

//construct the SVG container for the chart
var svg = d3.select("#UdacityBars").append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 "+ i_Width + " "+ i_Height)
.append("g")
.attr("preserveAspectRatio", "xMidYMid")
.attr("transform", "translate(" + margin.left + "," +
margin.top + ")");

// Column chart
var columnGroup = svg.selectAll(".g")
.data(data)
.enter().append("g")
.attr("transform", function(d,i){return "translate(" + i * barWidth + ",0)";});

// Now you can use both of them to space columns evenly:
columnGroup.append("rect")
.attr("class", "column")
.attr("width", barWidth - 1)
.attr("height", function (d) {
return height - yScale(d.MINT);
})
.attr("x", function (d) {
return ordinalXScale(d.DATE);
})
.attr("y", function (d){
return yScale(d.MINT);
});

// Set a map function to convert datum to pixels.
var xScaleDate = d3.time.scale()
.range([0, width])
.domain(time_extent);

var ordinalXScale = d3.scale.ordinal()
.domain(d3.map(time_extent, function(d) { return d.DATE; }))
.rangeBands([0, width], 0.4);

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

var barWidth = width / data.length;

//construct the SVG container for the chart
var svg = d3.select("#UdacityBars").append("svg")
.attr("width", "100%")
.attr("height", "100%")
.attr("viewBox", "0 0 "+ i_Width + " "+ i_Height)
.append("g")
.attr("preserveAspectRatio", "xMidYMid")
.attr("transform", "translate(" + margin.left + "," +
margin.top + ")");

var bar = svg.selectAll("g")






// Column chart
var columnGroup = svg.selectAll(".g")
.data(data)
.enter().append("g")
.attr("transform", function(d,i){return "translate(" + i * barWidth + ",0)";});

// Now you can use both of them to space columns evenly:
columnGroup.append("rect")
.attr("class", "column")
.attr("width", barWidth - 1)
.attr("height", function (d) {
return height - yScale(d.MINT);
})
.attr("x", function (d) {
return ordinalXScale(d.DATE);
//append text
columnGroup.append("text")
.attr("class", "barlabel")
.attr("x", barWidth / 2)
.attr("text-anchor", "middle")
.attr("y", function(d) {
return yScale(d.MINT) -15;
})
.attr("y", function (d){
return yScale(d.MINT);
});
.attr("dy", ".55em")
.text(function(d) { return Math.round(d.MINT); })

//append text
columnGroup.append("text")
.attr("class", "barlabel")
.attr("x", barWidth / 2)
.attr("text-anchor", "middle")
.attr("y", function(d) {
return yScale(d.MINT) -15;
})
.attr("dy", ".55em")
.text(function(d) { return Math.round(d.MINT); })

//format axis
var xAxis = d3.svg.axis()
.scale(xScaleDate)
.ticks(15)
.orient("bottom")
.tickFormat(d3.time.format('%b-%Y'));;

//format axis
var xAxis = d3.svg.axis()
.scale(xScaleDate)
.ticks(15)
.orient("bottom")
.tickFormat(d3.time.format('%b-%Y'));;
// insert Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

// insert Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(3)
.orient("left");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);







};




//************************************************************
// end of help functions
//************************************************************
var yAxis = d3.svg.axis()
.scale(yScale)
.ticks(3)
.orient("left");
svg.append("g")
.attr("class", "y axis")
.call(yAxis);


};


//draw the bar chart
function draw_udacity(data) {

//create function to parse date
var formatTime = d3.time.format("%Y-%m-%d");
Expand All @@ -148,9 +150,4 @@ function draw_udacity(data) {
}
);






}
Loading

0 comments on commit 0f16b38

Please sign in to comment.