Open ndarville opened 11 years ago
Article on creating responsive charts for very different viewports: http://vis4.net/blog/posts/seven-features-youll-wantin-your-next-charting-tool/.
Charts to update:
Todo:
width < 440px
Diff for initial implementation with party-trend
:
diff --git a/index.html b/index.html
index 4b47b63..bc9129a 100644
--- a/index.html
+++ b/index.html
@@ -8,20 +27,13 @@
}
svg {
- margin-left: auto; margin-right: auto;
display: block;
}
- line,
- rect {
- shape-rendering: crispEdges;
- }
-
.axis path,
.axis line {
fill: none;
stroke: #000;
- shape-rendering: crispEdges;
}
.x.axis path {
@@ -59,25 +71,53 @@
stroke-width: 0;
}
/** Grid lines END */
+
+ #graph {
+ /** Layout breaks when minima are removed */
+ min-width: 440px;
+ min-height: 400px;
+ width: 100%;
+ height: 100%;
+ max-width: 720px;
+ max-height: 655px;
+
+ margin: 0 auto;
+ }
</style>
</head>
<body>
+ <div id="graph"></div>
+
<!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
<script src="d3.min.js?v=3.5.5"></script>
<script src="science.v1.min.js?v=1.9.1"></script>
<script type="text/javascript" charset="utf-8">
// Settings
// ========
- var width = 440,
- height = 400,
- padding = 30;
-
- var margin = {
- "top" : padding,
- "right" : 125,
- "bottom" : padding,
- "left" : padding
- };
+ var defaultWidth = 440,
+ defaultHeight = 400,
+ aspectRatio = defaultWidth/defaultHeight; // = 1.1
+
+ var wrapperWidth = parseInt(d3.select("#graph").style("width"), 10),
+ wrapperHeight = parseInt(d3.select("#graph").style("height"), 10);
+
+ var padding = 30,
+ margin = {
+ "top" : padding,
+ "right" : 125,
+ "bottom" : padding,
+ "left" : padding
+ };
+
+ // If landscape mode or square
+ if (wrapperWidth >= wrapperHeight) {
+ var height = wrapperHeight,
+ width = Math.round(height * aspectRatio);
+ // If protrait mode
+ } else {
+ var width = wrapperWidth,
+ height = Math.round(width / aspectRatio);
+ }
margin.hor = margin.left + margin.right;
margin.ver = margin.top + margin.bottom;
@@ -151,10 +191,12 @@
.orient("left")
.tickFormat(function(d) { return d + "%"; });
- var svg = d3.select("body").append("svg")
+ var svg = d3.select("#graph").append("svg")
.attr({
- "width" : width + margin.left + margin.right,
- "height" : height + margin.top + margin.bottom
+ // "width" : width + margin.hor,
+ // "height" : height + margin.ver
+ "viewBox": "0 0 " + (width + margin.hor) + " " + (height + margin.ver),
+ "preserveAspectRatio": "xMinYMid"
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Diff for world-map
:
diff --git a/index.html b/index.html
index 8f2e30a..c285093 100644
--- a/index.html
+++ b/index.html
@@ -11,15 +11,9 @@
<meta charset="utf-8">
<style>
svg {
- margin-left: auto; margin-right: auto;
display: block;
}
- line,
- rect {
- shape-rendering: crispEdges;
- }
-
.states {
fill: none; /** Hides TopoJSON artifacts */
stroke: #000;
@@ -53,7 +47,6 @@
.key line {
stroke: #000;
- /** shape-rendering: crispEdges; */
}
/** State chart threshold END */
@@ -66,7 +59,6 @@
.axis line {
fill: none;
stroke: #000;
- shape-rendering: crispEdges;
}
.x.axis path {
@@ -93,6 +85,18 @@
stroke-width: 0;
}
/** Grid lines END */
+
+ #graph {
+ /** Layout breaks when minima are removed */
+ min-width: 400px;
+ min-height: 260px;
+ width: 100%;
+ height: 100%;
+ max-width: 800px;
+ max-height: 520px;
+
+ margin: 0 auto;
+ }
</style>
<script src="d3.min.js?v=3.5.5"
type="text/javascript" charset="utf-8"></script>
@@ -104,10 +108,25 @@
type="text/javascript" charset="utf-8"></script>
</head>
<body>
+ <div id="graph"></div>
+
<script type="text/javascript" charset="utf-8">
- var width = 800,
- height = 520,
- padding = 30;
+ var defaultWidth = 800
+ defaultHeight = 520,
+ aspectRatio = defaultWidth/defaultHeight;
+
+ var wrapperWidth = parseInt(d3.select("#graph").style("width"), 10),
+ wrapperHeight = parseInt(d3.select("#graph").style("height"), 10);
+
+ // If landscape mode or square
+ if (wrapperWidth >= wrapperHeight) {
+ var height = wrapperHeight,
+ width = Math.round(height * aspectRatio);
+ // If protrait mode
+ } else {
+ var width = wrapperWidth,
+ height = Math.round(width / aspectRatio);
+ }
// Local settings
// ==============
@@ -140,6 +159,7 @@
var showLegend = multiColor,
spacing = showLegend === true ? 30 : 0,
+ padding = 30,
margin = {
"top" : spacing,
"bottom" : 0,
@@ -156,16 +176,16 @@
var projection = d3.geo.kavrayskiy7()
.translate([width / 2, height / 2])
- .scale(150); // Revise so it isn't a magic number
+ .scale(85); // Revise so it isn't a magic number
var path = d3.geo.path()
.projection(projection);
- var svg = d3.select("body")
+ var svg = d3.select("#graph")
.append("svg")
.attr({
- "width" : width,
- "height" : height
+ "viewBox": "0 0 " + width + " " + height,
+ "preserveAspectRatio": "xMinYMid"
});
queue()
Diff for coalition-majority
:
diff --git a/index.html b/index.html
index 144e7e6..ec59125 100644
--- a/index.html
+++ b/index.html
@@ -8,20 +8,13 @@
}
svg {
- margin-left: auto; margin-right: auto;
display: block;
}
- line,
- rect {
- shape-rendering: crispEdges;
- }
-
.axis path,
.axis line {
fill: none;
stroke: #000;
- shape-rendering: crispEdges;
}
.x.axis path {
@@ -39,26 +32,54 @@
filter: alpha(opacity=50);
opacity: .5;
}
+
+ #graph {
+ /** Layout breaks when minima are removed */
+ min-width: 440px;
+ min-height: 150px;
+ width: 100%;
+ height: 100%;
+ max-width: 440px;
+ max-height: 150px;
+
+ margin: 0 auto;
+ }
</style>
</head>
<body>
+ <div id="graph"></div>
+
<!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
<script src="d3.min.js?v=3.5.5"></script>
<script src="science.v1.min.js"></script>
<script type="text/javascript" charset="utf-8">
// Settings
// ========
- var width = 440,
- height = 150,
- padding = 30;
+ var defaultWidth = 440,
+ defaultHeight = 150,
+ aspectRatio = defaultWidth/defaultHeight;
+
+ var wrapperWidth = parseInt(d3.select("#graph").style("width"), 10),
+ wrapperHeight = parseInt(d3.select("#graph").style("height"), 10);
- var margin = {
+ var padding = 30,
+ margin = {
"top" : padding,
"right" : 35,
"bottom" : padding,
"left" : padding
};
+ // If landscape mode or square
+ if (wrapperWidth >= wrapperHeight) {
+ var height = wrapperHeight,
+ width = Math.round(height * aspectRatio);
+ // If protrait mode
+ } else {
+ var width = wrapperWidth,
+ height = Math.round(width / aspectRatio);
+ }
+
margin.hor = margin.left + margin.right;
margin.ver = margin.top + margin.bottom;
@@ -104,10 +125,12 @@
.x(function(d) { return x(d[dateValue]); })
.y1(function(d) { return y(d["right"]); }); // ! Still breaks without this setting
- var svg = d3.select("body").append("svg")
+ var svg = d3.select("#graph").append("svg")
.attr({
- "width" : width + margin.left + margin.right,
- "height" : height + margin.top + margin.bottom
+ // "width" : width + margin.hor,
+ // "height" : height + margin.ver,
+ "viewBox": "0 0 " + (width + margin.hor) + " " + (height + margin.ver),
+ "preserveAspectRatio": "xMinYMid"
})
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
Diff for relative-budgets
:
diff --git a/index.html b/index.html
index c820577..418b9db 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,6 @@
<meta charset="utf-8">
<style>
svg {
- margin-left: auto; margin-right: auto;
display: block;
}
@@ -42,20 +41,38 @@
line.divider {
stroke-dasharray: 4,2;
}
+
+ #graph {
+ /** Layout breaks when minima are removed */
+ min-width: 440px;
+ min-height: 150px;
+ width: 100%;
+ height: 100%;
+ max-width: 880px;
+ max-height: 300px;
+
+ margin: 0 auto;
+ }
</style>
</head>
<body>
+ <div id="graph"></div>
+
<!-- <script src="http://d3js.org/d3.v3.min.js"></script> -->
<script src="d3.min.js?v=3.2.8"></script>
<script type="text/javascript"charset="utf-8">
// Settings
- var width = 440,
- height = 150; // Compute dynanically?
+ var defaultWidth = 440,
+ defaultHeight = 150, // Compute dynanically?
/**
Accounting for
* valueTypes.length
* keys.length
*/
+ aspectRatio = defaultWidth/defaultHeight;
+
+ var wrapperWidth = parseInt(d3.select("#graph").style("width"), 10),
+ wrapperHeight = parseInt(d3.select("#graph").style("height"), 10);
var barHeight = 8,
dividerHeight = 7;
@@ -70,6 +87,16 @@
"left" : 20
};
+ // If landscape mode or square
+ if (wrapperWidth >= wrapperHeight) {
+ var height = wrapperHeight,
+ width = Math.round(height * aspectRatio);
+ // If protrait mode
+ } else {
+ var width = wrapperWidth,
+ height = Math.round(width / aspectRatio);
+ }
+
margin.hor = margin.left + margin.right;
margin.ver = margin.top + margin.bottom;
@@ -174,11 +201,13 @@
}
}
- var svg = d3.select("body")
+ var svg = d3.select("#graph")
.append("svg")
.attr({
- "width": width,
- "height": height
+ // "width": width,
+ // "height": height
+ "viewBox": "0 0 " + width + " " + height,
+ "preserveAspectRatio": "xMinYMid"
});
var x = d3.scale.linear()
bl.ocks.org also isn’t working properly—fwiw:
Charts still acting up.
Working example using jQuery.