Implement Members of the House of Representatives visualization

[rapee]

Homepage: Visualization showing all 500 MPs as dots. Users can filter dots by their gender, age range, education, occupation group. When filter changes, it rearranges so that selected dots ordered from the left, with highlight.

Inspired from Films that Fail the Bechdel Test and the Creators' Gender.

Design Reference

Landing Page

[puripant]

I am working on this. Do we expect to have all data fields: gender, age group, education, and occupation? (What's the first dropdown list for anyway?)

If there's a real (though incomplete) or even mockup dataset, it will be very helpful.

[puripant]

I have written a waffle chart with a mockup dataset (whose generator is included in the pull request). I also took the liberty to design a mobile equivalent shown below. If it needs to be changed, let me know.

What I haven't done seem to be shared across other parts of the website, such as tooltip and dropdown lists. Any particular tooltip (as another issue?) or dropdown list suggestions?

Subtasks for this issue:

• [x] Waffle chart according to the design
• [x] Responsiveness (mobile layout)
• [ ] Tooltip
• [ ] Dropdown lists
• [ ] Animation (optional)

[sychonato]

@puripant

Dropdown List

▸ ประเภท

• ทั้งหมด
• สภาผู้แทนราษฎร
• วุฒิสภา
• คณะรัฐมนตรี

▸ เพศ

• ทั้งหมด
• ชาย
• หญิง

▸ อายุ

• ทั้งหมด
• Millennial (23-38 ปี)
• GEN X (44-54 ปี)
• Baby Boomer (55-73 ปี)
• Silent (74 ปีขึ้นไป)

▸ การศึกษา

• ต่ำกว่าปริญญาตรี
• ปริญญาตรี
• ปริญญาโท
• ปริญญาเอก
• สถาบันการศึกษาทางทหาร

▸ กลุ่มอาชีพเดิม

• ทั้งหมด
• รับราชการ
• ความมั่นคง
• กฎหมาย
• ยุติธรรม
• การศึกษา
• สาธารณสุข
• กสิกรรม
• พนักงานเอกชน
• เจ้าของกิจการ
• สื่อมวลชน
• อื่นๆ

Update : 30.10.2019

[puripant]

Is this one still open? I have just come across this issue again, preparing for Hacktoberfest 2020 🤓