mainDialog = {
var display = pagedisplay
//if(nextyearbutton==0){display = pagedisplay}
if(nextyearbutton==1){display = yearSummary}
return display
}
Funky R&B Data
d3 = require("d3@6")
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();
}
park = FileAttachment("Parksfs v1.geojson").json()
pond = FileAttachment("Waterfs v1.geojson").json()
bbox = FileAttachment("Boudry v1@1.geojson").json()
bourough = FileAttachment("Bouroughv1.geojson").json()
spotsLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTjB-Nd9m1HPjT1hfMJbSVWdux6A9oDoeiczJgSvHy9hnVGWoJhi_PBIE25y1SJ5zkOJenAFixCibmN/pub?gid=974875010&single=true&output=csv"
spots = FileAttachment("spotsMap - Venue.csv").csv()
dashcode = FileAttachment("border@1.txt").tsv({array:true})
borderlinestart = FileAttachment("borderline.txt").tsv({array:true})
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();
}
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();
}
viewof w = Inputs.radio(["Intro","Game Start"], {label: "Pick one"})
viewof clicks = Inputs.button("Starts")
viewof nextyearbutton = Inputs.button("Next Year")
viewof Intro = Inputs.button("Introduction")
viewof name = Inputs.text({ placeholder: "What’s the name of your label?"})
name
viewof Artists = Inputs.select([null].concat(music.map(d => d.who)), {label: "Artist"});
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
}
mutable infoIndex =100
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
}
viewof Venue = Inputs.select([null].concat(place.map(d => d.where)), {label: "Venue"});
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
});
{
var randomNumber = Math.floor(Math.random() * 10) + 1;
console.log(randomNumber); // Output the random number to the console
}
signedArtists = []
round = (n, places) => {
if (!places) return Math.round(n);
const d = 10 ** places;
return Math.round(n * d) / d;
}
labelStats = {
//signButton
var stats= {money: 50000, hustle: 1, popularity: 1 ,age: 1}
return stats
}
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
}
mutable moneyMade = 0
mutable moneySpent = 0
signButton
proceed = {
if(nextyearbutton){
//signedArtists.length=0
}
}
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>
`
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
}
labelStats.age
viewof continueButton = Inputs.button("Continue")
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
}
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
}
viewof signButton = Inputs.button("SIGN!!")
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
}
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
mutable stops = 0
Hustle=80
Popularity=23
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();
}
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);
}
viewof jobs = Inputs.radio(["Street Performances","Club Performances","Compose"], {label: "What's the first job?"})
viewof jobs2 = Inputs.radio(["Shoot MV","Club Performances","Go on talk shows"], {label: "What's the next job?"})
viewof jobs3 = Inputs.radio(["Go on vacation","Make him work"],{label: "You guys hit the chart! Could the artist get vacation?"})
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)
// }
//}
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
const randomNumber = Math.floor(Math.random() * 101);
soundcloudSymbol2 = FileAttachment("soundcloud symbol 2@1.png").image()
music = FileAttachment("Urban Data stuff - people.csv").csv()
// music = d3.csv(musicLINK,d3.autoType)
placeLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTjB-Nd9m1HPjT1hfMJbSVWdux6A9oDoeiczJgSvHy9hnVGWoJhi_PBIE25y1SJ5zkOJenAFixCibmN/pub?gid=1481659787&single=true&output=csv"
place = d3.csv(placeLink,d3.autoType)
ArtristInfoLink="https://docs.google.com/spreadsheets/d/e/2PACX-1vQlkcD5xYZMlD3yyRsjjqqkBf_n2vr3Y_mKOtmBAk_CgZCk_DPyT27JaArH-0sOCOC0nJ7eSHrnNl2h/pub?gid=0&single=true&output=csv"
ArtistInfo = d3.csv(ArtristInfoLink,d3.autoType)
FlatbushLink1 = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=0&single=true&output=csv"
FlatbushMap = FileAttachment("Artist map points - Flatbush@1.csv").csv()
PharoachetMap = FileAttachment("Artist map points - Pharoache Monch @2.csv").csv()
KoolMap = FileAttachment("Artist map points - Kool Keith@1.csv").csv()
LilMap = FileAttachment("Artist map points - Lil Mama@1.csv").csv()
IsisMap = FileAttachment("Artist map points - _Ice Spice_@1.csv").csv()
SleepyMap = FileAttachment("Artist map points - _Sleepy hollow_@1.csv").csv()
//SheffMap = FileAttachment("Artist map points - _Sheff G_ (1).csv").csv()
EliMap = FileAttachment("Artist map points - _Eli Fross_@1.csv").csv()
CoachMap = FileAttachment("Artist map points - _Coach Da Ghost_@1.csv").csv()
KayMap = FileAttachment("Artist map points - _Kay Flock_@1.csv").csv()
FivioMap = FileAttachment("Artist map points - _Fivio Foreign_@1.csv").csv()
GZMap = FileAttachment("Artist map points - _22GZ_@1.csv").csv()
PharoacheLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=222504279&single=true&output=csv"
KoolLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=331543075&single=true&output=csv"
LilLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=132365224&single=true&output=csv"
IsisLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=1460680925&single=true&output=csv"
SleepyLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=1932771596&single=true&output=csv"
SheffLink ="https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=1485986413&single=true&output=csv"
EliLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=1641148336&single=true&output=csv"
CoachLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=1723607523&single=true&output=csv"
Fivio = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=1322826272&single=true&output=csv"
GZLink = "https://docs.google.com/spreadsheets/d/e/2PACX-1vRX3rLYHqmqJGiqUBekF12IDfQqlo3TrFeD70dlxyD1T4pnMohH71Vtg5LmF1QymiI06SnBTCqobFfg/pub?gid=361957252&single=true&output=csv"
school = FileAttachment("school.txt").tsv({array:true})
home= FileAttachment("home.txt").tsv({array:true})
Place = FileAttachment("Importantplace.txt").tsv({array:true})
controversy = FileAttachment("jail.txt").tsv({array:true})
flatbushimage = FileAttachment("flatbushImage.jpg").image()
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.