Public
Edited
May 3, 2023
1 fork
Insert cell
# Funky R&B Data
Insert cell
d3 = require("d3@6")
Insert cell
chart = {
const width = 960,
height = 900;
const svg = d3.create("svg")
.attr("viewBox", [50, 50, width-100, height-100]);

var projection = d3
.geoMercator()
.fitSize([width - 50, height - 50], bbox);

var path1 = d3.geoPath().projection(projection);
var path2 = d3.geoPath().projection(projection);
var path3 = d3.geoPath().projection(projection);

var g = svg.append("g").attr("id", "paths");


g.selectAll("path3")
.data(bourough.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path3)
.style("fill", "rgb(240,240,240)")
.style("fill-opacity", ".5")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")

g.selectAll("path3")
.data(park.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path3)
.style("fill", "green")
.style("fill-opacity", ".2")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")

g.selectAll("path3")
.data(pond.features)
.enter()
.append("path")
.attr('class','outlines')
.attr("d", path3)
.style("fill", "blue")
.style("fill-opacity", ".2")
.style('stroke-opacity','.4')
.style("stroke-width", '.5')
.style("stroke", "rgb(0,0,0)")

var c = svg.selectAll("circle")
.data(spots)
.enter()
.append("circle")
.attr("cx", function(d) {return projection([d.long,d.lat])[0]})
.attr("cy", function(d) {return projection([d.long,d.lat])[1]})
.attr('r',3)
.attr('fill',artistColor)
.style('fill-opacity','1')
.on('mouseover', spotText)
.on('mouseout', removespotText)


if(curArtist!=undefined){
c.enter().append("circle")
.data(curArtist)
.enter()
.append("circle")
.attr("cx", function(d) {return projection([d.long,d.lat])[0]})
.attr("cy", function(d) {return projection([d.long,d.lat])[1]})
.attr('r',6)
.attr('fill',"cyan")
.style('fill-opacity','1')
.on('mouseover', spotText)
.on('mouseout', removespotText)
}

// var p = svg.selectAll('polyline')
// g.selectAll("path3") //d3 geopath
// .data(school) //get data to define path
// .enter() //there are more data than elements, this selects them
// .append('polyline') //appends path to data
// .attr('class','outlines')
// .attr('points', function(d) {return d})
// .style("fill", "deeppink")
// .style("fill-opacity", '1')
// .attr('stroke','snow')
// .attr("stroke-width", '2')
// .attr('stroke-opacity', '1')


function artistColor(){

var color = 'black'
//if statements that change the value of color depending on the artist


return color
}

function spotText(event,d){
d3.select(this).attr('fill','yellow')

svg.append('text')
.attr('class', 'spots')
.attr('x', '150')
.attr('y', '150')
.attr('font-family','Helvetica')
.attr('font-size', '1em')
.attr('text-anchor', 'start')
.attr('font-weight','bold')
.text(d.description)

svg.append('text')
.attr('class', 'spots')
.attr('x', '150')
.attr('y', '165')
.attr('font-family','Helvetica')
.attr('font-size', '.7em')
.attr('text-anchor', 'start')
.attr('font-weight','normal')
.text(d.who)

svg.append('line')
.attr('class','spotLine')
.attr('x1','150')
.attr('y1','150')
.attr('x2','350')
.attr('y2','150')
.style('stroke-width', '1')
.style('stroke', 'black')

/*
svg.append('image')
.attr('href',streetLines)
.attr('class','spots')
.attr('x', '0')
.attr('y','0')
.attr('width', 960)
.attr('height', 900)
*/
}
function removespotText(event,d){
d3.select(this).attr('fill','black')
d3.selectAll('text.spots').remove()
d3.selectAll('line.spotLine').remove()
}

return svg.node();
}
Insert cell
park = FileAttachment("Parksfs v1.geojson").json()
Insert cell
pond = FileAttachment("Waterfs v1.geojson").json()
Insert cell
bbox = FileAttachment("Boudry v1@1.geojson").json()
Insert cell
bourough = FileAttachment("Bouroughv1.geojson").json()
Insert cell
Insert cell
spots = FileAttachment("spotsMap - Venue.csv").csv()
Insert cell
Insert cell
dashcode = FileAttachment("border@1.txt").tsv({array:true})
Insert cell
borderlinestart = FileAttachment("borderline.txt").tsv({array:true})
Insert cell
borderline = {
const width = 1200,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [0, -800, width, height]);


