Skip to content

Instantly share code, notes, and snippets.

@iros
Last active December 24, 2015 22:49
Show Gist options
  • Save iros/6875216 to your computer and use it in GitHub Desktop.
Save iros/6875216 to your computer and use it in GitHub Desktop.
d3.chart.base modes post
modes: {
mobile : function() {
// if the chart is less than 480 pixels wide or the
// screen is less than 480px wide
return this.width() <= 480 ||
Modernizr.mq("only all and (max-width: 480px)");
},
}
// define a basic rect chart
d3.chart("BaseChart").extend("RectChart", {
modes : {
mobile : function() {
return this.width() <= 480 ||
Modernizr.mq("only all and (max-width: 480px)");
},
tablet: function() {
var w = this.width();
return (w <= 768 && w >= 481) ||
Modernizr.mq("only all and (min-width: 481px) " +
"and (max-width: 768px)");
},
web: function() {
return (this.width() > 768) ||
Modernizr.mq("only all and (min-width: 769px)");
}
}
});
// add a boxes layer
this.layer("boxes", this.base.append("g"), {
modes: ["web", "tablet"],
dataBind: function(data) {
var chart = this.chart();
// update the x scale domain when
// new data comes in
chart.xScale.domain([
Math.min.apply(null, data),
Math.max.apply(null, data)
]);
return this.selectAll("rect")
.data(data);
},
// insert semi transparent blue rectangles
// of height and width 10.
insert: function() {
var chart = this.chart();
var selection = this.append("rect");
return selection;
}
});
// add a boxes layer
this.layer("boxes", this.base.append("g"), {
// modes, dataBind and insert...
events: {
merge: function() {
var selection = this,
chart = selection.chart(),
mode = chart.mode();
if (mode === "tablet") {
selection.attr("width", 10)
.attr("height", 10);
} else if (mode === "web") {
selection.attr("width", 50)
.attr("height", 50);
}
selection.style("fill", "blue")
.style("opacity", "0.5");
selection.attr("x", function(d) {
return chart.xScale(d);
}).attr("y", chart.height()/2);
}
}
});
@staabm
Copy link

staabm commented Oct 22, 2013

Typo in 1st file, should start with modes not mobile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment