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

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more