2c:null 2d:["$","title",null,{"children":"How much clothing do people own? (2024) | mariaclee1 | Observable"}] 32:T660,canvas = { const context = DOM.context2d(width, height); const projection = d3.geoOrthographic().fitExtent([[10, 10], [width - 10, height - 10]], sphere); const path = d3.geoPath(projection, context); function render(country, arc) { context.clearRect(0, 0, width, height); context.lineWidth = 1.5; context.fillStyle = "#e8cafa"; context.beginPath(), path(sphere), context.fill(), context.stroke(); context.beginPath(), path(land), context.fillStyle = "#d984db", context.fill(); context.beginPath(), path(country), context.fillStyle = "#f5bd05", context.fill(); context.beginPath(), path(borders), context.strokeStyle = "#eeeeeeff", context.lineWidth = 0.5, context.stroke(); context.beginPath(), path(sphere), context.strokeStyle = "##eeeeeeff", context.lineWidth = 1.5, context.stroke(); context.beginPath(), path(arc), context.stroke(); return context.canvas; } let p1, p2 = [0, 0], r1, r2 = [0, 0, 0]; for (const country of countries) { mutable name = country.properties.name; yield render(country); p1 = p2, p2 = d3.geoCentroid(country); r1 = r2, r2 = [-p2[0], tilt - p2[1], 0]; const ip = d3.geoInterpolate(p1, p2); const iv = Versor.interpolateAngles(r1, r2); await d3.transition() .duration(1250) .tween("render", () => t => { projection.rotate(iv(t)); render(country, {type: "LineString", coordinates: [p1, ip(t)]}); }) .transition() .tween("render", () => t => { render(country, {type: "LineString", coordinates: [ip(t), p2]}); }) .end(); } } 33:T7b4,class Versor { static fromAngles([l, p, g]) { l *= Math.PI / 360; p *= Math.PI / 360; g *= Math.PI / 360; const sl = Math.sin(l), cl = Math.cos(l); const sp = Math.sin(p), cp = Math.cos(p); const sg = Math.sin(g), cg = Math.cos(g); return [ cl * cp * cg + sl * sp * sg, sl * cp * cg - cl * sp * sg, cl * sp * cg + sl * cp * sg, cl * cp * sg - sl * sp * cg ]; } static toAngles([a, b, c, d]) { return [ Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI, Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI, Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI ]; } static interpolateAngles(a, b) { const i = Versor.interpolate(Versor.fromAngles(a), Versor.fromAngles(b)); return t => Versor.toAngles(i(t)); } static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) { a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1; const x = new Array(4); return t => { const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t); x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l; return x; }; } static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) { let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2; if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot; if (dot > 0.9995) return Versor.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]); const theta0 = Math.acos(Math.max(-1, Math.min(1, dot))); const x = new Array(4); const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot); a2 /= l, b2 /= l, c2 /= l, d2 /= l; return t => { const theta = theta0 * t; const s = Math.sin(theta); const c = Math.cos(theta); x[0] = a1 * c + a2 * s; x[1] = b1 * c + b2 * s; x[2] = c1 * c + c2 * s; x[3] = d1 * c + d2 * s; return x; }; } }34:[{"id":"0a71bde92b451d9bc20012eea6db83550c0fa126a055bfb389d94d4371ae25b77ec2341f6c342787948f0e09ab3690f8aa770925f1e5771a8bc30199d23258e4","href":"https://static.observableusercontent.com/files/0a71bde92b451d9bc20012eea6db83550c0fa126a055bfb389d94d4371ae25b77ec2341f6c342787948f0e09ab3690f8aa770925f1e5771a8bc30199d23258e4","name":"2024surveyresults-4.txt","type":"text/plain","lastModified":1712405641821.926,"size":95744}] 30:{"id":"f8b336ead20354e0","slug":null,"title":"How much clothing do people own? (2024)","thumbnail":"ed01324cc2f5fe1ee1d11de8619a9b9e3f86a5cf47026f45e5229a4356252c79","access_level":"public","create_time":"$D2024-04-06T11:23:12.800Z","update_time":"$D2024-04-06T18:58:07.515Z","view_time":null,"first_public_time":"$D2024-04-06T12:14:36.809Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"2508d6007d4dc38f","login":"mariaclee1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0d2248e19b7cdedd845fbed10ee207a6803a54214b1611ddaf43a744052098b0","tier":"starter_2024"},"version":60,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"513f477eeb795cf3","login":"mariaclee1","name":"Maria Lee","avatar_url":"https://avatars-next.observableusercontent.com/7d36380306995909d962720ec9751baa9e46c7783f52c1a647deb5f6343f6403","tier":null}],"members":[{"type":"team","id":"2508d6007d4dc38f","login":"mariaclee1","name":"","avatar_url":"https://avatars-next.observableusercontent.com/0d2248e19b7cdedd845fbed10ee207a6803a54214b1611ddaf43a744052098b0","tier":"starter_2024","role":"editor"},{"type":"individual","id":"513f477eeb795cf3","login":"mariaclee1","name":"Maria Lee","avatar_url":"https://avatars-next.observableusercontent.com/7d36380306995909d962720ec9751baa9e46c7783f52c1a647deb5f6343f6403","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"How much clothing do people own? (2024)","cells":[{"id":0,"value":"

How much clothing do people own? (2024)

D3 › Gallery

\n\n# How much clothing do people own? \n\n(Data from 2020 to 2024)\n\nThe first question most people ask when they want to transition to a minimal wardrobe is: how much clothing should I have? In this story - I explore how much is in a ‘typical’ wardrobe using data from 283 people from around the world.\n\nOn July 30, 2020, I opened a survey and invited [my Instagram](https://www.instagram.com/capsule_wardrobe_data/) followers to go through their closets and count all their clothing - including things out of season, in the laundry, their gym clothes, pajamas...everything! You can check out the survey (and submit your own responses!) [here.](https://goldzipper.squarespace.com/survey)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"country = html`

${name}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"summary = md`As I'm sure you can imagine, getting people to respond to any survey is a challenge, but especially when it requires a significant amount of time and effort counting every piece of clothing and pair of shoes! \n\nMy hypothesis is that my data skews a bit lower than what the 'true' average is for a few reasons: \n\n-People with less clothing are more likely to count everything and submit a survey because it's not as big of a time and effort commitment\n\n-The audience that was asked to complete the survey is more likely to have a smaller wardrobe already because they follow accounts related to sustainable fashion\n\nDisclosures: This is obviously not a true scientific study. I am very aware that there isn't enough data, controls around data submission and even survey respondent selection to make real conclusions. Please read and participate with this as an art project that is intended to make you think...and enjoy! `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"rainbow = {\n const p = md`And finally...BIG thank you to [Mike Bostock](https://observablehq.com/user/@mbostock) whose code I referenced and [Elise Ay](https://www.instagram.com/eliseai/) and [Sophia Li](https://www.instagram.com/sophfei/) who shared this project with their audiences on Instagram in 2020 and helped me get more responses!!! Please go check out the great work they do! <333`;\n p.style.color = d3.interpolateRainbow(now / 1000);\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"RaceSummary = md`### Survey submissions \n\nThis chart animates the average amount of clothing of the survey respondents by country submitted between July 30, 2020 and September 2, 2020. ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"mutable name = \"\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"height = Math.min(width, 720)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"tilt = 20","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"sphere = ({type: \"Sphere\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"countries = topojson.feature(world, world.objects.countries).features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"world = FileAttachment(\"2024surveyresults-4.txt\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 31:"$30:body"