Skip to content

Commit

Permalink
fixing xaxis display still need to fix main sketchpad
Browse files Browse the repository at this point in the history
  • Loading branch information
@wookhuk
wookhuk committed Jan 9, 2017
1 parent 8e59fa5 commit b96ff0a
Show file tree
Hide file tree
Showing 2 changed files with 266 additions and 15 deletions.
74 changes: 70 additions & 4 deletions src/main/webapp/js/draw.js
View file
Expand Up @@ -101,9 +101,10 @@ function createSketchpad( data )

// Add the X Axis
focus.append("g")
.attr("class", "axis axis--x")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).ticks(8, "s"));
.call( d3.axisBottom(x).ticks(8, "s").tickValues(0) );


// Add the Y Axis
focus.append("g")
Expand All @@ -115,10 +116,75 @@ function createSketchpad( data )
.attr("class", "line")
.attr("d", valueline2);

context.append("g")
// Add the second x axis

if (getSelectedDataset()==="real_estate")
{
if(getSelectedXAxis()==="month")
{
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call( d3.axisBottom(x).ticks(8).tickFormat(function (d) {
var mapper = {
"0": "01/2004",
"20": "08/2005",
"40": "04/2007",
"60": "12/2008",
"80": "08/2010",
"100": "04/2012",
"120": "12/2013",
"140": "08/2015",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="quarter")
{
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call( d3.axisBottom(x).ticks(8).tickFormat(function (d) {
var mapper = {
"5": "Q1/2005",
"15": "Q3/2007",
"25": "Q1/2010",
"35": "Q3/2012",
"45": "Q1/2014",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="year")
{
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call( d3.axisBottom(x).ticks(8).tickFormat(function (d) {
var mapper = {
"1": "2004",
"2": "2005",
"3": "2006",
"4": "2007",
"5": "2008",
"6": "2009",
"7": "2010",
"8": "2011",
"9": "2012",
"10": "2013",
"11": "2014",
"12": "2015",
}
return mapper[ d.toString() ]
}));
}
}
else{
context.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height2 + ")")
.call(d3.axisBottom(x2));
.call(d3.axisLeft(y).ticks(8, "s"));
}

context.append("g")
.attr("class", "brush")
Expand Down
207 changes: 196 additions & 11 deletions src/main/webapp/js/helper.js
View file
Expand Up @@ -123,11 +123,73 @@ function displayUserQueryResultsHelper( userQueryResults, includeSketch = true )
.attr("fill", "grey");

var trans = height-20
// create yAxis

// first x-axis
if (getSelectedDataset()==="real_estate")
{
if(getSelectedXAxis()==="month")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(4).tickFormat(function (d) {
var mapper = {
"50": "02/2008",
"100": "04/2012",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="quarter")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(5).tickFormat(function (d) {
var mapper = {
"10": "Q2/2006",
"20": "Q4/2008",
"30": "Q2/2011",
"40": "Q4/2013",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="year")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(5).tickFormat(function (d) {
var mapper = {
"1": "2004",
"2": "2005",
"3": "2006",
"4": "2007",
"5": "2008",
"6": "2009",
"7": "2010",
"8": "2011",
"9": "2012",
"10": "2013",
"11": "2014",
"12": "2015",
}
return mapper[ d.toString() ]
}));
}
}
else{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call(d3.axisBottom(x).ticks(5, "s"));
.attr("transform", "translate(0," + trans + ")")
.call(d3.axisLeft(y).ticks(5, "s"));
}

// graph.append("g")
// .attr("class", "axis axis--x")
// .attr("transform", "translate(0," + trans + ")")
// .call(d3.axisBottom(x).ticks(5, "s"));

graph.append("text")
.attr("transform",
Expand Down Expand Up @@ -268,11 +330,72 @@ function displayRepresentativeResultsHelper( representativePatternResults )
//.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var trans = height-20
// create yAxis
graph.append("g")
.attr("class", "axis axis--x")

if (getSelectedDataset()==="real_estate")
{
if(getSelectedXAxis()==="month")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(4).tickFormat(function (d) {
var mapper = {
"50": "02/2008",
"100": "04/2012",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="quarter")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(5).tickFormat(function (d) {
var mapper = {
"10": "Q2/2006",
"20": "Q4/2008",
"30": "Q2/2011",
"40": "Q4/2013",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="year")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(5).tickFormat(function (d) {
var mapper = {
"1": "2004",
"2": "2005",
"3": "2006",
"4": "2007",
"5": "2008",
"6": "2009",
"7": "2010",
"8": "2011",
"9": "2012",
"10": "2013",
"11": "2014",
"12": "2015",
}
return mapper[ d.toString() ]
}));
}
}
else{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call(d3.axisBottom(x).ticks(5, "s"));
.call(d3.axisLeft(y).ticks(5, "s"));
}
// create xAxis
// graph.append("g")
// .attr("class", "axis axis--x")
// .attr("transform", "translate(0," + trans + ")")
// .call(d3.axisBottom(x).ticks(5, "s"));


graph.append("text")
Expand Down Expand Up @@ -384,11 +507,73 @@ function displayOutlierResultsHelper( outlierResults )
//.attr("transform", "translate(" + m[3] + "," + m[0] + ")");

var trans = height-20
// create yAxis
graph.append("g")
.attr("class", "axis axis--x")
// create xAxis

if (getSelectedDataset()==="real_estate")
{
if(getSelectedXAxis()==="month")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(4).tickFormat(function (d) {
var mapper = {
"50": "02/2008",
"100": "04/2012",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="quarter")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(5).tickFormat(function (d) {
var mapper = {
"10": "Q2/2006",
"20": "Q4/2008",
"30": "Q2/2011",
"40": "Q4/2013",
}
return mapper[ d.toString() ]
}));
}
if(getSelectedXAxis()==="year")
{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call( d3.axisBottom(x).ticks(5).tickFormat(function (d) {
var mapper = {
"1": "2004",
"2": "2005",
"3": "2006",
"4": "2007",
"5": "2008",
"6": "2009",
"7": "2010",
"8": "2011",
"9": "2012",
"10": "2013",
"11": "2014",
"12": "2015",
}
return mapper[ d.toString() ]
}));
}
}
else{
graph.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + trans + ")")
.call(d3.axisBottom(x).ticks(5, "s"));
.call(d3.axisLeft(y).ticks(5, "s"));
}

// graph.append("g")
// .attr("class", "axis axis--x")
// .attr("transform", "translate(0," + trans + ")")
// .call(d3.axisBottom(x).ticks(5, "s"));

graph.append("text")
.attr("transform",
Expand Down

0 comments on commit b96ff0a

Please sign in to comment.