asizer

Dividing a Large SVG for Printing

There is no native way to define page breaks within a large SVG for printing—it either gets scaled down to fit on a single page or gets cut off. There are many situations where pagination would be useful, such as maps, flow charts, or org diagrams. Really, any large, complicated graphic that becomes incomprehensible if scaled too small.

This pen demonstrates a way to generate custom pagination by re-using the same graphic within multiple SVG elements, using the viewBox attribute to define which part of the graphic should be visible each time. Media queries control which SVGs are visible on screen or when printed.

Print preview or print to file to see the results.

(Getting the browser to print a single iframe within Codepen is a little tricky. For Firefox, use "This Frame > Print" (no preview option, you'll have to print to file). For IE, select the entire content of the results frame, use "Print Preview", and then choose "As selec

asizer

Dividing a Large SVG for Printing

There is no native way to define page breaks within a large SVG for printing—it either gets scaled down to fit on a single page or gets cut off. There are many situations where pagination would be useful, such as maps, flow charts, or org diagrams. Really, any large, complicated graphic that becomes incomprehensible if scaled too small.

This pen demonstrates a way to generate custom pagination by re-using the same graphic within multiple SVG elements, using the viewBox attribute to define which part of the graphic should be visible each time. Media queries control which SVGs are visible on screen or when printed.

Print preview or print to file to see the results.

(Getting the browser to print a single iframe within Codepen is a little tricky. For Firefox, use "This Frame > Print" (no preview option, you'll have to print to file). For IE, select the entire content of the results frame, use "Print Preview", and then choose "As selec

asizer

This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

• d3.tsv - load and parse data
• d3.time.format - parse dates
• d3.time.scale - x-position encoding
• d3.scale.linear - y-position encoding
• d3.extent - compute domains
• d3.svg.axis - display axes
• d3.svg.line - display line shape