var p = svg.selectAll("polyline")
.data(borderlinestart) //get data to define path
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr('points', function(d){return d})
.style("fill", "lightgrey")
.style('stroke-opacity','1')
.style("stroke-width", '0')
.style("stroke", "rgb(0,0,0)")
return svg.node();
}
Insert cell
border = {
const width = 1200,
height = 800;
const svg = d3.create("svg")
.attr("viewBox", [0, -800, width, height]);


var p = svg.selectAll("polyline")
.data(dashcode) //get data to define path
.enter() //there are more data than elements, this selects them
.append("polyline") //appends path to data
.attr('points', function(d){return d})
.style("fill", "rgb(60,60,60)")
.style('stroke-opacity','1')
.style("stroke-width", '0')
.style("stroke", "rgb(0,0,0)")
return svg.node();
}
Insert cell
viewof w = Inputs.radio(["Intro","Game Start"], {label: "Pick one"})
Insert cell
viewof clicks = Inputs.button("Starts")
Insert cell
viewof nextyearbutton = Inputs.button("Next Year")
Insert cell
viewof Intro = Inputs.button("Introduction")
Insert cell
viewof name = Inputs.text({ placeholder: "What’s the name of your label?"})
Insert cell
name
Insert cell
viewof Artists = Inputs.select([null].concat(music.map(d => d.who)), {label: "Artist"});

Insert cell
bandInfo = {
var artistData = []
if(Artists=="Flatbush Zombies"){
artistData = ArtistInfo[0]
}

if(Artists=="Pharoache Monch"){
artistData = ArtistInfo[1]
}
if(Artists=="Kool Keith"){
artistData = ArtistInfo[2]
}
if(Artists=="Lil Mama"){
artistData = ArtistInfo[3]
}
if(Artists=="Isis Gaston"){
artistData = ArtistInfo[4]
}
if(Artists=="Tegan Joshua Anthony"){
artistData = ArtistInfo[5]
}
// if(Artists=="Michael Kyle Williams"){
// artistData = ArtistInfo[6]
// }
if(Artists=="Elijah Quamina"){
artistData = ArtistInfo[7]
}
if(Artists=="Culture Bermudez"){
artistData = ArtistInfo[8]
}
if(Artists=="Kevin Perez"){
artistData = ArtistInfo[9]
}
if(Artists=="Maxie Lee Ryles III"){
artistData = ArtistInfo[10]
}
if(Artists=="Jeffrey Mark Alexander"){
artistData = ArtistInfo[11]
}

return artistData
}
Insert cell
mutable infoIndex =100
Insert cell
curArtist = {

var artistData
if(Artists=="Flatbush Zombies"){
artistData=FlatbushMap
mutable infoIndex = 0
//artistInfo23 = ArtistInfo[0].members
}
if(Artists=="Pharoache Monch"){artistData=PharoachetMap
mutable infoIndex = 1
}
if(Artists=="Kool Keith"){artistData=KoolMap
mutable infoIndex = 2
}
if(Artists=="Lil Mama"){artistData=LilMap
mutable infoIndex = 3
}
if(Artists=="Isis Gaston"){artistData=IsisMap
mutable infoIndex = 4
}
if(Artists=="Tegan Joshua Anthony"){artistData=SleepyMap
mutable infoIndex = 5
}
// if(Artists=="Michael Kyle Williams"){artistData=SheffMap
//mutable infoIndex = 6
// }
if(Artists=="Elijah Quamina"){artistData=EliMap
mutable infoIndex = 7
}
if(Artists=="Culture Bermudez"){artistData=CoachMap
mutable infoIndex = 8
}
if(Artists=="Kevin Perez"){artistData=KayMap
mutable infoIndex = 9
}
if(Artists=="Maxie Lee Ryles III"){artistData=FivioMap
mutable infoIndex = 10
}
if(Artists=="Jeffrey Mark Alexander"){artistData=GZMap
mutable infoIndex = 11
}

return artistData
}
Insert cell
viewof Venue = Inputs.select([null].concat(place.map(d => d.where)), {label: "Venue"});
Insert cell
labelStats = {
money: 1000,
hustle: 1,
popularity: 1,
age: 0
};

labelStats.money = Math.floor(Math.random() * 1000) + 1;
labelStats.hustle = Math.floor(Math.random() * 10) + 1;
labelStats.popularity = Math.floor(Math.random() * 10) + 1;

// Define the maximum age and the maximum value of each property
var maxMoney = 10000000;
var maxHustle = 10;
var maxPopularity = 10;
var maxAge = 10;

