Published
Edited
Jun 25, 2019
Importers
md`# D3-Workshop-Exercises`
updateExercise = (multi) => {
const HEIGHT = 100
const WIDTH = width
const testData = [15, 45, 75] // with this test data lets practice making circle enter/exit
const allDatas = [12, 8, 15, 45, 75, 33, 100, 190]
const transitionDuration = 1000
const svg = d3.select(DOM.svg(WIDTH, HEIGHT))
// Fill in update function
const update = (data) => {
// =========== Step 1: Data Join ============
const node = svg.selectAll('.myUpdate')
.data(data)
// =========== Step 2: Enter / Merge ============
const nodeEnter = node.enter()
.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 10)
nodeEnter.merge(node)
.attr('class', 'myUpdate')
.transition()
.duration(transitionDuration) // duration of the animation
.delay((d, i) => 100 * i) // stagger delay animation start
.attr("cx", (d)=> d)
.attr("cy", 50)
// =========== Step 3: Exit / Remove ============
const nodeExit = node.exit().remove()
}
// UNCOMMENT TO TEST YOUR FUNCTION
if(multi) {
const interval = d3.interval((t) => {
if (t > 1500 * 10) { // stop after 10 times
interval.stop()
return
}
let endIndex = Math.floor(Math.random() * allDatas.length - 1)
if (endIndex < 1) {
endIndex = 1
}
update(d3.shuffle([...allDatas]).slice(0, endIndex).sort())
}, 1500)
} else {
update(testData)
}
return svg.node()
}
axisExample = {
const height = 300
const margin = {top: 30, bottom: 30, left: 40, right: 40}
const svg = d3.select(DOM.svg(width, height))
const xScale = d3.scaleLinear().domain([20, 100]).range([margin.bottom, width - margin.right])
const yScale = d3.scaleLinear().domain([30, 0]).range([margin.bottom, height - margin.top])
const xaxis = d3.axisBottom().scale(xScale)
const xaxis_container = svg.append("g")
.attr("class", "xaxis")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xaxis)
const yaxis = d3.axisLeft().scale(yScale)
const yaxis_container = svg.append("g")
.attr("class", 'yaxis')
.attr('transform', `translate(${margin.top}, 0)`)
.call(yaxis)
return svg.node()
}
d3 = require("d3@5")
axisWithData = {
const height = 300
const margin = {top: 30, bottom: 30, left: 40, right: 40}
const data = [{x:30, y:20}, {x:55, y:8},{x:79, y:24}]
const svg = d3.select(DOM.svg(width, height))
const xScale = d3.scaleLinear().domain([20, 100]).range([margin.bottom, width - margin.right])
const yScale = d3.scaleLinear().domain([30, 0]).range([margin.bottom, height - margin.top])
const xaxis = d3.axisBottom().scale(xScale)
const xaxis_container = svg.append("g")
.attr("class", "xaxis")
.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(xaxis)
const yaxis = d3.axisLeft().scale(yScale)
const yaxis_container = svg.append("g")
.attr("class", 'yaxis')
.attr('transform', `translate(${margin.top}, 0)`)
.call(yaxis)
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 10)
.attr("cy", (d) => yScale(d.y))
.attr("cx", (d) => xScale(d.x))
return svg.node()
}
getNodeLinks = () => {
const loveActuallyHashMap = {
'abdul_salis' : {name: "Abdul Salis", title: "Production assistant", group : " London A", groupid: 1},
'keira_knightley' : {name: "Keira Knightley", title: "Newlywed", group: "London A", groupid: 1},
'colin_firth' : {name : "Colin Firth", title: "Newly Single Writer", group: "London A", groupid: 1},
'kris_marshall' : {name: "Kris Marshall", title: "Server", group: "London A", groupid: 1},
'laura_linney' : {name: 'Laura Linny', title: 'Office Worker', group: "Go-betweeners", groupid: 2},
'andrew_lincoln' : {name: 'Andrew Lincoln', title: 'Artist', group: "Go-betweeners", groupid: 2},
'bill_nighy' : {name: 'Bill Nighy', title: 'Aging Pop Star', group: "Go-betweeners", groupid: 2},
'martin_freeman' : {name: 'Martin Freeman/Joanna Page', title: 'Body Doubles', group: "Go-betweeners", groupid: 2},
'heike_makatsch' : {name: 'Heike Makatsch', title: 'Secretary', group: "London B", groupid: 3},
'rowan_atkinson' : {name: 'Rowan Atkinson', title: 'Salesman', group: "London B", groupid: 3},
'liam_neeson' : {name: 'Liam Neeson', title: 'Bereaved stepfather', group: "London B", groupid: 3},
'emma_thompson' : {name: 'Emma Thompson', title: "PM's sister", group: "London B", groupid: 3},
'hugh_grant' : {name: 'Hugh Grant', title: "Prime Minister", group: "London B", groupid: 3},
'alan_rickman' : {name: 'Alan Rickman', title: "Office Manager", group: "London B", groupid: 3}
}
return Promise.all([
d3.csv("https://raw.githubusercontent.com/ahoak/data-visualization-workshop/master/data/laEdges.csv"),
d3.csv("https://raw.githubusercontent.com/ahoak/data-visualization-workshop/master/data/set_appearances.csv")
]).then((result) => {
console.log('len: ', result.length)
const edges = result[0]
const places = result[1]
const multipleScenes = places.reduce((accumulator, x) => {
const keys = Object.keys(x)
let scene = ''
const list = keys.reduce((accum, name) => {
if(name !== 'scenes') {
if(x[name].length){
accum.push(name)
}
} else {
scene = x[name]
}
return accum
}, [])
if(list.length > 1){
accumulator.push({scene, names: list})
}
return accumulator
}, [])
const links = edges.reduce((accumulator, e) => {
const source = e.actors
const keys = Object.keys(e)
let links = keys.reduce((accum, key) => {
if(key !== 'actors' && parseInt(e[key], 10) > 0 && key !== source) {
const o = {}
o.source = source
o.target = key
o.weight = e[key]
accum.push(o)
}
return accum
}, [])
if(links.length) {
links = [...links].map((curr) => {
curr.scene = ''
multipleScenes.forEach((s, i) => {
const found = s.names.filter((name)=> name === curr.source || name === curr.target)
if(found.length === 2) { // both source and target found
curr.scene = s.scene
curr.sceneid = i
}
})
return curr
})
links.forEach((link) => accumulator.push(link))
}
return accumulator
}, [])
const keys = Object.keys(edges[0])
console.log('keys', keys)
const nodes = keys.reduce((accum, key) => {
if(key !== 'actors'){
const node = loveActuallyHashMap[key]
node.id = key
accum.push(node)
}
return accum
}, [])
const forceLayout = { nodes, links}
return forceLayout
})
}
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.
