Public
Edited
Oct 4, 2023
Simple_viz_Gender
G2 = require("@antv/g2@4.0.2");
G2Plot = require("@antv/g2plot")
bar_width=width
bar_height=300
// bar_char={
// const wrapper = html`<div style="text-align: center; width:${bar_width}px"></div>`;
// const container = html`<div style="height: ${bar_height}px;width:${bar_width}px;text-align: center"></div>`
// wrapper.appendChild(container);
// yield wrapper;
// const stackedBarPlot = new G2Plot.Bar(container, {
// data,
// isGroup: true,
// xField: 'percent',
// yField: 'tag',
// seriesField: 'age',
// marginRatio: 0,
// label: {
// // 可手动配置 label 数据标签位置
// position: 'right', // 'left', 'middle', 'right'
// offset: 4,
// formatter: (datum) => {
// return(d3.format('.1f')(datum.percent*100) + '%' );
// }},
// tooltip: {
// formatter: (datum) => {
// return { name: datum.age, value:d3.format('.1f')(datum.percent*100) + '%' };
// },
// }
// ,
// barStyle: { radius: [2, 2, 0, 0] },
// });
// // stackedBarPlot.update({ "theme": { "styleSheet": { "brandColor": "#FF6B3B", "paletteQualitative10": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA"], "paletteQualitative20": ["#FF6B3B", "#626681", "#FFC100", "#9FB40F", "#76523B", "#DAD5B5", "#0E8E89", "#E19348", "#F383A2", "#247FEA", "#2BCB95", "#B1ABF4", "#1D42C2", "#1D9ED1", "#D64BC0", "#255634", "#8C8C47", "#8CDAE5", "#8E283B", "#791DC9"] } } });
// stackedBarPlot.render();
// }
secret_ballot=FileAttachment("result2@5.csv").csv({typed:true})
data=secret_ballot.slice(0,12)
data_2=FileAttachment("viz2@3.csv").csv({typed:true})
data_3=FileAttachment("Untitled spreadsheet - Sheet1.csv").csv({typed:true})
function sparkbar(max) {
return x => htl.html`<div style="
background: steelblue;
width: ${90 * x / max}%;
float: left;
padding-right: 3px;
box-sizing: border-box;
color: ${x>0?"white":"black"}">${x.toLocaleString("en")}`
}
function sparkbar2(max) {
return x => htl.html`<div style="
background: steelblue;
width: ${100 * x / max}%;
float: left;
padding-right: 3px;
box-sizing: border-box;
color: ${x>0?"white":"black"}">${x.toLocaleString("en")}`
}
color_scale=d3.scaleSequential(d3.interpolateSpectral)
color_scale(5)
function colorcell() {
// const low=range[0]<5?(range[0]-5):0
// const high=range[1]+5
color_scale.domain([0,7])
return x => {
if(x=="0-6"){return "0-6"}
const color= ((x>1)&(x<6))?"black":"white"
return htl.html`<div style="
background: ${color_scale(x)};
width:100%; color: ${color};
">${x.toLocaleString("en")}`}
}
function highlight() {
return x => {
const color=( (x=="Uganda")|(x==17))?"red":"black"
const fontweight=( (x=="Uganda")|(x==17))?"700":"400"
return htl.html`<span style="
color: ${color}; font-weight:${fontweight}
">${x}`}
}
d3.extent(data_2, d => d["# companies"])
check=html`
<style>input {max-width:none}; form.oi-9cb896-checkbox {width:100%; max-width: 800px !important}</style>
<div class="viz">${viewof checkboxes}</div>`
viewof table_rank3=Inputs.table(data_3,
{columns: ["Company","Country","Number of Trackers","Sector"],
header :{
"Number of Trackers" :md`Number of Trackers`,
"Country":md`Country`,
"Company":md`Company`,
"Sector":md`Sector`
},
rows:19,
format: {
"Number of Trackers": sparkbar(d3.max(data_3, d => d["Number of Trackers"])),
},
multiple:false
})
privacy=FileAttachment("PDP@2.csv").csv({typed:true})
ranking.map(d=>d.length)
privacy_table_title=md`### Privacy Policy in different countries of select companies`
viewof table_privacy=Inputs.table(ranking,
{
columns: ["company","country","noticable"," length","Rights"],
header :{
" length" :md`Length of <br/> Privacy Policy`,
"noticable": md`Has a noticeable<br/> Privacy Policy`,
"Rights": md`Number of rights mentioned<br/> among selected rights`,
"company": md`Company`,
"country":md`Country`
},
width:{
" length":350,
"Rights":200,
"noticable":150,
"company":120,
"country":120
},
align:{
" length":"left",
"Rights":"left"
},
rows:45,
format: {
" length": sparkbar(d3.max(ranking, d => d[" length"])),
// "Rights": colorcell(),
"Rights": sparkbar2(d3.max(ranking, d => d["Rights"])),
// "women on the board": colorcell(),
// "women in executive level": colorcell(),
// "women in committees":colorcell(),
// "female chairs of board": colorcell(),
// "female CEO":colorcell(),
// "country":highlight(),
// "rank":highlight()
// ,
// culmen_depth_mm: sparkbar(d3.max(penguins, d => d.culmen_depth_mm)),
// flipper_length_mm: sparkbar(d3.max(penguins, d => d.flipper_length_mm)),
// body_mass_g: sparkbar(d3.max(penguins, d => d.body_mass_g)),
// sex: x => x.toLowerCase()
},
multiple:false
})
ranking=FileAttachment("ranking@2.csv").csv({typed:true})
data_percent= [
{ type:"Has Potentially Dangerous Trackers", value: 28 },
{ type: "Other Apps", value: 54 }
];
vizn={
const wrapper2 = html`<div style="text-align: center; width:${bar_width}px"><h3>Percentage of apps with potentially dangerous trackers</h3></div>`;
const container = html`<div style="height: 300px;width:${bar_width*0.6}px;text-align: center"></div>`
// const data_use= viz1_data.slice(0,12)
wrapper2.appendChild(container);
yield wrapper2;
const piePlot = new G2Plot.Pie(container, {
appendPadding: 10,
data: data_percent,
legend: {
offsetX:-60,
maxItemWidth:300
// itemWidth:{"With Potentially Dangerous Trackers":300},
// layout: 'horizontal',
// position: 'top-right'
},
renderer:"svg",
angleField: 'value',
colorField: 'type',
radius: 0.9,
label: {
type: 'inner',
offset: '-30%',
content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
style: {
fontSize: 14,
textAlign: 'center',
},
},
interactions: [{ type: 'element-active' }],
});
piePlot.render();
}
group_data=FileAttachment("viz3@2.csv").csv({typed:true})
data0=viz1_data.slice(0,12)
source_viz3=md`Source : [Gender diversity in Switzerland: A deep dive - Credit Suisse](https://www.credit-suisse.com/media/assets/corporate/docs/about-us/research/publications/csri-gender-diversity-in-switzerland-a-deep-dive.pdf)`
source_viz4= md`Source : [Gender diversity in Switzerland: A deep dive - Credit Suisse](https://www.credit-suisse.com/media/assets/corporate/docs/about-us/research/publications/csri-gender-diversity-in-switzerland-a-deep-dive.pdf)`
FileAttachment("board.csv").csv({typed:true})
data_4=FileAttachment("viz4@4.csv").csv({typed:true})
countries={
const all_country=Array.from(new Set(data_4.map(d=>d.country)))
const filtered = all_country.filter(function(value, index, arr){
return value !="Switzerland";
});
filtered.push("")
return filtered
}
data_4_use=data_4.filter(d=>country_use.includes(d.country))
country_use=["Norway","France","Germany","Global average","Thailand","Switzerland"]
style=html`<style>
p { max-width: none; }
</style>`
tracker_info=FileAttachment("tracker@8.csv").csv({typed:true})
tracker_info_filter=tracker_info
function sparkbar3(max) {
return x => htl.html`<div style="
background: steelblue;
width: ${100 * x / max}%;
float: left;
padding-right: 3px;
box-sizing: border-box;
color: ${x>0?"white":"black"}">${x.toLocaleString("en")}`
}
dangerous_app_title=html`<h3> Potentially Dangerous Applications</h3>
<p>Potentially dangerous apps are apps with location trackers / profiling trackers or request user for over 150 permissions</p>`
viewof table_tracker_other=Inputs.table(tracker_info_filter,
{
columns: ["app_name","tracker_no","permission_no","Profiling & Location Trackers","Country"],
header :{
"app_name" :md`Application Name`,
"tracker_no": md`Number of <br/>trackers detected`,
"permission_no": md`Number of <br/> permissions required`,
"Profiling & Location Trackers": md`Profiling or Location <br/> Trackers detected`,
"Country":md`Country`
},
width:{
"app_name":300,
"Country":100,
"Profiling & Location Trackers":200
},
align:{
"tracker_no":"left",
"permission_no":"left"
},
rows:67,
format: {
"tracker_no": sparkbar3(d3.max(tracker_info_filter, d => d["tracker_no"])),
// "Rights": colorcell(),
"permission_no": sparkbar3(d3.max(tracker_info_filter, d => d["permission_no"])),
// "women on the board": colorcell(),
// "women in executive level": colorcell(),
// "women in committees":colorcell(),
// "female chairs of board": colorcell(),
// "female CEO":colorcell(),
// "country":highlight(),
// "rank":highlight()
// ,
// culmen_depth_mm: sparkbar(d3.max(penguins, d => d.culmen_depth_mm)),
// flipper_length_mm: sparkbar(d3.max(penguins, d => d.flipper_length_mm)),
// body_mass_g: sparkbar(d3.max(penguins, d => d.body_mass_g)),
// sex: x => x.toLowerCase()
},
multiple:true
})
other_app=FileAttachment("other_applications@2.csv").csv({typed:true})
FileAttachment("tracker@1.csv").csv()
viewof table_tracker=Inputs.table(other_app,
{
columns: ["app_name","tracker_no","permission_no","Country"],
header :{
"app_name" :md`Application Name`,
"tracker_no": md`Number of <br/>trackers detected`,
"permission_no": md`Number of <br/> permissions required`,
"Profiling & Location Trackers": md`Profiling or Location <br/> Trackers detected`,
"Country":md`Country`
},
width:{
"app_name":350,
"Country":100,
},
align:{
"tracker_no":"left",
"permission_no":"left"
},
rows:67,
format: {
"tracker_no": sparkbar(d3.max(other_app, d => d["tracker_no"])),
// "Rights": colorcell(),
"permission_no": sparkbar(d3.max(other_app, d => d["permission_no"])),
// "women on the board": colorcell(),
// "women in executive level": colorcell(),
// "women in committees":colorcell(),
// "female chairs of board": colorcell(),
// "female CEO":colorcell(),
// "country":highlight(),
// "rank":highlight()
// ,
// culmen_depth_mm: sparkbar(d3.max(penguins, d => d.culmen_depth_mm)),
// flipper_length_mm: sparkbar(d3.max(penguins, d => d.flipper_length_mm)),
// body_mass_g: sparkbar(d3.max(penguins, d => d.body_mass_g)),
// sex: x => x.toLowerCase()
},
multiple:true
})
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.
