31:T80b,{ const chartContainer = document.createElement("div"); chartContainer.classList.add('chart') const chart = chrt.Chrt() .node(chartContainer) .svg() .size(600,600) .margins({ left: 30, right: 1, top: 25, bottom: 50, }) .padding({ left: 40, right: 40, }) .y([0,12]) .add( chrt.chrtLine() .data(data, d => ({x: +d.year, y: +d.consumption / 1000})) .class('consumption') .width(1) ) .add( chrt.chrtLine() .data(data, d => ({x: +d.year, y: +d.exports / 1000})) .class('exports') .width(1) ) .add( chrt.chrtLine() .data(data, d => ({x: +d.year, y: +d.stocks / 1000})) .class('stocks') .width(1) ) .add( chrt.xAxis() .ticks(5) .setTickPosition('inside') .width(2) .setTickLength(0) .format((d,i) => !i ? d : `'${+d - 1900}`) ) .add( chrt.xAxis() .orient('top') .width(2) .setTickPosition('inside') .hideTicks() ) .add( chrt.yAxis(5) .orient('right') .width(2) .setTickPosition('inside') ) .add( chrt.yAxis(5) .orient('left') .width(2) .setTickPosition('inside') .add( chrt.chrtAxisTitle('Millions of boles') .class('index-title') .align('right') .valign('top') .offset({y: -10,x: -30})) ) .add(chrt.chrtAnnotation('U.S. CONSUMPTION').class('line-title').left(1945).top(10).offset(0,-25)) .add(chrt.chrtAnnotation('EXPORTS').class('line-title').left(1944).top(3).offset(-35)) .add(chrt.chrtAnnotation('CARRY-OVER
STOCKS').class('line-title').left(1945).top(6).offset(40)) .add(chrt.chrtAnnotation('U.S SUPPLY OF U.S. COTTON').class('small-note').left(1947).top(0).offset(40,30)) .add(chrt.chrtAnnotation('Source: U.S. Department of Agriculture').class('small-note').left(1943).top(0).offset(10,30)) return chart.node(); }32:Tc30,{ const chartContainer = document.createElement("div"); chartContainer.classList.add('chart') const chart = chrt.Chrt() .node(chartContainer) .svg() .size(600,600) .margins({ left: 30, right: 1, top: 25, bottom: 50, }) .padding({ left: 40, right: 40, }) .add( chrt.chrtStack() .add( chrt.chrtColumns() .data(data, d => ({x: +d.year, y: +d.consumption / 1000})) .fill('url(#dots)') .strokeWidth(2) .width(1) ) .add( chrt.chrtColumns() .data(data, d => ({x: +d.year, y: +d.exports / 1000})) .fill('url(#stripes)') .strokeWidth(2) .width(1) ) .add( chrt.chrtColumns() .data(data, d => ({x: +d.year, y: +d.stocks / 1000})) .fill('url(#crosses)') .strokeWidth(2) .width(1) ) ) .add( chrt.xAxis(5) .setTickPosition('inside') .setTickLength(0) .format((d,i) => !i ? d : `'${+d - 1900}`) .width(2) ) .add( chrt.xAxis() .orient('top') .setTickPosition('inside') .hideTicks() .width(2) ) .add( chrt.yAxis(5) .orient('right') .setTickPosition('inside') .width(2) ) .add( chrt.yAxis(5) .orient('left') .setTickPosition('inside') .width(2) .add( chrt.chrtAxisTitle('Millions of boles') .class('index-title') .align('right') .valign('top') .offset({y: -10,x: -30})) ) .add(chrt.chrtAnnotation('U.S. CONSUMPTION').class('small-note').left(1945).top(5)) .add(chrt.chrtAnnotation('EXPORTS').class('small-note').left(1945).top(12)) .add(chrt.chrtAnnotation('STOCKS *').class('small-note').left(1945).top(16)) .add(chrt.chrtAnnotation('* End of season, July 31').class('small-note').left(1947).top(0).offset(40,30)) .add(chrt.chrtAnnotation('Source: U.S. Department of Agriculture').class('small-note').left(1943).top(0).offset(10,30)) const defs = document.createElementNS("http://www.w3.org/2000/svg", 'defs'); defs.innerHTML = ` `; chart.node().querySelector('svg').prepend(defs); return chart.node(); }33:T538,html` `34:[{"id":"b530df75f68c60be78c8d1a304cb65c526d42446abb54562be5a0f04a9775462fea6f8149203ebf24a93a9202c88e1c881af40ab5b53e03ef5b8dcdb51af4580","href":"https://static.observableusercontent.com/files/b530df75f68c60be78c8d1a304cb65c526d42446abb54562be5a0f04a9775462fea6f8149203ebf24a93a9202c88e1c881af40ab5b53e03ef5b8dcdb51af4580","name":"cotton.csv","type":"text/csv","lastModified":1617014784940.723,"size":177}] 2f:{"title":"Distribution of United States Cotton","cells":[{"id":0,"value":"md`# Distribution of United States Cotton`","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`### Charting Statistics \n#### by Mary Eleanor Spear\n\nhttps://archive.org/details/ChartingStatistics_201801/page/n135/mode/2up\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"{\n const chartContainer = document.createElement(\"div\");\n chartContainer.classList.add('chart')\n chartContainer.innerHTML= '

Distribution of United States Cotton

';\n \n return chartContainer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"{\n const chartContainer = document.createElement(\"div\");\n chartContainer.classList.add('chart')\n chartContainer.innerHTML= '

Distribution of United States Cotton

';\n \n return chartContainer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"Table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"chrt=require('chrt@0.0.41')","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"data=FileAttachment(\"cotton.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"import {Table} from \"@observablehq/table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}