D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
dougdowson
Full window
Github gist
Stacked Bar Chart
<!DOCTYPE HTML> <meta charset="utf-8"> <html> <head> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900"> <script src="https://d3js.org/d3.v3.min.js"></script> <style> body, h1, h2, h3, p { margin: 0; padding: 0; font-family: 'Source Sans Pro', sans-serif; font-size: 1em; color: #333; font-weight: 400; } #content { margin: 5px; padding: 20px; width: 765px; text-align: left; border: 1px solid #ccc; } h1 { line-height: 1em; font-size: 1.75em; font-weight: 900; color: #000; } p { margin: 5px 0px 0px 0px; } .domain { fill: none; stroke-width: 0; } #chart { margin: 15px 0px 0px 0px; padding: 0px; } #menu { margin: 5px 0px 0px 0px; padding: 0; display: block; } select { font-family: 'Source Sans Pro', sans-serif; font-size: 0.9em; color: #333; font-weight: 400; } .axis path, .axis line { fill: none; stroke: #ccc; shape-rendering: crispEdges; } .axis line { stroke: #eee; stroke-width: 1; opacity: 0.5; shape-rendering: crispEdges; } .g-baseline line { stroke: #333; stroke-width: 2; opacity: 1; shape-rendering: crispEdges; } .x.axis .tick text, .y.axis .tick text, .ylabel { fill: #333; font-size: 0.9em; } .x.axis .tick text { fill: #fff; } .x.axis .tick line { stroke: none; } .keylabel { fill: #333; } .line { fill: none; stroke: #2C3E50; stroke-width: 3px; } </style> </head> <body> <div id="content"> <h1>U.S. International Trade in Goods, 2000-2013</h1> <p>Value of Exports and Imports by 3-digit NAICS Code ($US Billions)</p> <select id="menu" onchange="makeBars()"> <option selected value="000">Total</option> <option value="111">Agricultural Products</option> <option value="112">Livestock & Livestock Products</option> <option value="113">Forestry Products</option> <option value="114">Fish, Fresh/Chilled/Frozen & Other Marine Products</option> <option value="211">Oil & Gas</option> <option value="212">Minerals & Ores</option> <option value="311">Food & Kindred Products</option> <option value="312">Beverages & Tobacco Products</option> <option value="313">Textiles & Fabrics</option> <option value="314">Textile Mill Products</option> <option value="315">Apparel & Accessories</option> <option value="316">Leather & Allied Products</option> <option value="321">Wood Products</option> <option value="322">Paper</option> <option value="323">Printed Matter And Related Products</option> <option value="324">Petroleum & Coal Products</option> <option value="325">Chemicals</option> <option value="326">Plastics & Rubber Products</option> <option value="327">Nonmetallic Mineral Products</option> <option value="331">Primary Metal Mfg</option> <option value="332">Fabricated Metal Products</option> <option value="333">Machinery, Except Electrical</option> <option value="334">Computer & Electronic Products</option> <option value="335">Electrical Equipment, Appliances & Components</option> <option value="336">Transportation Equipment</option> <option value="337">Furniture & Fixtures</option> <option value="339">Miscellaneous Manufactured Commodities</option> <option value="511">Newspapers, Books & Other Published Matter</option> <option value="910">Waste And Scrap</option> <option value="920">Used Or Second-Hand Merchandise</option> <option value="980">Goods Returned (Exports For Canada Only)</option> <option value="990">Special Classification Provisions</option> </select> <div id="chart"></div> <p>Source: U.S. Census Bureau.</p> </div> <script src="chart.js"></script> </body> </html>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js