29:null 2a:["$","title",null,{"children":"European Parliament Gender Balance | KDO | Observable"}] 2f:Tbbf,canvas = { const w = width const h = height const scene = new THREE.Scene() scene.background = new THREE.Color(0xF9F8ED); const material = new THREE.MeshBasicMaterial( { color: 'red' } ); material.side = THREE.DoubleSide const seats = new THREE.Group(); drawSeats(seats) scene.add(seats); const flowers = new THREE.Group(); drawFlowers(flowers) scene.add(flowers); /*const years = new THREE.Group(); drawYears(years, 0) scene.add(years)*/ const fov = 35 const aspect = w / h const near = .1 const far = 300 const camera = new THREE.PerspectiveCamera(fov, aspect, near, far) camera.position.set(0,0,52) scene.add(camera) const renderer = new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(w, h) renderer.setPixelRatio(Math.min(2, window.devicePixelRatio)) const controls = new THREE.OrbitControls(camera, renderer.domElement) const directionalLight = new THREE.DirectionalLight( 0xffffff, .5 ); directionalLight.position.set(-2,2,2); directionalLight.castShadow = true; scene.add( directionalLight ); const ambientLight = new THREE.AmbientLight(0x808080, .5); scene.add(ambientLight); const light = new THREE.HemisphereLight( 0xcefeff, 0xb3eaf0, .5 ); scene.add( light ); const effect = new THREE.OutlineEffect( renderer, { defaultThickness: 0.001, defaultColor: [ 0, 0, 0 ], defaultAlpha: 0.8, defaultKeepAlive: true // keeps outline material in cache even if material is removed from scene }); scene.position.set(0, -10, 0) const centerColor = d3.interpolateLab("orange", "grey") let stepDuration = 2 flowers.children.forEach(flower => {flower.scale.set(0, 0, 0)}) seats.children.forEach(seats => {seats.scale.set(0, 0, 0)}) const legend = createLegend(); const view = html`

${renderer.domElement}

${legend}

`; animate(seats, flowers, stepDuration, legend) setInterval(() => animate(seats, flowers, stepDuration, legend), 1000 * stepDuration * 2 * (euParliamentData.length + 2)) const clock = new THREE.Clock(); while (true) { /*flowers.children.forEach((flower, i) => { const scaling = 0.8 * Math.abs(Math.sin(time + i/flowers.children.length)); const opositScaling = 1 - Math.abs(Math.sin(time + i/flowers.children.length)); flower.scale.set(scaling, scaling, scaling) flower.rotation.z = Math.sin(time * i/flowers.children.length) seats.children[i].scale.set(opositScaling, opositScaling, opositScaling) console.log(seats.children[i], seats.children[i].children[0]) seats.children[i].material.color = new THREE.Color(centerColor(opositScaling)) })*/ controls.update() effect.render(scene, camera); //renderer.render(scene, camera) yield view } }30:T4ce,drawFlowers = (holder) => { /*const flower = new THREE.Group(); drawPetals(flower) drawCenter(flower) flower.position.set(0, 0, 0) holder.add(flower) */ const palette = nicePalettes[8]//[Math.round(Math.random()* nicePalettes.length -1)] const color = () => palette[Math.round(Math.random()* palette.length -1)] parlementSeats.slice(0, 308).map(([x,y,r]) => { const petalMaterial = new THREE.MeshToonMaterial( { color: new THREE.Color( color() ), side: THREE.DoubleSide, }); const flower = new THREE.Group(); const petals = drawPetals(flower, petalMaterial) const center = drawCenter(flower, 'small') const scaling = Math.max(0, canvasSketchUtil.random.gaussian(0, 0.5)) + radius flower.scale.set(scaling, scaling, scaling) flower.scale.set(scaling, scaling, scaling) const flowerWrapper = new THREE.Group(); flowerWrapper.add(flower) flowerWrapper.position.set(x, -y, 0) flowerWrapper.rotation.x = 0.1 * Math.PI * 2 * (Math.random() - 0.5) flowerWrapper.rotation.y = 0.1 * Math.PI * 2 * (Math.random() - 0.5) //flowerWrapper.rotation.z = Math.PI * 2 * Math.random() holder.add(flowerWrapper) }); return holder }31:Tb75,drawPetals = (holder, petalMaterial) => { //const color = d3.scaleSequential(d3["interpolate" + colorScheme]) // .domain([0, petalCount]) const palette = nicePalettes[4]//[Math.round(Math.random()* nicePalettes.length -1)] const color = (i) => palette[3]//[Math.round(Math.random()* palette.length -1)]//palette[i % palette.length] const g = 1.61803398875; const degrees = 180 / Math.PI; const n = Math.max(0, 1 / (ending - starting) * petalCount) * (1/opening); const startingOffset = n * starting d3.range(petalCount).forEach(i => { const index = i + startingOffset const z = 1 - (2 * index + 1) / n; const a = Math.PI * 2 * g * index; const b = Math.sin(Math.acos(1 - (2 * index + 1) / n)); const x = Math.cos(a) * b; const y = Math.sin(a) * b; const radius = opening * 0.8 + (i / petalCount * 0.2) const petalMesh = new THREE.Mesh(petalGeometry, petalMaterial); petalMesh.rotation.x = Math.acos(1 - (2 * index + 1) / n) petalMesh.rotation.y = a petalMesh.rotation.z = a holder.add(petalMesh) }); return holder } /*drawPetals = (holder) => { //const color = d3.scaleSequential(d3["interpolate" + colorScheme]) // .domain([0, petalCount]) const palette = nicePalettes[2]//[Math.round(Math.random()* nicePalettes.length -1)] const color = (i) => palette[2]//[Math.round(Math.random()* palette.length -1)]//palette[i % palette.length] const g = 1.61803398875; const degrees = 180 / Math.PI; const n = Math.max(0, 1 / (ending - starting) * petalCount) * (1/opening); const startingOffset = n * starting d3.range(petalCount).forEach(i => { const material = new THREE.MeshLineMaterial( { metalness: .1, roughness: .5, useMap: stroke !== "none" ? 1 : 0, map: stroke !== "none" ? strokeTexture : null, color: new THREE.Color( new THREE.Color( color(i) ) ), opacity: 1, resolution: new THREE.Vector2( width, width), sizeAttenuation: true, lineWidth: 1, //depthTest: false, blending: THREE.NormalBlending, transparent: true, //repeat: new THREE.Vector2( 1,1 ) }); const index = i + startingOffset const z = 1 - (2 * index + 1) / n; const a = Math.PI * 2 * g * index; const b = Math.sin(Math.acos(1 - (2 * index + 1) / n)); const x = Math.cos(a) * b; const y = Math.sin(a) * b; const radius = opening * 0.8 + (i / petalCount * 0.2) const pass = [ new THREE.Vector3( radius * x, radius * y, radius * z ), new THREE.Vector3( 0, 0, 0 ), ] const curve = new THREE.CatmullRomCurve3(pass); const points = curve.getPoints( 4 ); const line = new THREE.MeshLine(); line.setPoints(points, p => radius * tickness * (temper === 'exp' ? expImpulse(p, impulse) : 1)); const lineMesh = new THREE.Mesh(line, material); holder.add(lineMesh) }); return holder }*/32:T1426,VariableWidthTubeGeometry = { function TubeGeometry( path, tubularSegments, radius, radialSegments, closed, taper ) { THREE.Geometry.call( this ); this.type = 'TubeGeometry'; this.parameters = { path: path, tubularSegments: tubularSegments, radius: radius, radialSegments: radialSegments, closed: closed }; if ( taper !== undefined ) console.warn( 'THREE.TubeGeometry: taper has been removed.' ); var bufferGeometry = new TubeBufferGeometry( path, tubularSegments, radius, radialSegments, closed ); // expose internals this.tangents = bufferGeometry.tangents; this.normals = bufferGeometry.normals; this.binormals = bufferGeometry.binormals; // create geometry this.fromBufferGeometry( bufferGeometry ); this.mergeVertices(); } TubeGeometry.prototype = Object.create( THREE.BufferGeometry.prototype ); TubeGeometry.prototype.constructor = TubeGeometry; // TubeBufferGeometry function TubeBufferGeometry( path, tubularSegments, radius, radialSegments, closed ) { THREE.BufferGeometry.call( this ); this.type = 'TubeBufferGeometry'; this.parameters = { path: path, tubularSegments: tubularSegments, radius: radius, radialSegments: radialSegments, closed: closed }; tubularSegments = tubularSegments || 64; radius = radius || 1; radialSegments = radialSegments || 8; closed = closed || false; var frames = path.computeFrenetFrames( tubularSegments, closed ); // expose internals this.tangents = frames.tangents; this.normals = frames.normals; this.binormals = frames.binormals; // helper variables var vertex = new THREE.Vector3(); var normal = new THREE.Vector3(); var uv = new THREE.Vector2(); var P = new THREE.Vector3(); var i, j; // buffer var vertices = []; var normals = []; var uvs = []; var indices = []; // create buffer data generateBufferData(); // build geometry this.setIndex( indices ); this.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) ); this.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) ); this.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) ); // functions function generateBufferData() { for ( i = 0; i < tubularSegments; i ++ ) { generateSegment( i ); } // if the geometry is not closed, generate the last row of vertices and normals // at the regular position on the given path // // if the geometry is closed, duplicate the first row of vertices and normals (uvs will differ) generateSegment( ( closed === false ) ? tubularSegments : 0 ); // uvs are generated in a separate function. // this makes it easy compute correct values for closed geometries generateUVs(); // finally create faces generateIndices(); } function generateSegment( i ) { // we use getPointAt to sample evenly distributed points from the given path P = path.getPointAt( i / tubularSegments, P ); // retrieve corresponding normal and binormal var N = frames.normals[ i ]; var B = frames.binormals[ i ]; // generate normals and vertices for the current segment for ( j = 0; j <= radialSegments; j ++ ) { var v = j / radialSegments * Math.PI * 2; var sin = Math.sin( v ); var cos = - Math.cos( v ); // normal normal.x = ( cos * N.x + sin * B.x ); normal.y = ( cos * N.y + sin * B.y ); normal.z = ( cos * N.z + sin * B.z ); normal.normalize(); normals.push( normal.x, normal.y, normal.z ); // vertex const r = ( typeof radius === 'function') ? radius(i/tubularSegments) : radius; vertex.x = P.x + r * normal.x; vertex.y = P.y + r * normal.y; vertex.z = P.z + r * normal.z; vertices.push( vertex.x, vertex.y, vertex.z ); } } function generateIndices() { for ( j = 1; j <= tubularSegments; j ++ ) { for ( i = 1; i <= radialSegments; i ++ ) { var a = ( radialSegments + 1 ) * ( j - 1 ) + ( i - 1 ); var b = ( radialSegments + 1 ) * j + ( i - 1 ); var c = ( radialSegments + 1 ) * j + i; var d = ( radialSegments + 1 ) * ( j - 1 ) + i; // faces indices.push( a, b, d ); indices.push( b, c, d ); } } } function generateUVs() { for ( i = 0; i <= tubularSegments; i ++ ) { for ( j = 0; j <= radialSegments; j ++ ) { uv.x = i / tubularSegments; uv.y = j / radialSegments; uvs.push( uv.x, uv.y ); } } } } TubeBufferGeometry.prototype = Object.create( THREE.BufferGeometry.prototype ); TubeBufferGeometry.prototype.constructor = TubeBufferGeometry; return TubeBufferGeometry; }33:Td89,function createLegend() { const svg = d3.create("svg") .attr("width", width) .attr("height", height); const legend = svg.append("g") svg.append("text") .attr('class', 'title') .attr('x', width * 0.04) .attr('y', height * 0.1) .attr('font-size', 40) .attr('font-weight', 'bold') .attr('text-anchor', 'start') .attr('fill', '#2a2a2a') .text("Blooming Gender Diversity") svg.append("text") .attr('class', 'sub-title') .attr('x', width * 0.04) .attr('y', height * 0.15) .attr('font-size', 20) .attr('text-anchor', 'start') .attr('fill', '#2a2a2a') .text('Evolution of the European Parliament gender balance.') const years = legend.append('g') .append("text") .attr('x', width * 0.5) .attr('y', height * 0.93) .attr('font-size', 50) .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('fill', '#2a2a2a') const percentage = legend.append('g') .append("text") .attr('x', width * 0.5) .attr('y', height * 0.8) .attr('font-size', 80) .attr('font-weight', 'bold') .attr('text-anchor', 'middle') .attr('fill', '#2a2a2a') const label = legend.append('g') .append("text") .attr('x', width * 0.5) .attr('y', height * 0.85) .attr('font-size', 20) .attr('text-anchor', 'middle') .attr('fill', '#2a2a2a') .text('of female MEPs ') const postBrexit = legend.append('g') .append("text") .attr('x', width * 0.655) .attr('y', height * 0.947) .attr('font-size', 20) .attr('text-anchor', 'start') .attr('fill', '#2a2a2a') .text('Post Brexit') .style('opacity', 0) const twitter = svg.append('a') .attr('href', 'https://twitter.com/karim_douieb') .attr('target', '_blank') .style('pointer-events', 'initial') twitter.append("image") .attr("xlink:href", twitterLogo) .attr("x", width*0.03) .attr("y", height * 0.95) .attr("width", 20) twitter.append("text") .attr('x', width*0.06) .attr('y', height * 0.97) .attr('font-size', 14) .attr('text-anchor', 'start') .attr('fill', '#2a2a2a') .text('@karim_douieb') const x = d3.scaleLinear() .range([0, width * 0.25]) .domain(d3.extent(euParliamentData, d => d.start)) legend.append("line") .attr('x1', width * 0.75 / 2) .attr('y1', height * 0.96) .attr('x2', (width * 0.25) + (width * 0.75 / 2)) .attr('y2', height * 0.96) .attr('stroke', 'grey') const ticks = legend.append('g') .selectAll('tick') .data(euParliamentData) .join('circle') .attr('cx', d => (width * 0.75 / 2 )+ x(d.start)) .attr('cy', height * 0.96) .attr('r', width * 0.004) .attr('fill', 'grey') const currentYear = legend.append('circle') .attr('cx', (width * 0.75 / 2 )) .attr('cy', height * 0.96) .attr('r', width * 0.006) .attr('fill', 'pink') .attr('stroke', 'grey') return Object.assign(svg.node(), {update}); function update(index, stepDuration) { legend.transition().style('opacity', index < euParliamentData.length ? 1 : 0) years.text(`${euParliamentData[index].start} – ${euParliamentData[index].end}`); percentage.text(`${Math.round(euParliamentData[index].womenProportion)}%`); postBrexit.style('opacity', index === euParliamentData.length -1 ? 1 : 0) currentYear.transition().attr('cx', (width * 0.75 / 2 ) + x(euParliamentData[index].start)) } }34:T68f,animate = (seats, flowers, stepDuration, legend) => { d3.range(euParliamentData.length).forEach(step => { seats.children.forEach((seat, i) => { if(i < euParliamentData[step].totalSeats && i >= euParliamentData[step].women){ gsap.gsap.to(seat.scale, { duration: stepDuration, delay: random.gaussian(0.5, 0.5) + (step * stepDuration * 2), x: 1, y: 1, z: 1}) } else { gsap.gsap.to(seat.scale, { duration: stepDuration, delay: step * stepDuration * 2, x: 0, y: 0, z: 0}) } }) flowers.children.forEach((flower, i) => { if(i < euParliamentData[step].women){ gsap.gsap.to(flower.scale, { duration: stepDuration, delay: step * stepDuration * 2, x: 1, y: 1, z: 1}) if(step === 0 || i >= euParliamentData[step-1].women) { gsap.gsap.to(flower.rotation, { duration: stepDuration, delay: random.gaussian(0, 0.5) + (step * stepDuration * 2), z: Math.PI * random.gaussian(0, 0.5)}) } } else { gsap.gsap.to(flower.scale, { duration: stepDuration, delay: step * stepDuration * 2, x: 0, y: 0, z: 0}) } }) }) seats.children.forEach((seat, i) => { gsap.gsap.to(seat.scale, { duration: stepDuration, delay: (euParliamentData.length) * stepDuration * 2, x: 0, y: 0, z: 0}) }) flowers.children.forEach((flower, i) => { gsap.gsap.to(flower.scale, { duration: stepDuration, delay: (euParliamentData.length) * stepDuration * 2, x: 0, y: 0, z: 0}) }) d3.range(euParliamentData.length + 1).forEach(i => setTimeout(() => { legend.update(i, stepDuration) }, stepDuration * 2 * i * 1000) ) }35:Tae1,// this is based on the code at https://github.com/Teester/parliament-diagram-generator/blob/master/script.js which was based on https://github.com/juliuste/parliament-svg parlementSeats = { const radius = 20; const totalSeats = d3.max(euParliamentData, d => d.totalSeats); const numberOfRings = findN(totalSeats, radius); const a0 = findA(totalSeats, numberOfRings, radius); // calculate seat distance let points = []; // calculate ring radii var rings = [] for(var i = 1; i <= numberOfRings; i++){ rings[i] = radius - (i-1) * a0 } // calculate seats per ring rings = distribute(rings, totalSeats) var resultsList = []; var r, a, point // build seats // loop rings var ring for(var j = 1; j <= numberOfRings; j++){ ring = [] // calculate ring-specific radius r = radius - (j-1)*a0 // calculate ring-specific distance a = (Math.PI*r) / ((rings[j]-1) || 1) // loop points for(let k=0; k<=rings[j]-1; k++){ point = getCoordinates(r, k*a) point[2] = 0.4*a0 ring.push(point) } points.push(ring) } return _(points) .flatMap() .orderBy(d => -Math.atan2(d[1], d[0])) .value(); function findN(m, r) { var n = Math.floor(Math.log(m)/Math.log(2)) || 1; var distance = getScore(m, n, r); var direction = 0; if(getScore(m, n+1, r)1) direction = -1; while(getScore(m, n+direction, r)0){ distance = getScore(m, n+direction, r); n+=direction; } return n; } function findA(m, n, r) { var x = (Math.PI*n*r)/(m-n) var y = 1+(Math.PI*(n-1)*n/2)/(m-n) var a = x/y return a } function getScore(m, n, r) { return Math.abs(findA(m, n, r)*n/r-(5/7)) } function distribute(votes, seats) { // initial settings for divisor finding var voteSum = 0; for(var party in votes){ voteSum += votes[party] } var low = voteSum / (seats - 2) var high = voteSum / (seats + 2) var divisor = voteSum / seats var parliament = calculateSeats(votes, divisor) // find divisor while(parliament.seats != seats){ if(parliament.seats < seats) low = divisor if(parliament.seats > seats) high = divisor divisor = (low + high) / 2 parliament = calculateSeats(votes, divisor) } return parliament.distribution } function calculateSeats(votes, divisor) { var distribution = {} var seats = 0 for(var party in votes){ distribution[party] = Math.round(votes[party] / divisor) seats += distribution[party] } return {distribution, seats} } function getCoordinates(r, b) { var x = r * Math.cos(b/r - Math.PI); var y = r * Math.sin(b/r - Math.PI); return [x, y]; } }36:[{"id":"1d1a3f40e2349ce26cad6e5bd4aa90537beb0d3d36157482037e4d20a1c5e3b16145d329e9154f1ae5d2e3fa9478c8aeb1ee0f71527bac333dfe3802406c51f0","href":"https://static.observableusercontent.com/files/1d1a3f40e2349ce26cad6e5bd4aa90537beb0d3d36157482037e4d20a1c5e3b16145d329e9154f1ae5d2e3fa9478c8aeb1ee0f71527bac333dfe3802406c51f0","name":"stroke.png","type":"image/png","lastModified":1616501261771.489,"size":79460},{"id":"587e25f4b5ee33ae714739800225647d90e39e600fa5856e432037d52912e1b1a3c32230e37d630039013a50f2bbf5dd916571f0f9b1103c81de975f8224013a","href":"https://static.observableusercontent.com/files/587e25f4b5ee33ae714739800225647d90e39e600fa5856e432037d52912e1b1a3c32230e37d630039013a50f2bbf5dd916571f0f9b1103c81de975f8224013a","name":"strokeOutline.png","type":"image/png","lastModified":1616509226710.522,"size":3867},{"id":"18b833909259f1525fe644115f15ac007b6fa0466e5eecb1c8c0c19d9671a35f040ef1af764fcda70761d0981c4dab684e880ed6f611dd047150aeccdf4a7181","href":"https://static.observableusercontent.com/files/18b833909259f1525fe644115f15ac007b6fa0466e5eecb1c8c0c19d9671a35f040ef1af764fcda70761d0981c4dab684e880ed6f611dd047150aeccdf4a7181","name":"strokeBrushOutline.png","type":"image/png","lastModified":1616510744936.387,"size":110036},{"id":"76ec1c06b45afd1a1e05d3d982b940a88e697b7b209751b03b078969e0aba2c96dd4593a21b25a3020332577b5d5ace3be6bf197a2644efe9cb7721676cbb43b","href":"https://static.observableusercontent.com/files/76ec1c06b45afd1a1e05d3d982b940a88e697b7b209751b03b078969e0aba2c96dd4593a21b25a3020332577b5d5ace3be6bf197a2644efe9cb7721676cbb43b","name":"helvetiker_bold.typeface.json","type":"application/json","lastModified":1616789526510.919,"size":61632},{"id":"ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","href":"https://static.observableusercontent.com/files/ca7faa6ed58ddec89cfb70c25bb355ef7099071b8984682aa49f1b77d65cc2519b4cb806566a2d1e55afde57ab9bed1b3ce80c696ac56993667bcdf6c48d9b86","name":"Twitter_Bird.svg (2) (3).png","type":"image/png","lastModified":1616851405692.081,"size":42796}] 2d:{"id":"299c52ccaafea0b9","slug":"european-parliament-gender-balance","title":"European Parliament Gender Balance","thumbnail":"2480340a4b46ba6296f3e8ab348197216dd9e1000dffed30759d8a9b6cdaec86","access_level":"public","create_time":"$D2021-03-23T11:47:16.388Z","update_time":"$D2021-05-11T11:13:37.226Z","view_time":null,"first_public_time":"$D2021-03-27T17:08:18.914Z","has_unpublished_edits":null,"fork":true,"stars":45,"starred":false,"owner":{"type":"team","id":"d7884d59069d1d32","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":"starter_2024"},"version":1331,"publish_version":1331,"role":null,"authored":false,"authors":[{"type":"individual","id":"9002a3c6466edd6e","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":null}],"members":[{"type":"individual","id":"9002a3c6466edd6e","login":"karimdouieb","name":"KDO","avatar_url":"https://avatars-next.observableusercontent.com/dbe7b109627d1141cc6fd36f9a1db388ebed9bfd565c7b606155838d99ff336c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":{"id":"5b7fa971e8fe6004","slug":"womens-history","title":"Women's History","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"European Parliament Gender Balance","cells":[{"id":0,"value":"md`# European Parliament Gender Balance\n\nMy submission for the [Observable's Women History Month Contest](https://next.observablehq.com/@observablehq/womens-history-month-dataviz-contest)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`### Petal parameters`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"viewof opening = Range([0, 1], {step: 0.01, value: 1, label: \"Opening\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"viewof starting = Range([0, 1], {step: 0.01, value: 0.18, label: \"Starting\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"viewof ending = Range([0, 1], {step: 0.01, value: 0.7, label: \"Ending\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"viewof petalCount = Range([0, 100], {step: 1, value: 20, label: \"Petal Count\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"viewof tickness = Range([0, 1], {step: 0.01, value: 0.2, label: \"Tickness\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"viewof radius = Range([0, 1], {step: 0.01, value: 0.68, label: \"Radius\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"viewof temper = Radio([\"none\", \"exp\"], {value: 'exp', label: \"Temper\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"viewof impulse = Range([0, 10], {step: 0.11, value: 3.4, label: \"Impulse\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"viewof toneCount = Range([0, 8], {step: 1, value: 3, label: \"Tone Count\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"drawCenter = (holder, size) => {\n const material = new THREE.MeshToonMaterial( {\n color: new THREE.Color( 'orange' ),\n side: THREE.DoubleSide, \n //gradientMap: texture,\n });\n \n const sphere = new THREE.SphereGeometry(size === 'small' ? 0.25 : 0.3, 30, 30)\n const mesh = new THREE.Mesh(sphere, material);\n holder.add(mesh) \n\n return holder\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":336,"value":"drawTips = (holder) => {\n const material = new THREE.MeshStandardMaterial( {\n color: new THREE.Color( 'red' ),\n side: THREE.DoubleSide, \n });\n \n const sphere = new THREE.SphereGeometry(0.05, 1, 1)\n\n const g = 1.61803398875;\n const degrees = 180 / Math.PI;\n const n = Math.max(0, 1 / (ending - starting) * petalCount) * 1/opening;\n const startingOffset = n * starting\n d3.range(petalCount).map(i => {\n const index = i + startingOffset\n const z = 1 - (2 * index + 1) / n;\n const a = Math.PI * 2 * g * index;\n const b = Math.sin(Math.acos(1 - (2 * index + 1) / n));\n const x = Math.cos(a) * b;\n const y = Math.sin(a) * b;\n \n const mesh = new THREE.Mesh(sphere, material);\n mesh.position.set(x, y, z)\n holder.add(mesh) \n });\n\n return holder\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"drawSeats = (holder) => {\n const sphere = new THREE.SphereGeometry(0.3, 30, 30)\n\n parlementSeats.map(([x,y,r]) => { \n const material = new THREE.MeshToonMaterial( {\n color: new THREE.Color( 'grey' ),\n side: THREE.DoubleSide, \n //gradientMap: texture,\n });\n \n const mesh = new THREE.Mesh(sphere, material);\n mesh.position.set(x, -y, 0)\n holder.add(mesh) \n });\n\n return holder\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"petalGeometry = {\n const points = [\n new THREE.Vector3( 0, 0, radius ),\n new THREE.Vector3( 0, 0, 0 ),\n ]\n var path = new THREE.CatmullRomCurve3(points)\n \n return new VariableWidthTubeGeometry( path, 34, p => tickness * (temper === 'exp' ? expImpulse(p, impulse) : 1), 34, true );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":953,"value":"drawYears = (holder, index) => {\n const textGeometry = new THREE.TextGeometry (\n `${euParliamentData[index].start} – ${euParliamentData[index].end}`,\n {\n font,\n size: 2,\n height: 0.01,\n curveSegment: 5,\n weight: 'bold',\n /*bevelEnabled: true,\n bevelThickness: 0.03,\n bevelSize: 0.02,\n bevelOffset: 0,\n bevelSegments: 4*/\n }\n ) \n textGeometry.center()\n\n const material = new THREE.MeshToonMaterial({\n color: new THREE.Color( 'black' ),\n side: THREE.DoubleSide,\n });\n const text = new THREE.Mesh(textGeometry, material)\n text.position.set(0, -3, 0)\n holder.add(text)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"expImpulse = ( x, k ) => \n{\n const h = k*x;\n return h**(1-h);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"function generateToneMap(count) {\n var canvas = document.createElement('canvas');\n\n canvas.width = count;\n canvas.height = 1;\n var context = canvas.getContext( '2d' );\n var imageData = context.getImageData(0, 0, count, 1);\n \n for (let i = 0; i < count; i++) {\n const value = Math.round(i / (count - 1) * 255);\n imageData.data[i * 4 + 0] = value;\n imageData.data[i * 4 + 1] = value;\n imageData.data[i * 4 + 2] = value;\n imageData.data[i * 4 + 3] = 255; \n }\n\n context.putImageData(imageData, 0, 0 );\n const src = canvas.toDataURL(\"image/png\");\n const image = new Image();\n image.src = src;\n return image;\n}\n/* Show gradiant\nviewof threeToneCanvas = {\n const image = generateToneMap(3);\n image.style.width = '100%';\n return image;\n}\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"texture = {\n \tconst texture = new THREE.CanvasTexture(generateToneMap(toneCount));\n // IMPORTANT for toon material to work properly.\n\ttexture.minFilter = THREE.NearestFilter;\n texture.magFilter = THREE.NearestFilter;\n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":944,"value":"font = {\n function resolveWithPromise() {\n return new Promise((resolve, reject) => {\n new THREE.FontLoader().load(typefaceUrl, (font) => {\n resolve(font)\n })\n });\n }\n \n return resolveWithPromise() \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1111,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1118,"value":"height = width * 0.75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"twitterLogo = await FileAttachment(\"Twitter_Bird.svg (2) (3).png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"md`## Data\n\nhttps://www.europarl.europa.eu/RegData/etudes/ATAG/2020/646202/EPRS_ATA(2020)646202_EN.pdf\nhttps://www.europarl.europa.eu/news/en/press-room/elections-press-kit/5/european-elections-results\nhttps://www.europarl.europa.eu/about-parliament/en/in-the-past/previous-elections\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"euParliamentData = [\n {start: 1979, end: 1984, totalSeats: 410, womenProportion: 16.6},\n {start: 1984, end: 1989, totalSeats: 434, womenProportion: 17.7},\n {start: 1989, end: 1994, totalSeats: 518, womenProportion: 19.3},\n {start: 1994, end: 1999, totalSeats: 567, womenProportion: 25.9},\n {start: 1999, end: 2004, totalSeats: 626, womenProportion: 30.3},\n {start: 2004, end: 2009, totalSeats: 732, womenProportion: 30.2},\n {start: 2009, end: 2014, totalSeats: 736, womenProportion: 31.1},\n {start: 2014, end: 2019, totalSeats: 751, womenProportion: 37.4},\n {start: 2019, end: 2024, totalSeats: 751, womenProportion: 40.6},\n {start: 2019, end: 2024, totalSeats: 705, womenProportion: 39.6},\n].map(d => ({ ...d, women: Math.round(d.totalSeats * d.womenProportion / 100)}))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"nicePalettes = [\n [\"#69d2e7\", \"#a7dbd8\", \"#e0e4cc\", \"#f38630\", \"#fa6900\"],\n [\"#99b898\", \"#fecea8\", \"#ff847c\", \"#e84a5f\", \"#2a363b\"],\n [\"#ffe181\", \"#eee9e5\", \"#fad3b2\", \"#ffba7f\", \"#ff9c97\"],\n [\"#f8b195\", \"#f67280\", \"#c06c84\", \"#6c5b7b\", \"#355c7d\"],\n [\"#5e9fa3\", \"#dcd1b4\", \"#fab87f\", \"#f87e7b\", \"#b05574\"],\n [\"#b9d3b0\", \"#81bda4\", \"#b28774\", \"#f88f79\", \"#f6aa93\"],\n [\"#3a111c\", \"#574951\", \"#83988e\", \"#bcdea5\", \"#e6f9bc\"],\n [\"#fc354c\", \"#29221f\", \"#13747d\", \"#0abfbc\", \"#fcf7c5\"],\n [\"#fe4365\", \"#fc9d9a\", \"#f9cdad\", \"#c8c8a9\", \"#83af9b\"],\n [\"#aab3ab\", \"#c4cbb7\", \"#ebefc9\", \"#eee0b7\", \"#e8caaf\"],\n [\"#e8ddcb\", \"#cdb380\", \"#036564\", \"#033649\", \"#031634\"],\n [\"#a7c5bd\", \"#e5ddcb\", \"#eb7b59\", \"#cf4647\", \"#524656\"],\n [\"#3fb8af\", \"#7fc7af\", \"#dad8a7\", \"#ff9e9d\", \"#ff3d7f\"],\n [\"#a1dbb2\", \"#fee5ad\", \"#faca66\", \"#f7a541\", \"#f45d4c\"],\n [\"#99b898\", \"#fecea8\", \"#ff847c\", \"#e84a5f\", \"#2a363b\"]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"strokeUrls = ({\n outline: await FileAttachment(\"strokeOutline.png\").url(),\n brushOutline: await FileAttachment(\"strokeBrushOutline.png\").url(),\n brush: await FileAttachment(\"stroke.png\").url()\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":939,"value":"typefaceUrl = FileAttachment(\"helvetiker_bold.typeface.json\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.126.1/build/three.min.js\");\n await require(\"three@0.126.1/examples/js/controls/OrbitControls.js\").catch(() => {});\n await require('three@0.126.1/examples/js/effects/OutlineEffect.js').catch(() => {});\n await require(\"three.meshline@1.3.0\").catch(() => {});\n THREE.MeshLine = window.MeshLine;\n THREE.MeshLineMaterial = window.MeshLineMaterial;\n THREE.MeshLineRaycast = window.MeshLineRaycast;\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"import { Select, Toggle, Range, Radio, Button, Checkbox } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"canvasSketchUtil = require('https://bundle.run/canvas-sketch-util@1.10.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"random = canvasSketchUtil.random","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"gsap = require('gsap@3.6.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 2e:"$2d:body"