31:T101e,{ const chartContainer = document.createElement("div"); chartContainer.classList.add('chart') const chart = chrt.Chrt() .node(chartContainer) .size(600,650) .margins({ left: 50, right: 50, top: 50, bottom: 70, }) .padding({ left: 0, right: 0, }) .x([new Date(1912,0,1),new Date(1924,0,1)], null, {scale:'time', field: 'ww1Date', name:'ww1Date'}) .x([new Date(1939,0,1),new Date(1951,0,1)], null, {scale:'time', field: 'ww2Date', name:'ww2Date'}) .y([60, 180]) .add( chrt.xAxis('ww1Date') .format(d => { return d3.timeFormat('%Y')(d) }) .setTickPosition('inside') .orient('top') .interval('year') .class('ww1') .filter((d,i,arr) => { return d.getFullYear() > 1912 && d.getFullYear() < 1924; }) .add(chrt.chrtAxisTitle('WORLD WAR I').align('center').valign('top').offset({y: -15})) ) .add( chrt.xAxis(10,'ww2Date') .format(d => { return d3.timeFormat('%Y')(d) }) .setTickPosition('inside') .orient('bottom') .interval('year') .class('ww2') .filter((d,i,arr) => { return d.getFullYear() > 1939 && d.getFullYear() < 1951; }) .add(chrt.chrtAxisTitle('WORLD WAR II').align('center').valign('bottom').offset({x:-22, y: 25})) ) .add(chrt.yAxis(10).orient('right').setTickPosition('inside').add(chrt.chrtAxisTitle('INDEX').class('index-title').align('right').valign('top').offset({y: -10,x: 5}))) .add( chrt.chrtLine() .area() .fill("url(#stripes)") .data( ww1data .filter(d => d.ww1Date >= new Date(1917,3,6) && d.ww1Date <= new Date(1918,10,11)) .map(d => ({ ww1Date: d.ww1Date, y: d.y, y0: 180 })) ) .x('ww1Date') ) .add(chrt.chrtLine().area().fill("url(#stripes)").data(ww2data.filter(d => d.ww2Date >= new Date(1941,11,8) && d.ww2Date <= new Date(1945,9,1))) .x('ww2Date') ) .add(chrt.chrtLine().data(ww1data).x('ww1Date').width(1.5)) .add(chrt.chrtLine().data(ww1data).x('ww1Date').width(1).class('dotted')) .add(chrt.chrtLine().data(ww2data).x('ww2Date').width(2)) .add(chrt.chrtAnnotation('U.S. ENTERS
DEC. 8',{x:'ww2Date',y:'y'}).class('small-note').left(new Date(1941,11,8)).top(66)) .add(chrt.chrtAnnotation('VJ-DAY
AUG. 14',{x:'ww2Date',y:'y'}).class('small-note').left(new Date(1945,9,14)).top(68)) .add(chrt.chrtAnnotation('U.S. ENTERS
APRIL 6',{x:'ww1Date',y:'y'}).class('small-note italic').left(new Date(1917,3,6)).top(175)) .add(chrt.chrtAnnotation('ARMISTICE
NOV. 11',{x:'ww1Date',y:'y'}).class('small-note italic').left(new Date(1918,10,11)).top(160)) .add(chrt.chrtAnnotation('WORLD WAR II',{x:'ww2Date',y:'y'}).class('line-title').left(new Date(1946,0,14)).top(98)) .add(chrt.chrtAnnotation('WORLD WAR I',{x:'ww1Date',y:'y'}).class('line-title italic').left(new Date(1916,5,1)).top(130)) .add( chrt.yAxis(10).setTickPosition('inside') .add(chrt.yAxisRange().from(100).color('#000')) .add(chrt.chrtAxisTitle('INDEX').class('index-title').align('left').valign('top').offset({y: -10,x: -5})) ) .add(chrt.chrtAnnotation('Prices in Primary Markets',{x:'ww2Date',y:'y'}).class('small-note left-aligned uppercase').left(new Date(1950,0,1)).top(60).offset(-80,50)) .add(chrt.chrtAnnotation('Source: U.S. Bureau of Labor Statistics',{x:'ww2Date',y:'y'}).class('small-note right-aligned uppercase').left(new Date(1940,0,1)).top(60).offset(-80,50)) console.log(chart) //console.log('SVG',chart.node().querySelector('svg')) const defs = document.createElementNS("http://www.w3.org/2000/svg", 'defs'); defs.innerHTML = ` `; chart.node().querySelector('svg').prepend(defs); return chart.node() }32:T60a,html` `33:[{"id":"3c20502c1d20297d6ed42d63baf4c1d69012ccacdc7bd71038578981596ad9578b6bb9c839660bd0ee987fbb0c48249b9e882bb51202cb3aef6f3f7db757b3b7","href":"https://static.observableusercontent.com/files/3c20502c1d20297d6ed42d63baf4c1d69012ccacdc7bd71038578981596ad9578b6bb9c839660bd0ee987fbb0c48249b9e882bb51202cb3aef6f3f7db757b3b7","name":"wars@1.csv","type":"text/csv","lastModified":1616569943457.15,"size":4113}] 2f:{"title":"Wholesale Prices in Two World Wars","cells":[{"id":0,"value":"md`# Wholesale Prices in Two World Wars`","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"md`### Charting Statistics \n#### by Mary Eleanor Spear\n\nhttps://archive.org/details/ChartingStatistics_201801/page/n83/mode/2up\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"{\n const chartContainer = document.createElement(\"div\");\n chartContainer.classList.add('chart')\n \n chartContainer.innerHTML= '

WHOLESALE PRICES IN THE TWO WARS

ALL COMMODITIES 1926 = 100

';\n \n return chartContainer;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"Table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"ww1data = data.filter(d => d.war === '1').map(d => ({ww1Date: new Date(d.year, d.month -1, 1), y: d.value}));","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"ww2data = data.filter(d => d.war === '2').map(d => ({ww2Date: new Date(d.year, d.month -1, 1), y: d.value}));","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"data = FileAttachment(\"wars@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"chrt=require('chrt@latest') // 0.0.64","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import {Table} from '@observablehq/table'","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}