Published
Edited
Apr 3, 2019
twitterResponses = "https://gist.githubusercontent.com/cesandoval/ca0310352cc98742fc846e6a86a80c04/raw/0a591c6b7c4316235601b5a809df854f939418f2/twitter_response.json"
tweets = d3.json(twitterResponses) //parsed the json; statuses is an array, search_metadata is an object
statuses = tweets.statuses //each status is an object with its own properties/keys/values
searchMetadata = tweets.search_metadata
statuses[0]
text = statuses[0].text
textId = statuses[0].id
userId = statuses[0].user.id
userName = statuses[0].user.name
{
let emptyArray = []
for(let i in statuses){
let currStatus = statuses[i]
let tweetId = currStatus.id
emptyArray.push(tweetId) //add it to the emptyArray
}
return emptyArray
}
{
let texts = []
for (let i in statuses) {
let currentText = statuses[i].text
texts.push(currentText)
}
return texts
}
exData = [40,90,30,60,80];
{
let w = 160;
let h = 180;
const svg = d3.select(DOM.svg(w,h));
svg.selectAll("rect") //create empty rectangle
.data(exData) //pull the data into the svg
.enter() //bind data into the svg to bind d to i
.append("rect") //append to rectangle
.attr("x", (data,i) => (i*25+30))
//d becomes the placeholder for exData; loop through
//for each index in array, go thru i*25 + 30. First element = i = 0; 30, 55, 80, 105 are x places.
.attr("y",60)
.attr("width",20)
.attr("height", data => data)
.attr("fill", "steelblue");
return svg.node();
}
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.
