How to get an A... / John Le

John Le

Workspace

Published

Edited

May 9, 2022

Fork of Input + Chart

1 star

<text class = "type6" x="5" y="150">Fossil Free Grade </text>

<text class = "type6" x="0" y="350">Deforestation Free Grade</text>

<text class = "type6" x="0" y="550">Gender Equality Grade</text>

<text class = "type6" x="0" y="750">Military Weapon Grade</text>

<text class = "type6" x="15" y="930">Prison Industrial</text>

<text class = "type6" x="20" y="950">Complex Grade</text>

<text class = "type6" x="440" y="270">% of net assets invest in Fossil Fuels</text>

<text class = "type6" x="430" y="490">% of net assets invest in Deforestation Funds</text>

<text class = "type6" x="230" y="455">% Producer</text>

<text class = "type6" x="510" y="455">% Financier</text>

<text class = "type6" x="760" y="455">% Consumer Brand</text>

<text class = "type6" x="480" y="680">Gender Equality Score</text>

<text class = "type6" x="420" y="890">% of net assets invest in Military Weapons Funds</text>

<text class = "type6" x="440" y="1090">% of net assets invest in Prison Funds</text>

<text class = "type6" x="280" y="1060">% General Risk</text>

<text class = "type6" x="720" y="1060">% Higher Risk</text>

<style>

text.type1 {font-size: 18px; fill: green;}

text.type2 {font-size: 18px; fill: yellowgreen; opacity: 0.6}

text.type3 {font-size: 18px; fill: orange; opacity: 0.4}

text.type4 {font-size: 18px; fill: orangered; opacity: 0.4}

text.type5 {font-size: 18px; fill: red; opacity: 0.4}

text.type6 {font-size: 12px; fill: black;}

text.typedff2 {font-size: 15px; fill: yellowgreen; opacity: 0.6}

text.typedff3 {font-size: 15px; fill: orange; opacity: 0.4}

text.typedff4 {font-size: 15px; fill: orangered; opacity: 0.4}

text.typedff5 {font-size: 15px; fill: red; opacity: 0.4}

line {stroke: white; stroke-width: 1;}

text.subtext {font-size: 14px; fill: white;}

text.subtext2 {font-size: 20px; fill: white;}

text.grade {font-size: 30px; fill: white; text-anchor: middle}

text.

</style>

</svg>

viewof sliderData = Inputs.search(alldata, {placeholder: "Fund profile: Shareclass name"})

