31:Ta47,md`# Suffragist petition 1892 - 1893 ### [21st march woman history month](https://observablehq.com/@observablehq/womens-history-month-dataviz-contest) ${await FileAttachment("insta.gif").image()} # Kate Sheppard --- ## The right of women to vote. In early colonial New Zealand women were excluded from any involvement in politics but in the later 19th century, some women began to challenge this narrow view of the world. New opportunities were opening up for women and girls in secondary and university education, medicine, and in church and charitable work. Attention soon turned to women’s legal and political rights. In New Zealand began the **suffrage movement** with its two main themes of equal political rights for women and a determination to use them for the moral reform of society (through, for example, the prohibition of alcohol). New Zealand’s pioneering suffragists were inspired both by the equal-rights arguments of philosopher John Stuart Mill and British feminists and by the missionary efforts of the American-based Women’s Christian Temperance Union (WCTU). A number of New Zealand’s leading male politicians, including John Hall, Robert Stout, Julius Vogel, William Fox and John Ballance, supported women’s suffrage. In 1878, 1879 and 1887 bills or amendments extending the vote to women (or at least female ratepayers) only narrowly failed to pass in Parliament. Kate Sheppard and others organised a series of huge petitions that they presented to Parliament. In 1891 more than 9000 signatures were gathered, in 1892 almost 20,000, and finally in 1893 nearly 32,000 were obtained – almost a quarter of the adult European female population of New Zealand. This right to vote also resulted in women getting more rights as they became recognised under the law as a person. Meaning they were controlled but the will of their fathers or husbands at things like property ownership and inheritances. This change empowered their independence. **Reference information from:** https://nzhistory.govt.nz/politics/womens-suffrage https://natlib.govt.nz/he-tohu/about/womens-suffrage-petition https://www.archives.govt.nz/discover-our-stories/he-tohu-rangatira-maori-women-and-the-1893-suffrage-petition The data visual below shows where some of the 32,000 votes where collected from. --- Click on the large circles to see who signed the partition. You can mouse over to see their names and left click to read more about them on ${baseURL}. Clicking outside the circle will take you make to the larger circles. NB, you may need to use F11 to see all the circles and the map.`32:T21a3,{ // can't resize as so much is hard coded. let height = 320 const svg = d3.select(DOM.svg(width,height)) let g = svg.append('g') .attr('id','infoZone') g.append('rect') .attr('x',height) .attr('y',20) .attr('width',width-height) .attr('height',height) .attr('fill','#DCF763') g.append('text') .attr('x',width/3) .attr('y',66) .attr('font-size',"1.9em") .attr('font-style','italic') .text('1892 Partition signatures from around New Zealand.') let g2 = svg.append('g') .append("svg:image") .attr("xlink:href", nzSVG) .attr("width", height) .attr("height", height) .attr("x", 40) .attr("y",10) .attr('id','nz') // christchurch let Christchurch = svg.append('g') .attr('id','christchurch') // _.snakeCase(_.escape(i.data.data.id)) .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',170) .attr('cy',230) .attr('r',8) .attr('fill',colorScale('Christchurch')) .style('stroke','#aaa') .style("opacity", 0.75) let Canterbury = svg.append('g') .attr('id','canterbury') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',175) .attr('cy',210) .attr('r',15) .attr('fill',colorScale('Canterbury')) .attr('stroke','#') .style('stroke','#aaa') .style("opacity", 0.75) let SouthCanterbury = svg.append('g') .attr('id','south_canterbury') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',150) .attr('cy',245) .attr('r',17) .attr('fill',colorScale('South Canterbury')) .style('stroke','#aaa') .style("opacity", 0.75) let Manawatū = svg.append('g') .attr('id','manawatu_horowhenua') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',215) .attr('cy',160) .attr('r',12) .attr('fill',colorScale('Manawatū/Horowhenua')) .style('stroke','#aaa') .style("opacity", 0.75) let Taranaki = svg.append('g') .attr('id','taranaki') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',198) .attr('cy',135) .attr('r',12) .attr('fill',colorScale('Taranaki')) .style('stroke','#aaa') .style("opacity", 0.75) let Whanganui = svg.append('g') .attr('id','whanganui') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',210) .attr('cy',147) .attr('r',7) .attr('fill',colorScale('Whanganui')) .style('stroke','#aaa') .style("opacity", 0.75) let Wellington = svg.append('g') .attr('id','wellington') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',207) .attr('cy',180) .attr('r',7) .attr('fill',colorScale('Wellington')) .style('stroke','#aaa') .style("opacity", 0.75) let Otago = svg.append('g') .attr('id','otago') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',125) .attr('cy',275) .attr('r',20) .attr('fill',colorScale('Otago')) .style('stroke','#aaa') .style("opacity", 0.75) let Dunedin = svg.append('g') .attr('id','dunedin') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',135) .attr('cy',278) .attr('r',8) .attr('fill',colorScale('Dunedin')) .style('stroke','#aaa') .style("opacity", 0.75) let ShagPoint = svg.append('g') .attr('id','shag_point') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',146) .attr('cy',260) .attr('r',4) .attr('fill',colorScale('Shag Point')) .style('stroke','#aaa') .style("opacity", 0.75) let Marlborough = svg.append('g') .attr('id','marlborough') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',190) .attr('cy',190) .attr('r',15) .attr('fill',colorScale('Marlborough')) .style('stroke','#aaa') .style("opacity", 0.75) let Wairarapa = svg.append('g') .attr('id','wairarapa') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',230) .attr('cy',165) .attr('r',12) .attr('fill',colorScale('Wairarapa')) .style('stroke','#aaa') .style("opacity", 0.75) let Auckland = svg.append('g') .attr('id','auckland') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',205) .attr('cy',85) .attr('r',12) .attr('fill',colorScale('Auckland')) .style('stroke','#aaa') .style("opacity", 0.75) let HaurakiCoromandel = svg.append('g') .attr('id','hauraki_coromandel') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',224) .attr('cy',85) .attr('r',10) .attr('fill',colorScale('HaurakiCoromandel')) .style('stroke','#aaa') .style("opacity", 0.75) let Northland = svg.append('g') .attr('id','northland') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',184) .attr('cy',50) .attr('r',27) .attr('fill',colorScale('Northland')) .style('stroke','#aaa') .style("opacity", 0.75) let Southland = svg.append('g') .attr('id','southland') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',90) .attr('cy',278) .attr('r',18) .attr('fill',colorScale('Southland')) .style('stroke','#aaa') .style("opacity", 0.75) let HawkesBay = svg.append('g') .attr('id','hawke_39_s_bay') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',248) .attr('cy',136) .attr('r',14) .attr('fill',colorScale(`Hawke's Bay`)) .style('stroke','#aaa') .style("opacity", 0.75) let WestCoast = svg.append('g') .attr('id','west_coast') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',110) .attr('cy',200) .attr('r',50) .attr('fill',colorScale('West Coast')) .style('stroke','#aaa') .style("opacity", 0.75) let Nelson = svg.append('g') .attr('id','nelson') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',178) .attr('cy',181) .attr('r',6) .attr('fill',colorScale('Nelson')) .style('stroke','#aaa') .style("opacity", 0.75) let EastCoast = svg.append('g') .attr('id','east_coast') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',262) .attr('cy',110) .attr('r',14) .attr('fill',colorScale('East Coast')) .style('stroke','#aaa') .style("opacity", 0.75) let Waikato = svg.append('g') .attr('id','waikato') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',215) .attr('cy',105) .attr('r',14) .attr('fill',colorScale('Waikato')) .style('stroke','#aaa') .style("opacity", 0.75) let BayofPlenty = svg.append('g') .attr('id','bay_of_plenty') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',240) .attr('cy',107) .attr('r',13) .attr('fill',colorScale('Bay of Plenty')) .style('stroke','#aaa') .style("opacity", 0.75) let KingCountry = svg.append('g') .attr('id','king_country') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',220) .attr('cy',133) .attr('r',14) .attr('fill',colorScale('King Country')) .style('stroke','#aaa') .style("opacity", 0.75) let England = svg.append('g') .attr('id','england') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',50) .attr('cy',50) .attr('r',10) .attr('fill',colorScale('England')) .style('stroke','#aaa') .style("opacity", 0.75) let Unknown = svg.append('g') .attr('id','unknown') .attr('visibility','hidden') // hidden visible .append('circle') .attr('cx',270) .attr('cy',270) .attr('r',10) .attr('fill',colorScale('Unknown')) .style('stroke','#aaa') .style("opacity", 0.75) return svg.node(); }33:T1657,// create SVG disp ={ let pack = packit(hierarchy) // pack each time as it's transformed when sigs are drawn to the cite let focus = false let focused_selector = '' let zoomDest = 0 let transition = 0 const svg = d3.select(DOM.svg(width, height)) .attr('preserveAspectRatio',"xMinYMin slice") let view = _.split(svg.attr('viewBox'),',') // save the default view when not zoomed let bg = svg.append('rect') .attr('x',0) .attr('y',0) .attr('width',width) .attr('height',height) .attr('fill','#FFF') .on("click", () => { if (focus == true) { // zoom out if zoomed in when svg is clicked svg.select(focused_selector) .selectAll('.sig') .attr('pointer-events','none') focus = false transition = svg.transition() // reset to default view .duration(500) .tween("zoom", d => { const z = d3.interpolateZoom( zoomDest, [+view[0],+view[1],+view[2]]); // from too, x y width. return t => zoomTo(z(t)); }); } }) const cityCircle = svg.selectAll('g') .data(pack.children).join( enter => { const g = enter.append('g') .attr('id', v => `${_.snakeCase(_.escape(v.data.data.id))}_main`) g.append('circle') // create one circle for each city .classed('city', true) // add class of city so I can reference it with the NZ svg << maybe bug .attr('r', d => d.r) .attr('fill', '#fff') .attr('stroke', '#00000080') .attr('stroke-width', 1.5) .on("mouseover", function(d,i) { if (focus == false) { d3.select(`SVG #${_.snakeCase(_.escape(i.data.data.id))}`).attr('visibility','visible') // hidden visible d3.select(this).attr("stroke", "#000"); d3.select(`SVG #infoZone`) .append('text') .attr('id','infoText') .attr('x',width/3) .attr('y',120) .attr('font-size',"2.1em") .text(`${i.data.data.id} collected ${i.data.children.length} signtures.`) } }) .on("mouseout", function(d,i) { if (focus == false) { d3.select(`SVG #${_.snakeCase(_.escape(i.data.data.id))}`).attr('visibility','hidden') // hidden visible d3.select(this).attr("stroke", '#00000080'); d3.selectAll(`SVG #infoText`).remove() } }) .on("click", (event, d) => zoom(event, d)); // zoom in when circle clicked return g } ).attr('transform', d => `translate(${d.x}, ${d.y})`) // now create the signitures layer for each city const city = cityCircle.selectAll('circle.sig') .data(d => { // each city return _.map(d.children, child => Object.assign(child, { x: child.x - d.x, y: child.y - d.y, })) // shifted because of transforms }) .join('circle') .classed('sig', true) // css for grouping .attr('transform', d => `translate(${d.x}, ${d.y})`) .attr('r', d => d.r) .attr('fill', d => colorScale(d.data.data.type)) .attr('pointer-events','none') // .append("svg:title") // this blocks the on('click') :( // .text( d => `Click to read more about ${d.data.data.givenNames} ${d.data.data.surname}`) // =========================================================== .on("mouseover", (e,d) => { console.log('d',d,'e',e) // ToDo: add tooltip // >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> // text: click to read more about ${d.data.data.givenNames} ${d.data.data.surname} d3.select(`SVG #infoZone`) .append('text') .attr('id','infoText_sig') .attr('x',width/3) .attr('y',220) .attr('font-size',"2.1em") .text(`${d.data.data.givenNames} ${d.data.data.surname} from ${d.data.data.consistentTownSuburb} `) }) .on("mouseout", () => { d3.select(`SVG #infoText_sig`).remove() }) .on('click', (e,d)=>{ console.log( `${baseURL}${d.data.data.sigIMG}`) window.open( `${baseURL}${d.data.data.sigIMG}`, '_blank' // <- This is what makes it open in a new window. ); }) // ------------------------------------------------ // zoom zoom function zoom(event,d){ if (focus == false) { // if status is currently zoomed in, then zoom out. focus = true focused_selector = `#${_.snakeCase(_.escape(d.data.data.id))}_main` svg.select(focused_selector) .selectAll('.sig') .attr('pointer-events','auto') let dx =(d.x-d.r-1) - (d.r/2) // work out the center of the city circle zoomDest = [dx, d.y-d.r-1, d.r*3.05] // width height are the same because zoom into circles transition = svg.transition() .duration(800) .tween("zoom", d => { const z = d3.interpolateZoom([+view[0],+view[1],+view[3]], zoomDest); // from too, x y width. return t => zoomTo(z(t)); }); } else { focus = false transition = svg.transition() .duration(500) .tween("zoom", d => { const z = d3.interpolateZoom( zoomDest, [+view[0],+view[1],+view[2]]); // from too, x y width. return t => zoomTo(z(t)); }); svg.select(focused_selector) .selectAll('.sig') .attr('pointer-events','none') } } function zoomTo(v) { svg.attr('viewBox',`${v[0]},${v[1]},${v[2]},${v[2]}`) } return svg.node() }34:T9a4,md ` ## scrapping the advanced dataset [This dataset](https://nzhistory.govt.nz/politics/womens-suffrage/petition ) was used because it had better references to tge signotories than the [xls document](https://nzhistory.govt.nz/politics/womens-suffrage/about-the-petition). Still [the XLS document](https://docs.google.com/spreadsheets/d/1eOvHYjFF21IWs0Xoj9Ecw-sazVO-3HqVaevAMgomFVM/edit#gid=1295061349) No direct links to the images of the signatures but includes a column for *Mrs, Miss, Mr.* So scraped the 600 pages. [Scrapper Code can be seen here.](https://gist.github.com/hellonearthis/e1a418e7e84399a92b8177cfb92bda81) #### example of one entry in the table. ~~~html 1 Carpenter Mary J.

Yaldhurst

Christchurch

more… ~~~ From the class I could extract the type do data. *(but I went for a quick hardcoded option as it's a run one time script)* - views-field-field-original-sheet-no -- *Link to what page the signature appeared on* - views-field-field-surname-0 - views-field-field-given-names - views-field-field-original-address - views-field-field-consistent-town-subutb - views-field-field-consistent-city-region -- *can be null* - views-field-view-node -- *contains a url to an image* baseURI https://nzhistory.govt.nz/politics/womens-suffrage/ url looks like this: https://nzhistory.govt.nz/politics/womens-suffrage/petition?page=0 (page 0 -> 599) selectors are: ~~~js document.querySelectorAll('div.view-content > table > tbody > tr' Array.from(document.querySelectorAll('div.view-content > table > tbody > tr')).map( (d) => d.innerText) Array.from(document.querySelectorAll('div.view-content > table > tbody > tr')).map( (d) => d.textContent) ~~~ There are about 40 entries per page. **Thanks to Shirley Wu for the help on how to build the hierarchical data structure. ** ` 35:[{"id":"bcbb05294702c32b47dd8bf14a3c0de8204323ce2820bc75fc47a82197cc333502b91e9c4ef4c2f86c5bb794b0cf5a8d67af6cae53131ef79b5a24504d11c112","href":"https://static.observableusercontent.com/files/bcbb05294702c32b47dd8bf14a3c0de8204323ce2820bc75fc47a82197cc333502b91e9c4ef4c2f86c5bb794b0cf5a8d67af6cae53131ef79b5a24504d11c112","name":"insta.gif","type":"image/gif","lastModified":1616984152253.972,"size":14689687},{"id":"ebb9d02a49c146c1e94f2acee0ae8d5b1663d057750951b112e3cf36c21e4788b812887d44d9f3c605c7573b0870ea4eaabdf4a27edca9e89f7465e169f1e73c","href":"https://static.observableusercontent.com/files/ebb9d02a49c146c1e94f2acee0ae8d5b1663d057750951b112e3cf36c21e4788b812887d44d9f3c605c7573b0870ea4eaabdf4a27edca9e89f7465e169f1e73c","name":"suffragist1892.json","type":"application/json","lastModified":1615616015983.997,"size":5777181},{"id":"dc3af4243bb7f15b9ec5ad797640d8056af1f0abe601670fb67b4d9a33a4dece9f9c038597d1f1ea080891fe910b6fd4b1dea935c932f842ca2e3f76b4dba646","href":"https://static.observableusercontent.com/files/dc3af4243bb7f15b9ec5ad797640d8056af1f0abe601670fb67b4d9a33a4dece9f9c038597d1f1ea080891fe910b6fd4b1dea935c932f842ca2e3f76b4dba646","name":"New_Zealand_Simplified.svg","type":"image/svg+xml","lastModified":1615776341438.799,"size":51374}] 2f:{"title":"Suffragist petition 1892 - 1893","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1476,"value":" packit(hierarchy) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"packit = d3.pack()\n .size([width - 2, height - 2]) // can I set a min circle size?\n .padding(1)\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":412,"value":"// first, get data into hierarchical structure\nhierarchy = {\n let h = d3.stratify()\n .id(d => d.id)\n .parentId(d => d.type)\n (allNodes) // parse the nodes\n\n// then use d3.hierarchy to calculate the size of each circle\n\nreturn d3.hierarchy(h).sum(d => 1) // added a value that represent the number of elements in each type \n // in this case the number of signtures in the city\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"allNodes = {\n\n let addedID = suffragist.map(d=>{ // Appends the id and type to the dataset\n d.id = 'child'\n d.type = d.consistentCityRegion\n return d\n })\n \n return _.union( // @shierlys magic\n [{id: 'root', type: ''}],\n _.map(typeIDs, id => new Object({id, type: 'root'})),\n addedID,\n )\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"// more sheirly magic\ntypeIDs = _.chain(suffragist)\n .map('consistentCityRegion')\n .countBy()\n .toPairs()\n .map(0)\n .value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"runonce = [false]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1220,"value":"bubbleColors = [\n \"#69d2e7\", \"#fa6000\", \"#7fbc41\", \"#ff847c\", \"#ffe181\",\n \"#c06c84\", \"#7c5b7b\", \"#355cad\", \"#fab87f\", \"#b28774\", \n \"#b2182b\", \"#574951\", \"#83988e\", \"#fc354c\", \"#5932af\", \n \"#0a9fbc\", \"#a5c500\", \"#cdb380\", \"#036564\", \"#A39649\",\n \"#a7d5bd\", \"#7a78c7\", \"#ffa000\", \"#f0f020\", \"#f7a541\"\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"colorScale = d3.scaleOrdinal(\n typeIDs, // domain -> type\n bubbleColors, // range\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"height = 800","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"baseURL = 'https://nzhistory.govt.nz'","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"cities = suffragist.map( d => d.consistentCityRegion)","pinned":false,"hidden":false,"mode":"ojs"},{"id":273,"value":"city_numbers = _.countBy(cities);","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"total_sigs = d3.sum(_.values(city_numbers))","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"md`### scraped data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"suffragist = FileAttachment(\"suffragist1892.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"nzSVG = FileAttachment(\"New_Zealand_Simplified.svg\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"md` ---\n# Appendix\n\nPhoto animated by `","pinned":false,"hidden":false,"mode":"ojs"},{"id":1734,"value":"md`#### todo if I had more time and energy:\nAdd tool tips.\n\nGlitches to fix:\n- circles over NZ not removed/hidden\n- text sometimes prints two lots of text at one time.\n\nIf I was to do this again, I would use a map of New Zealand that was broken up into regions. (That would fix the scaling problems I currently have as I did soo much hard coding of data)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"baseURL+suffragist[0].sheetURL // example of entry","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"Table(suffragist)","pinned":true,"hidden":false,"mode":"ojs"},{"id":420,"value":"Table(allNodes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"md `---\n### Imports and Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":288,"value":"import {Table, Search} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1725,"value":"","pinned":true,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}