Published unlisted
Edited
Aug 31, 2020
cars = FileAttachment("cars.json").json()
car_dj = {
let svg = d3.create('svg').attr('width', 800).attr('height', 100)
let center_g = svg.append('g').attr('transform', 'translate(50,50)')
let cars_subset = cars.slice(0,10) // subset of cars data for concise display
let dj = center_g
.selectAll('g')
.data(cars_subset)
return dj
}
viewof car_dj_vis = drawjoin(car_dj)
car_dj_vis
car_enter = {
let svg = d3.create('svg').attr('width', 800).attr('height', 100)
let center_g = svg.append('g').attr('transform', 'translate(50,50)')
let cars_subset = cars.slice(0,10) // subset of cars data for concise display
center_g
.selectAll('g')
.data(cars_subset)
.enter()
.append('circle')
return svg.node()
}
viewof car_enter_vis = drawdom(car_enter)
car_enter_vis
d3.select(car_enter)
.select('g')
.selectAll('circle')
car_mpg = {
let svg = d3.create('svg').attr('width', 800).attr('height', 100)
let center_g = svg.append('g').attr('transform', 'translate(50,50)')
center_g
.selectAll('g')
.data(cars)
.enter()
.append('circle')
.attr('cx', d => 10*d.Miles_per_Gallon)
.attr('r', 10)
.attr('fill', 'none')
.attr('stroke', d3.hcl(30,50,40))
.attr('stroke-width', 2)
.attr('opacity', 0.3)
return svg.node()
}
viewof car_mpg_vis = drawdom(car_mpg,10)
car_mpg_vis
car_mpg_weight = {
let svg = d3.create('svg').attr('width', 400).attr('height', 400)
let center_g = svg.append('g').attr('transform', 'translate(50,50)')
center_g
.selectAll('g')
.data(cars)
.enter()
.append('circle')
.attr('class', 'cardots')
center_g.selectAll('.cardots')
.attr('cx', d => 7*d.Miles_per_Gallon)
.attr('cy', d => 500-.1*d.Weight_in_lbs) // recall: SVG coordinate system!
.attr('r', 4)
.attr('fill', 'none')
.attr('stroke', d3.hcl(30,50,40))
.attr('stroke-width', 2)
.attr('opacity', 0.5)
return svg.node()
}
cars_by_origin = {
let origin_values = d3.set(cars, d => d.Origin).values() // \`set\` filters an Array into unique values
return origin_values.map(origin => cars.filter(d => d.Origin==origin))
}
car_origin_mpg_weight = {
let svg = d3.create('svg').attr('width', 800).attr('height', 300)
let center_g = svg.append('g').attr('transform', 'translate(50,50)')
center_g
.selectAll('g')
.data(cars_by_origin)
.enter()
.append('g')
.attr('class', 'sm') // 'sm' for small multiples
.attr('transform', (d,i) => `translate(${i*250},0)`)
// the `${}` syntax is handy for constructing strings from mathematical expressions
center_g.selectAll('.sm') // select the groups we just created
.selectAll('circle') // one empty selection for each g element we just created!
.data(d => d) // \`data\` will be called on each of our groups, and we pass along parent data arrays!
.enter()
.append('circle')
.attr('class', 'cardots')
center_g.selectAll('.cardots') // all circles, over all groups - this is a flat selection
.attr('cx', d => 4*d.Miles_per_Gallon)
.attr('cy', d => 300-.06*d.Weight_in_lbs)
.attr('r', 4)
.attr('fill', 'none')
.attr('stroke', d3.hcl(30,50,40))
.attr('stroke-width', 2)
.attr('opacity', 0.5)
return svg.node()
}
viewof car_origin_mpg_weight_vis = drawdom(car_origin_mpg_weight,10)
car_origin_mpg_weight_vis
dj_1 = {
let svg = d3.create('svg').attr('width', 800).attr('height', 300)
let center_g = svg.append('g').attr('transform', 'translate(50,50)')
return center_g
.selectAll('g')
.data(cars_by_origin)
}
viewof dj_1_vis = drawjoin(dj_1)
dj_1_vis
dj_2 = {
let svg = d3.create('svg').attr('width', 800).attr('height', 300)
let center_g = svg.append('g').attr('transform', 'translate(50,50)')
center_g
.selectAll('g')
.data(cars_by_origin)
.enter()
.append('g')
.attr('class', 'sm')
.attr('transform', (d,i) => `translate(${i*250},0)`)
return center_g.selectAll('.sm')
.selectAll('circle')
.data(d => d)
}
viewof dj_2_vis = drawjoin(dj_2,10)
dj_2_vis
d3 = require('d3@5')
import {drawdom,drawjoin} from '91007ee9d5fd152b'
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.
