Responsive design - Githubissues

ndarville commented 11 years ago

ndarville commented 9 years ago

Article on creating responsive charts for very different viewports: http://vis4.net/blog/posts/seven-features-youll-wantin-your-next-charting-tool/.

ndarville commented 9 years ago

Charts to update:

[x] Party trend
[x] World map
[x] Coalition majority
[x] Relative budgets

Todo:

[ ] Handle and double-check mobile viewports where width < 440px

ndarville commented 9 years ago

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()

ndarville commented 9 years ago

bl.ocks.org also isn’t working properly—fwiw:

screen shot 2015-06-22 at 09 29 05

http://bl.ocks.org/ndarville/11094667

ndarville commented 9 years ago

Charts still acting up.

ndarville commented 9 years ago

http://www.brendansudol.com/posts/responsive-d3/

ndarville / d3-charts

Responsive design #11