D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
kcsluis
Full window
Github gist
Mobile, Responsive
<!DOCTYPE html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /*css*/ .content { width: 840px; margin: 20px auto; padding: 40px; text-align: center; background-color: #ddd; } .hide { display: none; } </style> </head> <body> <div class="graphicContainer"></div> <div class="foo">foo</div> <div class="content">content</div> </body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> <script> // for resizing for mobile var graphic = d3.select(".graphicContainer"); var currentWidth; // cray mobile stuff window.onresize = resize; function resize() { // graphic.node().clientWidth is the magic currentWidth = graphic.node().clientWidth; d3.selectAll('.foo').remove(); drawMyChart(currentWidth); }; function drawMyChart(currentWidth) { if (currentWidth < 960) { d3.select('.content').classed('hide', true); } else { d3.select('.content').classed('hide', false); }; }; </script>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js