movedots = (funds)=> {

let fossilfuely = 200;

let deforestationy = 400;

let gendery = 600;

let weapony = 800;

let prisony = 1000;

let ffdots = vis.selectAll('.ffdot')

.data(sliderData)

.join('circle')

.classed('ffdot', true)

.attr('cx', d=> scalexmain(d['Fossil Free Funds: Fossil fuel holdings, weight'] ))

.attr('cy', fossilfuely)

.attr('r', 5)

.style("fill", (d)=>"black")

.style("opacity", (d)=>"0.8")

let dfdots = vis.selectAll('.dfdot')

.data(sliderData)

.join('circle')

.classed('dfdot', true)

.attr('cx', d=> scalexmainDFFp(d['Deforestation Free Funds: Deforestation-risk producer, weight'] ))

.attr('cy', deforestationy)

.attr('r', 5)

.style("fill", (d)=>"red")

.style("opacity", (d)=>"0.8")

let df2dots = vis.selectAll('.df2dot')

.data(sliderData)

.join('circle')

.classed('df2dot', true)

.attr('cx', d=> scalexmainDFFf(d['Deforestation Free Funds: Deforestation-risk financier, weight'] ))

.attr('cy', deforestationy)

.attr('r', 5)

.style("fill", (d)=>"blue")

.style("opacity", (d)=>"0.8")

let df3dots = vis.selectAll('.df3dot')

.data(sliderData)

.join('circle')

.classed('df3dot', false)

.attr('cx', d=> scalexmainDFFc(d['Deforestation Free Funds: Deforestation-risk consumer brand, weight'] ))

.attr('cy', deforestationy)

.attr('r', 5)

.style("fill", (d)=>"purple")

.style("opacity", (d)=>"0.8")

let gfdots = vis.selectAll('.gfdot')

.data(sliderData)

.join('circle')

.classed('gfdot', true)

.attr('cx', d=> scalexmainGEF(d['Gender Equality Funds: Gender equality score - Overall score (out of 100 points)'] ))

.attr('cy', gendery)

.attr('r', 5)

.style("fill", (d)=>"black")

.style("opacity", (d)=>"0.8")

let wfdots = vis.selectAll('.wfdot')

.data(sliderData)

.join('circle')

.classed('wfdot', true)

.attr('cx', d=> scalexmainWFW(d['Weapon Free Funds: Military weapon, weight'] ))

.attr('cy', weapony)

.attr('r', 5)

.style("fill", (d)=>"black")

.style("opacity", (d)=>"0.8")

let pfdots = vis.selectAll('.pfdot')

.data(sliderData)

.join('circle')

.classed('pfdot', true)

.attr('cx', d=> scalexmainPFF(d['Prison Free Funds: All flagged, weight'] ))

.attr('cy', prisony)

.attr('r', 5)

let pf2dots = vis.selectAll('.pf2dot')

.data(sliderData)

.join('circle')

.classed('pf2dot', true)

.attr('cx', d=> scalexmainPFF2(d['Prison Free Funds: All flagged, higher risk, weight'] ))

.attr('cy', prisony)

.attr('r', 5)

.style("fill", (d)=>"orange")

.style("opacity", (d)=>"0.8")

if (sliderData.length == 1) {

let grade = sliderData[0]["Fossil Free Funds: Fossil fuel grade"];

let color;

if (grade == "A") {

color = "green";

}

else if (grade == "B") {

color = "yellowgreen";

}

else if (grade == "C") {

color = "orange";

}

else if (grade == "D") {

color = "orangered";

}

else {

color = "red";

}

d3.select("#gradefossil").text(grade);

d3.select("#boxf").style("fill", color);

}

if (sliderData.length == 1) {

let grade = sliderData[0]["Deforestation Free Funds: Deforestation grade"];

let color;

if (grade == "A") {

color = "green";

}

else if (grade == "B") {

color = "yellowgreen";

}

else if (grade == "C") {

color = "orange";

}

else if (grade == "D") {

color = "orangered";

}

else {

color = "red";

}

d3.select("#gradedeforestation").text(grade);

d3.select("#boxd").style("fill", color);

}

if (sliderData.length == 1) {

let grade = sliderData[0]["Gender Equality Funds: Gender equality grade"];

let color;

if (grade == "A") {

color = "green";

}

else if (grade == "B") {

color = "yellowgreen";

}

else if (grade == "C") {

color = "orange";

}

else if (grade == "D") {

color = "orangered";

}

else {

color = "red";

}

d3.select("#gradegender").text(grade);

d3.select("#boxg").style("fill", color);

}

if (sliderData.length == 1) {

let grade = sliderData[0]["Weapon Free Funds: Military weapon grade"];

let color;

if (grade == "A") {

color = "green";

}

else if (grade == "B") {

color = "yellowgreen";

}

else if (grade == "C") {

color = "orange";

}

else if (grade == "D") {

color = "orangered";

}

else {

color = "red";

}

d3.select("#gradeweapon").text(grade);

d3.select("#boxw").style("fill", color);

}

if (sliderData.length == 1) {

let grade = sliderData[0]["Prison Free Funds: Prison industrial complex grade"];

let color;

if (grade == "A") {

color = "green";

}

else if (grade == "B") {

color = "yellowgreen";

}

else if (grade == "C") {

color = "orange";

}

else if (grade == "D") {

color = "orangered";

}

else {

color = "red";

}

d3.select("#gradeprison").text(grade);

d3.select("#boxp").style("fill", color);

}

movedots(sliderData)

sliderData[0]

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