The avatar for @ryanliwag
Ryan Joshua Liwag
Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
Unlisted
Edited
Aug 2, 2024
4
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Untitled spreadsheet - google_sheets-candidates (2).csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
import {slider} from "@jashkenas/inputs"
Insert cell
import {Button} from "@observablehq/inputs"
Insert cell
import {Scrubber} from "@mbostock/scrubber"
Insert cell
Insert cell
Insert cell
dataviz.morph([curr_year, grouping])
Insert cell
Insert cell
Insert cell
Insert cell
width = 1100
Insert cell
mutable initialHeight = 550 // inital height *remove mutable state
Insert cell
main_vis_margins = ({"top":190, "bottom":10, "left":80, "right":100})
Insert cell
height_All = 550
Insert cell
height_region = 900
Insert cell
height_income = 700
Insert cell
Insert cell
Insert cell
y_center = d3.scaleBand().domain(['All']).range([main_vis_margins['bottom'], height_All-main_vis_margins['top']]).padding(1)
Insert cell
y_IncomeGroup = d3.scaleBand().domain([...new Set(quotadata.map(d => d.IncomeGroup))]).range([main_vis_margins['bottom'],height_income-main_vis_margins['top']]).padding(1)
Insert cell
y_region = d3.scaleBand().domain([...new Set(quotadata.map(d => d.Region))]).range([main_vis_margins['bottom'],height_region-main_vis_margins['top']]).padding(1)
Insert cell
x = d3.scaleLinear().domain([0, 70]).range([main_vis_margins['left'], width - main_vis_margins['right']])
Insert cell
Insert cell
electedCandidates = d3.group(untitledSpreadsheetGoogle_sheetsCandidates2, d=> d.candidatename)
Insert cell
h1 = 1350
Insert cell
w1 = 1000
Insert cell
center_gap = 30
Insert cell
margin = ({"top":30, "bottom":20, "left":150, "right":10})
Insert cell
xAxis1 = g => g
.attr("transform", `translate(${0},${(h1*h_ratio) - center_gap/2})`)
.call(d3.axisBottom(x1))
.call(g => g.select(".domain").remove())
.attr('class', "text_vis2_medium")
.attr("text-anchor", "middle")
.attr("font-weight", "bold")

Insert cell
candidate_parties = ['PAP','PSP', 'WP' ,"SDP", 'NSP', "PV", "SDA", "SPP", 'RP', 'RDU', "PPP", "Independent"]
Insert cell
x1 = d3.scaleBand()
.domain(candidate_parties)
.range([margin.left, w1 - margin.right]).padding(1)
Insert cell
Insert cell
candidates_grouped = {
return d3.group(candidates2020, d=>d.gender, d=>d.party)
}
Insert cell
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more