// Get the "next year" button element from the HTML
var nextyearbutton = document.getElementById("nextyearbutton");

// Add an event listener to the "next year" button
nextyearbutton.addEventListener("click", function() {
console.log("Year " + (labelStats.age + 1));

// Increase the character's age by 1
labelStats.age++;

// Generate random numbers for each property and add them to the current value
var moneyIncrease = Math.floor(Math.random() * 1000) + 1;
var hustleIncrease = Math.floor(Math.random() * 3) + 1;
var popularityIncrease = Math.floor(Math.random() * 2) + 1;

labelStats.money += moneyIncrease;
labelStats.hustle += hustleIncrease;
labelStats.popularity += popularityIncrease;

// Check if any property has exceeded the maximum value and cap it if necessary
if (labelStats.money > maxMoney) {
labelStats.money = maxMoney;
}
if (labelStats.hustle > maxHustle) {
labelStats.hustle = maxHustle;
}
if (labelStats.popularity > maxPopularity) {
labelStats.popularity = maxPopularity;
}

console.log(labelStats); // Output the updated labelStats object to the console
});

Insert cell
{
var randomNumber = Math.floor(Math.random() * 10) + 1;

console.log(randomNumber); // Output the random number to the console
}
Insert cell
signedArtists = []
Insert cell
round = (n, places) => {
if (!places) return Math.round(n);
const d = 10 ** places;
return Math.round(n * d) / d;
}
Insert cell
labelStats = {
//signButton
var stats= {money: 50000, hustle: 1, popularity: 1 ,age: 1}
return stats
}
Insert cell
updatedStats = {

if(nextyearbutton>0){//this is what happens when we hit 'next year'
mutable moneyMade = 0
//loop through our signedArtists
// have some random value that multiplies pop and hustle to determine how much money and popularity the artist brings the label
//labelStats.age = labelStats.age+1
//console.log(labelStats.age)


var info = 0
for (let i = 0; i < signedArtists.length; i=i+2) {//loop through our signed artists at the end of the year

info = ArtistInfo.find(item => item.who==signedArtists[i])//get the info of each artist that you have signed
var jackpotMultiplier = 1
var jackpot = Math.random()*10
jackpot = round(jackpot,0)
console.log("jackpot "+jackpot)

if(jackpot==7){jackpotMultiplier = 50}
if(jackpot<info.HustleMulti){jackpotMultiplier = 10}

if(Math.random()<2){labelStats.popularity=0}//chance that you lose popularity
console.log(i)

//how do we use the multiplier to calculate money made?
labelStats.hustle = labelStats.hustle+info.HustleMulti//add artist's hustle to our label's hustle

labelStats.popularity = labelStats.popularity+info.PopMulti//add the artist's popularity to the label's popularity


var cashGained = (Math.random()*3)*info.cost*(info.HustleMulti*(.3+(Math.random()*.7))*jackpotMultiplier) //this is multiplying the artist's cost by a random number between 0 and 2
mutable moneyMade = mutable moneyMade + cashGained //add the artist's money made to the overall moneyMade
labelStats.money = labelStats.money + cashGained //adds the artist's earnings to our label's overall money
console.log(cashGained)
}
signedArtists.length=[]
// mutable moneySpent = 0
}

//viewof signButton.onclick = () => {console.log(ArtistInfo[infoIndex].Members)
if(signButton>0){console.log(ArtistInfo[infoIndex].Members)//if we hit the 'sign' button
labelStats.money = labelStats.money-(ArtistInfo[infoIndex].cost)//get the cost of the artist and subtract from our money
mutable moneySpent = mutable moneySpent + ArtistInfo[infoIndex].cost //keeps track of how much we are spending this year
set(viewof signButton,0) //changes the sign button value back to zero so that it only fires when we click on the button
signedArtists.push(ArtistInfo[infoIndex].who) //adds the artist's name to the 'signed artist' list
signedArtists.push(" ")
}

if(continueButton>0){
mutable moneySpent = 0
labelStats.age = labelStats.age+1
set(viewof nextyearbutton,0)
set(viewof continueButton,0)
}

//signButton
if(signButton){
//labelStats.money = labelStats.money-ArtistInfo[infoIndex].cost
}
return labelStats
}
Insert cell
mutable moneyMade = 0
Insert cell
mutable moneySpent = 0
Insert cell
signButton
Insert cell
proceed = {
if(nextyearbutton){
//signedArtists.length=0
}
}
Insert cell
dashboard =

