31:T70f,md`Political movements generate their own “stuff”: the [posters from the the 2017 Women's March](https://vikusviewer.fh-potsdam.de/artofthemarch/) (and the [Pussyhat](https://en.wikipedia.org/wiki/Pussyhat)), the [Brexit tea towel](https://www.standard.co.uk/news/politics/got-brexit-done-tea-towel-conservatives-memorabilia-a4347461.html), the *gilets* of the [Gilets Jaunes](https://en.wikipedia.org/wiki/Yellow_vests_movement). The same is true when women were fighting for the vote in the 20th Century. In addition to badges and ribbons, they also made sheet music, games (there was ['Panko' the card game](http://womansuffragememorabilia.com/woman-suffrage-memorabilia/toys-and-games/)—not related to [the breadcrumbs](https://en.wikipedia.org/wiki/Bread_crumbs#Panko) ), [suffrage fans](https://artsandculture.google.com/asset/suffrage-fans-emilia-d-van-beugen-photographer/ZQGSOSdg4Hs_fQ) were handed out at ball games and horse races, [branded tea pots](https://heritagecalling.com/2018/03/08/a-history-of-feminism-through-5-finds/), even [“Votes for Women” face powder](https://artsandculture.google.com/asset/_/0wHThkePb6Yj8Q). In this notebook you can make your own collage from pieces of women's suffrage history: all the graphics are vectorised versions of real 'Votes for Women' memorabilia from the USA and UK. > *The graphics largely come from the [Woman Suffrage Memorabilia website](http://womansuffragememorabilia.com/) and [online exhibition](https://artsandculture.google.com/exhibit/women-s-suffrage-memorabilia/wRm3wFhH). The site is also interesting as it includes anti-suffrage items too, like [a Valentines card to reassure your beau you're not into 'that suffrage thing'](http://womansuffragememorabilia.com/wp-content/uploads/2012/08/P10100271-666x1024.jpg)*. `32:T1c85,{ let flag_html = html`

${flag}`; flag_html.firstChild.style.width = "400px"; flag_html.firstChild.style.height = "200px"; flag_html.firstChild.setAttribute('viewBox', "0 0 1000 200"); let facepowder_html = html`

${facepowder}`; facepowder_html.firstChild.style.width = "400px"; facepowder_html.firstChild.style.height = "200px"; facepowder_html.firstChild.setAttribute('viewBox', "0 0 1800 1000"); let butterfly_html = html`

${butterfly}`; butterfly_html.firstChild.style.width = "400px"; butterfly_html.firstChild.setAttribute('viewBox', "0 0 1000 600"); let flag2_html = html`

${flag2}`; flag2_html.firstChild.style.width = "400px"; flag2_html.firstChild.style.height = "200px"; flag2_html.firstChild.setAttribute('viewBox', "0 0 1200 400"); let bird_html = html`

${bird}`; bird_html.firstChild.style.width = "500px"; bird_html.firstChild.style.height = "500px"; bird_html.firstChild.setAttribute('viewBox', "0 0 500 600"); let stocking_html = html`

${stocking}`; stocking_html.firstChild.style.width = "300px"; stocking_html.firstChild.style.height = "300px"; stocking_html.firstChild.setAttribute('viewBox', "0 0 600 800"); let fan_html = html`

${fan}`; fan_html.firstChild.style.width = "300px"; fan_html.firstChild.style.height = "400px"; fan_html.firstChild.setAttribute('viewBox', "0 0 1200 1600"); let fan2_html = html`

${fan2}`; fan2_html.firstChild.style.width = "300px"; fan2_html.firstChild.style.height = "400px"; fan2_html.firstChild.setAttribute('viewBox', "0 0 1200 1600"); let sash_html = html`

${sash}`; sash_html.firstChild.style.width = "400px"; sash_html.firstChild.style.height = "200px"; sash_html.firstChild.setAttribute('viewBox', "0 0 1400 200"); let game_html = html`

${game}`; game_html.firstChild.style.width = "400px"; game_html.firstChild.style.height = "250px"; game_html.firstChild.setAttribute('viewBox', "0 0 1000 550"); return html`

${butterfly_html}	'Votes for Women' Butterfly luggage sticker 1903-1915 Cinderella stamps were used for suffrage propaganda in the US from 1903. Suffragists issued lots of different stamp designs, which they traded amongst themselves, and pasted on envelopes, convention programs, and even, as is the case with this butterfly sticker, on their luggage.
${facepowder_html}	'Votes for Women' face powder, 1913 This box of “Votes for Women” face powder was produced for the National Woman Suffrage Association. Alva Belmont, the wealthy Newport socialite, also sold various grooming products, including soaps, shampoos, and tooth powders at her Political Equality Association. "Mrs. Belmont believed that good grooming along with the vote were both essential for women to achieve empowerment". https://artsandculture.google.com/asset/_/0wHThkePb6Yj8Q
${bird_html}	Woman Suffrage Bluebird Sign, 1915 "This tin blue bird sign was issued by the Massachusetts Woman Suffrage Association to support a 1915 state referendum to give Massachusetts women the vote. On July 19, 1915, “Suffrage Blue Bird Day,” approximately 100,000 blue birds were pinned up around the state. The Massachusetts referendum failed. Massachusetts women did not gain the vote in until the 19th amendment was ratified in 1920." https://americanhistory.si.edu/collections/search/object/nmah_508085
${fan_html}	'Votes for Women' fan 1913/1917 For people who lived in an age that preceded air conditioning, suffrage fans—generally flat and made out of cardboard—were a highly welcome give-away at ball games, horse races, picnics, and other outdoor activities.
${fan2_html}	Suffrage fan 1915 "Paper fans were a popular method of advertising in the early 20th century. This one was issued by the Massachusetts Woman Suffrage Association to support a 1915 state referendum to give Massachusetts women the vote. The map highlights the states in which women already had the vote - Wyoming, Colorado, Utah, Idaho, Washington, California, Kansas, Oregon, Arizona, Montana, and Nevada. The reverse of the fan reads, “Keep Cool!/There will be nothing/to worry about after we get/VOTES FOR WOMEN/Election Day November 2.” The Massachusetts referendum failed. Massachusetts women did not gain the vote in until the 19th amendment was ratified in 1920." https://americanhistory.si.edu/collections/search/object/nmah_516788
${sash_html}	Woman Suffrage Votes Sash "Emmeline Pethick-Lawrence, editor of the weekly newspaper, Votes for Women, wrote, 'Purple as everyone knows is the royal colour, it stands for the royal blood that flows in the veins of every suffragette, the instinct of freedom and dignity...white stands for purity in private and public life...green is the colour of hope and the emblem of spring.'" https://irishwomenshistory.blogspot.com/2014/11/the-colours-of-suffragettes.html
${game_html}	Suffragette Card Game 1907 Suffragist organisations in the USA and England created toys and games, to introduce children to the aims of the movement, and also for adults. In the card game “Suffragette” (created 1907), the object was to see who could obtain the highest number of votes by making up cards into sets, in order to attain the Franchise Bill.
${flag_html}	Flag
${flag2_html}	Flag, 1909 - 1913
${stocking_html}	Stocking

`; }33:T7ce,collage = { const svgelem = html` `; const defs = svgelem.querySelector('defs'); const content = svgelem.querySelector('g'); const render = () => { const collage_graphics_data = viewof values.value .map((d, i) => { const [count, size, distance] = d; const name = list_to_values.get(graphics_order[i]).toLowerCase(); return { name, node_id: `${name}_wrapper`, def_id: `${name}_def`, group_id: `${name}_group`, count, size, distance }; }) .reverse(); collage_graphics_data.forEach(function(graphic, i) { // clone add to defs if we haven't seen this graphic before if (!defs.querySelector(`#${graphic.def_id}`)) { const def = svg``; const source = document .getElementById(graphic.node_id) .querySelector('svg #Layer_2'); def.appendChild(source.cloneNode(true)); defs.append(def); content.appendChild(svg``); } const n = graphic.count; const angles = d3.range(n).map(j => (360 * (n - j)) / n); const transform = angle => [ ['rotate', angle], ['translate', graphic.distance, graphic.distance], ['scale', graphic.size], ['translate', -width / 2, -width / 2] ] .map(([cmd, ...args]) => `${cmd}(${args.join(', ')})`) .join(' '); const group = d3.select(content.querySelector(`#${graphic.group_id}`)); group .selectAll("use") .data(angles) .join(enter => enter.append("use").attr('href', `#${graphic.def_id}`)) .attr('transform', transform); }); }; render(); viewof values.addEventListener('input', render); return svgelem; }34:[{"id":"94c0f11cc77dbc03b294f1a4b8e8fc5f628ad8e2253725934e8d4a2f8accef21dc3015cda0d5e7c6823c073d158e35b54949445f9c0e46a1e10b360d70ce3cd8","href":"https://static.observableusercontent.com/files/94c0f11cc77dbc03b294f1a4b8e8fc5f628ad8e2253725934e8d4a2f8accef21dc3015cda0d5e7c6823c073d158e35b54949445f9c0e46a1e10b360d70ce3cd8","name":"Flag@1.svg","type":"image/svg+xml","lastModified":1616513838352.278,"size":20499},{"id":"88ea28d82db20afc09c13a9a56fd227bd2395ca79e3c411c9ca23ab0fa443136e653d90ee42f8819ae991a9f39df0970be783bfb617382c7c8b17cc4a70c59cf","href":"https://static.observableusercontent.com/files/88ea28d82db20afc09c13a9a56fd227bd2395ca79e3c411c9ca23ab0fa443136e653d90ee42f8819ae991a9f39df0970be783bfb617382c7c8b17cc4a70c59cf","name":"butterfly@1.svg","type":"image/svg+xml","lastModified":1616513535354.316,"size":1063501},{"id":"0a58aa87a400ea50fd913fecda720495fa7b4d50097fb8f00c25f97d36119186c5102bb510e8ac96c162e8486f05f9c0574bafa4e17d2800ea8b443af8c1676d","href":"https://static.observableusercontent.com/files/0a58aa87a400ea50fd913fecda720495fa7b4d50097fb8f00c25f97d36119186c5102bb510e8ac96c162e8486f05f9c0574bafa4e17d2800ea8b443af8c1676d","name":"butterfly_optimise (2)@3.svg","type":"image/svg+xml","lastModified":1617109968488.521,"size":360260},{"id":"6610e58b1700a9bef7c21138e82f9ffa10658a71e6aa4abc716b659eded2d220cdd1b23ca0b1c05a1920980535d619f858fbf72f71dff40838b02d9ce1c4abb6","href":"https://static.observableusercontent.com/files/6610e58b1700a9bef7c21138e82f9ffa10658a71e6aa4abc716b659eded2d220cdd1b23ca0b1c05a1920980535d619f858fbf72f71dff40838b02d9ce1c4abb6","name":"banner.svg","type":"image/svg+xml","lastModified":1616521309795.063,"size":43399},{"id":"208b123a7c3f38342521961ebb233323195c55bdec78e6fa703edc587e9e09abf500374ab589879fbc5682fb131a162db25f4531024cf2c145851b73f1419b96","href":"https://static.observableusercontent.com/files/208b123a7c3f38342521961ebb233323195c55bdec78e6fa703edc587e9e09abf500374ab589879fbc5682fb131a162db25f4531024cf2c145851b73f1419b96","name":"Stocking@3.svg","type":"image/svg+xml","lastModified":1616531324604.652,"size":32870},{"id":"54ecb2ce024c312365ac1c356df5b54db5aae993e5d4cb2936e983697dd7107e0e545cb56e7d1f0a59ea684953cc0d104d3f96e7d1e5dabf154ad5528278158e","href":"https://static.observableusercontent.com/files/54ecb2ce024c312365ac1c356df5b54db5aae993e5d4cb2936e983697dd7107e0e545cb56e7d1f0a59ea684953cc0d104d3f96e7d1e5dabf154ad5528278158e","name":"bird@1.svg","type":"image/svg+xml","lastModified":1616522580726.913,"size":62094},{"id":"caaa7359a47bc13c41612c1442c165f92b4ad0b82c4f519aacbb9280f3e8f6d2251f2cb41b53f40fe922f376f91357b4ba795d672988111c8aefce4a80a245ba","href":"https://static.observableusercontent.com/files/caaa7359a47bc13c41612c1442c165f92b4ad0b82c4f519aacbb9280f3e8f6d2251f2cb41b53f40fe922f376f91357b4ba795d672988111c8aefce4a80a245ba","name":"fan.svg","type":"image/svg+xml","lastModified":1616633679795.023,"size":102070},{"id":"1238443e0db2e7e114dee3fd92db94126709b274adfd8f9252f105899f6feaea90b327926ed82142e3a8fc9ef54fbf36f2eafcb78dd7d7a0ae4ee01aea4c1f39","href":"https://static.observableusercontent.com/files/1238443e0db2e7e114dee3fd92db94126709b274adfd8f9252f105899f6feaea90b327926ed82142e3a8fc9ef54fbf36f2eafcb78dd7d7a0ae4ee01aea4c1f39","name":"flag2@1.svg","type":"image/svg+xml","lastModified":1616632998007.237,"size":40501},{"id":"f4f1e444204a0b4d5711eb97a2d313b705aba64d185f7481d0c315f43115a3aefbef86afca2cfe7f1d01c38045283df3506fca251f56ba47a04b250be46dd5de","href":"https://static.observableusercontent.com/files/f4f1e444204a0b4d5711eb97a2d313b705aba64d185f7481d0c315f43115a3aefbef86afca2cfe7f1d01c38045283df3506fca251f56ba47a04b250be46dd5de","name":"collage (10).png","type":"image/png","lastModified":1616637713393.166,"size":1107532},{"id":"a863b0c5c97db9bec74ac5acbb2efcd93dbaf844d468b3c22d64f9edae07734a9c72459797742a17ff8bd1f22ca6946cf06bc8ae5998de1318701d64a803c155","href":"https://static.observableusercontent.com/files/a863b0c5c97db9bec74ac5acbb2efcd93dbaf844d468b3c22d64f9edae07734a9c72459797742a17ff8bd1f22ca6946cf06bc8ae5998de1318701d64a803c155","name":"Game@1.svg","type":"image/svg+xml","lastModified":1616632198232.107,"size":151297},{"id":"152c38125e4ac1640dfff3e983d20e59f60f86afce6ee57b2fb9a5abc6a1f50d5b363927e7a335b98f2ab7da5609839061ab7d9becf63caa062c2079e58d9d46","href":"https://static.observableusercontent.com/files/152c38125e4ac1640dfff3e983d20e59f60f86afce6ee57b2fb9a5abc6a1f50d5b363927e7a335b98f2ab7da5609839061ab7d9becf63caa062c2079e58d9d46","name":"facecream@2.svg","type":"image/svg+xml","lastModified":1616635795622.227,"size":44223},{"id":"cbd7e9aec743b150c448cc9940e489ec5b7559883a7ca807c8f77d110d4b0b8d5598c91d6b7490bf8a2f2fd738f5e77ec95f32c393ef9b269d339dec20e79be2","href":"https://static.observableusercontent.com/files/cbd7e9aec743b150c448cc9940e489ec5b7559883a7ca807c8f77d110d4b0b8d5598c91d6b7490bf8a2f2fd738f5e77ec95f32c393ef9b269d339dec20e79be2","name":"fan2@2.svg","type":"image/svg+xml","lastModified":1616674957296.967,"size":249075},{"id":"50e7507726d67b2436046285428d07e1faa2279ed52c6d7f1ab9fd292a9740d817520bd629b5111982ffd920a15d0f3b6bad50cf920afd093c9918f4af055ca5","href":"https://static.observableusercontent.com/files/50e7507726d67b2436046285428d07e1faa2279ed52c6d7f1ab9fd292a9740d817520bd629b5111982ffd920a15d0f3b6bad50cf920afd093c9918f4af055ca5","name":"collage (16).png","type":"image/png","lastModified":1616886484374.439,"size":628003},{"id":"c00436e70fa014e6b0764b937a995358703cfb6b13ab253c201e75c8546ee3775c1693b688e26ea6468f082ae79d33a7c29330901724e5e9cd8d6a8c9617a437","href":"https://static.observableusercontent.com/files/c00436e70fa014e6b0764b937a995358703cfb6b13ab253c201e75c8546ee3775c1693b688e26ea6468f082ae79d33a7c29330901724e5e9cd8d6a8c9617a437","name":"collage (12).png","type":"image/png","lastModified":1616886567192.872,"size":378912},{"id":"e998e21c353c80f8ac9dddd011990e65ffa5170ee46a83ba106c11cbce8e842239c915f5e654a90f33a5da0a764098ef0b35f2bd8ed1c90295821ea3431dc299","href":"https://static.observableusercontent.com/files/e998e21c353c80f8ac9dddd011990e65ffa5170ee46a83ba106c11cbce8e842239c915f5e654a90f33a5da0a764098ef0b35f2bd8ed1c90295821ea3431dc299","name":"collage (5).png","type":"image/png","lastModified":1616886632400.208,"size":922240},{"id":"262468145b7f90b7f4abdbc62eed3b1beb819a6f6d9cfc0504c9956a1e0751765ebce40d177524d4e42dd2ef81c0e7068d1f73812fd1e41011cb65789cbea976","href":"https://static.observableusercontent.com/files/262468145b7f90b7f4abdbc62eed3b1beb819a6f6d9cfc0504c9956a1e0751765ebce40d177524d4e42dd2ef81c0e7068d1f73812fd1e41011cb65789cbea976","name":"collage (11).png","type":"image/png","lastModified":1616886757021.238,"size":162870},{"id":"7d82ef999809a72018082d9011faae0763dc8a23b779b5eac69a4e9e41acfc8c95480b3abedfccd218be89c22641d1b45567edb67ee7595f3248fb96cd3a2a65","href":"https://static.observableusercontent.com/files/7d82ef999809a72018082d9011faae0763dc8a23b779b5eac69a4e9e41acfc8c95480b3abedfccd218be89c22641d1b45567edb67ee7595f3248fb96cd3a2a65","name":"collage (19).png","type":"image/png","lastModified":1616924635024.755,"size":1166086}] 2f:{"title":"Votes for Women: Suffragette Collage Maker","cells":[{"id":0,"value":"md`# *Votes for Women*: Suffragette Collage Maker`","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"md`Submission for [Observable's Women's History Month DataViz Contest](https://next.observablehq.com/@observablehq/womens-history-month-dataviz-contest). Thank you to [Jacob Rus](https://observablehq.com/@jrus) for his help optimising the code.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1016,"value":"html`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1224,"value":"md`## Graphics`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"md`# Collage Maker`","pinned":false,"hidden":false,"mode":"ojs"},{"id":882,"value":"md`\n- *Tick the boxes in the list below to add graphics to your collage.*\n- *Use the controls that appear below this to move/resize/add more*\n- *Drag the items in the list up and down to change the order of what's on top.*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"viewof graphics_order = selectOrder([\n \"Flag (orange)\",\n \"Flag (blue)\",\n \"Bird\",\n \"Fan (slogan)\",\n \"Fan (map)\",\n \"Stocking\",\n \"Butterfly\",\n \"Sash\",\n \"Game\",\n \"Face powder\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":676,"value":"viewof values = {\n let inputs_array = [];\n graphics_order.forEach(function(d, i) {\n let [number, size, distance] = mutable save_values.get(d) || [1, 0.3, 0];\n inputs_array.push([\n slider({\n title: d,\n description: `${d} number`,\n min: 0,\n max: 30,\n step: 1,\n value: number\n }),\n slider({\n description: `${d} size`,\n min: 0,\n max: 1,\n step: 0.01,\n value: size\n }),\n slider({\n description: `${d} distance from centre`,\n min: -500,\n max: 500,\n step: 10,\n value: distance\n })\n ]);\n });\n return inputsGroup(inputs_array);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1322,"value":"list_to_values = {\n let list_to_values = new Map();\n list_to_values.set('Flag (orange)', 'Flag');\n list_to_values.set('Flag (blue)', 'Flag2');\n list_to_values.set('Bird', 'Bird');\n list_to_values.set('Fan (slogan)', 'Fan');\n list_to_values.set('Fan (map)', 'Fan2');\n list_to_values.set('Stocking', 'Stocking');\n list_to_values.set('Butterfly', 'Butterfly');\n list_to_values.set('Sash', 'Sash');\n list_to_values.set('Game', 'Game');\n list_to_values.set('Face powder', 'FacePowder');\n return list_to_values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":743,"value":"{\n values;\n mutable save_values = new Map(graphics_order.map((d, i) => [d, values[i]]));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":750,"value":"mutable save_values = new Map()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1356,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"md`## Graphics SVGs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"flag = FileAttachment(\"Flag@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":928,"value":"flag2 = FileAttachment(\"flag2@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"bird = FileAttachment(\"bird@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"butterfly = FileAttachment(\"butterfly_optimise (2)@3.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"stocking = FileAttachment(\"Stocking@3.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"sash = FileAttachment(\"banner.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":895,"value":"game = FileAttachment(\"Game@1.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":950,"value":"fan = FileAttachment(\"fan.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"fan2 = FileAttachment(\"fan2@2.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":980,"value":"facepowder = FileAttachment(\"facecream@2.svg\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":651,"value":"import { selectOrder } from \"@jashkenas/select-order-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"import { slider, select } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"import { inputsGroup } from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1535,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}