html`


<div class='dashboardOuter' style='height:808px;width:1600px'>

<div class='border' style='position:absolute;width:1200px;top:0px;left:0px'>
${border}
</div>
<div class='border' style='position:absolute;width:1200px;top:0px;left:40px'>
${borderline}
</div>


<div class='pagedisplay' style='position:absolute;width:400px;top:150px;left:50px;font-family:helvetica'>
${viewof signButton}
${mainDialog}
</div>



<div class='soundcloud' style='position:absolute;width:100px;top:10px;left:25px'>
${soundcloudSymbol2}
</div>
<div class='indexes' style='position:absolute;top:25px;left:650px;color:grey;font-family:helvetica;font-size:20px'>
<p>Hustle: ${round(labelStats.hustle,2)} Popularity: ${round(labelStats.popularity,2)} Cash: ${round(labelStats.money,2)} Age: ${updatedStats.age-1}</p>
</div>




<div class='indexes' style='position:absolute;top:0px;left:140px;color:white;font-family:helvetica;font-size:35px'>
${md` **UPCOMING NYC RAPPERS** `}
</div>
<div class='indexes' style='position:absolute;top:120px;left:50px;color:rgb(120,120,250);font-family:helvetica;font-size:35px'>
${name}
</div>


<div class='map' style='position:absolute;width:700px;top:120px;left:482.5px'>
${chart}
</div>

<div class='soundcloud' style='position:absolute;width:400px;top:560px;left:50px;font-size:14px'>
<p> Artist Roster:</p>
${signedArtists}
</div>



<div class='soundcloud' style='position:absolute;width:100px;top:700px;left:50px'>
${viewof nextyearbutton}
</div>



</div>

`
Insert cell
mainDialog = {
var display = pagedisplay
//if(nextyearbutton==0){display = pagedisplay}
if(nextyearbutton==1){display = yearSummary}

return display
}
Insert cell
yearSummary={

var summary = html`
<p> This year your label turned ${labelStats.age}</p>
<p> You earned this much money: ${round(moneyMade,2)}</p>
<p> You spent this much money: ${round(moneySpent,2)}</p>
<p> For a net profit of: ${round(moneyMade-moneySpent,2)}</p>
<p> You have this much money: ${round(updatedStats.money,2)}</p>

${viewof continueButton}
`
//mutable moneyMade = 0
//nextyearbutton
//set(viewof continueButton,0)
return summary
}
Insert cell
labelStats.age
Insert cell
viewof continueButton = Inputs.button("Continue")
Insert cell
artistText={//this cell displays the artist information

var text = " "
if(infoIndex<50){text=
htl.html`<p>
Members:
${ArtistInfo[infoIndex].Members}
<br>
Net Worth:
${ArtistInfo[infoIndex].networth}
<br>
Cost:
${ArtistInfo[infoIndex].cost}
<br>
Hustle Index:
${ArtistInfo[infoIndex].HustleMulti}
<br>
Breakout Chance:
${ArtistInfo[infoIndex].PopMulti}
<br>
<br>
Description:
${ArtistInfo[infoIndex].description}
<br>

${ArtistInfo[infoIndex].image}


</p>
<br>

`

}
return text
}
Insert cell
button = {
var btn = " "
if(infoIndex==0){btn = Inputs.button("sign Flatbush Zombies")}
if(infoIndex==1){btn = Inputs.button("sign Pharoache Monch")}
if(infoIndex==2){btn = Inputs.button("sign Kool Keith")}
if(infoIndex==3){btn = Inputs.button("sign Lil Mama")}
if(infoIndex==4){btn = Inputs.button("sign Ice Spice")}
if(infoIndex==5){btn = Inputs.button("sign Sleepy Hollow")}
//if(infoIndex==6){btn = Inputs.button("sign Sheff G")}
if(infoIndex==7){btn = Inputs.button("sign Eli Fross")}
if(infoIndex==8){btn = Inputs.button("sign Coach Da Ghost")}
if(infoIndex==9){btn = Inputs.button("sign Kay Flock")}
if(infoIndex==10){btn = Inputs.button("sign Fivio Foreign")}
if(infoIndex==11){btn = Inputs.button("sign 22GZ")}
return btn
}
Insert cell
viewof signButton = Inputs.button("SIGN!!")
Insert cell
pagedisplay = {

var currentpage

if (stops == "0"){
currentpage = html`

${spots[stops].prompt}

${viewof Intro}
${viewof name}
${viewof Artists}

${artistText}


`
}

if (stops == "1"){
currentpage = html`
${spots[stops].prompt}
${viewof jobs}
`
}

if (stops == "2"){
currentpage = html`
${spots[stops].prompt}
${viewof jobs2}
`
}

if (stops == "3"){
currentpage = html`
${spots[stops].prompt}
${viewof jobs3}
`
}
return currentpage
}
Insert cell
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
Insert cell
mutable stops = 0
Insert cell
Hustle=80
Insert cell
Popularity=23
Insert cell
function createRectangle(thickness, length, color) {
const rect = d3.create("svg:rect")
.attr("width", thickness)
.attr("height", length)
.attr("fill", color)
.attr("stroke", "none");
return rect.node();
}
Insert cell
function createHustleBar(Hustle) {
let length, color;
if (Hustle >= 66 && Hustle <= 100) {
length = 200;
color = 'green';
} else if (Hustle >= 33 && Hustle <= 65) {
length = 133;
color = 'yellow';
} else {
length = 70;
color = 'red';
}
createRectangle(25, length, color);
}
Insert cell
viewof jobs = Inputs.radio(["Street Performances","Club Performances","Compose"], {label: "What's the first job?"})
Insert cell
viewof jobs2 = Inputs.radio(["Shoot MV","Club Performances","Go on talk shows"], {label: "What's the next job?"})
Insert cell
viewof jobs3 = Inputs.radio(["Go on vacation","Make him work"],{label: "You guys hit the chart! Could the artist get vacation?"})
Insert cell
setup = {

//this cell looks for correct answers from the input, and progresses to the next step when appropriate
if(button=="0"){
mutable stops = 1 //change to next stop on the map
set(button, 0)//reset button
set(viewof jobs,null)
}

if(jobs == "Club Performances"){
mutable stops = 2
}

if(jobs2 == "Shoot MV"){
mutable stops = 3
}
if(jobs3 == "Go on vacation"){
mutable stops = 4
}


// if(eyesOnly == "anyone can watch this awesome dog"){
// mutable stops = 0
}

// if(stops == "0"){
//viewof walkType = Inputs.input("nice walk")
//set(viewof walkType,null)
//set(viewof parkStop,null)
//set(viewof eyesOnly,null)
// }

//}
Insert cell
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}

Insert cell
const randomNumber = Math.floor(Math.random() * 101);

Insert cell
soundcloudSymbol2 = FileAttachment("soundcloud symbol 2@1.png").image()
Insert cell
music = FileAttachment("Urban Data stuff - people.csv").csv()
Insert cell
// music = d3.csv(musicLINK,d3.autoType)
Insert cell
Insert cell
place = d3.csv(placeLink,d3.autoType)
Insert cell
Insert cell
ArtistInfo = d3.csv(ArtristInfoLink,d3.autoType)
Insert cell
FlatbushLink1 = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=0&single=true&output=csv"
Insert cell
FlatbushMap = FileAttachment("Artist map points - Flatbush@1.csv").csv()
Insert cell
PharoachetMap = FileAttachment("Artist map points - Pharoache Monch @2.csv").csv()
Insert cell
KoolMap = FileAttachment("Artist map points - Kool Keith@1.csv").csv()
Insert cell
LilMap = FileAttachment("Artist map points - Lil Mama@1.csv").csv()
Insert cell
IsisMap = FileAttachment("Artist map points - _Ice Spice_@1.csv").csv()
Insert cell
SleepyMap = FileAttachment("Artist map points - _Sleepy hollow_@1.csv").csv()
Insert cell
//SheffMap = FileAttachment("Artist map points - _Sheff G_ (1).csv").csv()
Insert cell
EliMap = FileAttachment("Artist map points - _Eli Fross_@1.csv").csv()
Insert cell
CoachMap = FileAttachment("Artist map points - _Coach Da Ghost_@1.csv").csv()
Insert cell
KayMap = FileAttachment("Artist map points - _Kay Flock_@1.csv").csv()
Insert cell
FivioMap = FileAttachment("Artist map points - _Fivio Foreign_@1.csv").csv()
Insert cell
GZMap = FileAttachment("Artist map points - _22GZ_@1.csv").csv()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Fivio = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=1322826272&single=true&output=csv"
Insert cell
Insert cell
school = FileAttachment("school.txt").tsv({array:true})
Insert cell
home= FileAttachment("home.txt").tsv({array:true})
Insert cell
Place = FileAttachment("Importantplace.txt").tsv({array:true})
Insert cell
controversy = FileAttachment("jail.txt").tsv({array:true})
Insert cell
flatbushimage = FileAttachment("flatbushImage.jpg").image()
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