Published unlisted
Edited
Jan 15, 2020
1 fork
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let print_it = false;
let svg = DOM.svg(700, 30)
let svg_selection = d3.select(svg)
if(print_it) console.log('svg selection:',svg_selection)
let empty_selection = svg_selection.selectAll('circle')
if(print_it) console.log('empty selection:',empty_selection)
let data_join = empty_selection.data(arr_1)
if(print_it) console.log('data join:',data_join)
let enter_selection = data_join.enter()
if(print_it) console.log('enter selection:',enter_selection)
let circles = enter_selection.append('circle')
if(print_it) console.log('circles:',circles)
return svg
}
Insert cell
Insert cell
Insert cell
{
let print_it = false
let svg = DOM.svg(700, 30)
let svg_selection = d3.select(svg)
let circles = svg_selection.selectAll('circle')
.data(arr_1)
.enter()
.append('circle')
circles
.attr('cx', function(d,i) {return d})
.attr('cy', 15)
.attr('r', 10)
.attr('fill', d3.hcl(40,60,60))
if(print_it) console.log('circles:',circles)
return svg
}
Insert cell
Insert cell
Insert cell
Insert cell
{
let svg = DOM.svg(700, 30)
let svg_selection = d3.select(svg)
let circles = svg_selection.selectAll('circle')
.data(arr_1)
.enter()
.append('circle')
function x_accessor(d,i) {
return d
}
circles
.attr('cx', x_accessor)
.attr('cy', 15)
.attr('r', 10)
.attr('fill', d3.hcl(40,60,60))
svg_selection.selectAll('circle').data(arr_2)
.attr('cx', (d,i) => d).attr('fill', d3.hcl(100,60,60))
return svg
}
Insert cell
Insert cell
arr_3 = [30, 600, 530, 103, 210, 300, 400, 150]
Insert cell
{
let svg = DOM.svg(700, 30)
let svg_selection = d3.select(svg)
let circles = svg_selection.selectAll('circle')
.data(arr_1).enter().append('circle')
.attr('cx', d => d).attr('cy', 15).attr('r', 10)
.attr('fill', d3.hcl(40,60,60))
svg_selection.selectAll('circle')
.data(arr_3).enter().append('circle')
.attr('cx', d => d).attr('cy', 15).attr('r', 10)
.attr('fill', d3.hcl(200,60,60))
return svg
}
Insert cell
Insert cell
{
let svg = DOM.svg(700, 30)
let svg_selection = d3.select(svg)
let circles = svg_selection.selectAll('circle')
.data(arr_1).enter().append('circle')
.attr('cx', d => d).attr('cy', 15).attr('r', 10)
.attr('fill', d3.hcl(40,60,60))
svg_selection.selectAll('circle').data(arr_2).exit().remove()
return svg
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let width = 400, height = 400, pad = {x:40,y:40}
let svg = DOM.svg(width,height)
let x_extents = d3.extent(iris, d => d.sepalWidth)
let x_scale = d3.scaleLinear().domain(x_extents).range([0,width-2*pad.x])
let y_scale = d3.scaleLinear().domain(d3.extent(iris, d => d.sepalLength)).range([height-2*pad.y,0])
let plot_group = d3.select(svg).append('g').attr('transform', 'translate('+pad.x+','+pad.y+')')
plot_group.selectAll('circle').data(iris).enter().append('circle')
.attr('cx', d => x_scale(d.sepalWidth)).attr('cy', d => y_scale(d.sepalLength)).attr('r', 4)
return svg
}
Insert cell
Insert cell
Insert cell
{
let width = 400, height = 400, pad = {x:40,y:40}
let svg = DOM.svg(width,height)
let nested_data = d3.nest()
.key(d => d.variety)
.rollup(d_arr => d3.mean(d_arr, d => d.yield))
.entries(barley)
console.log('nested data',nested_data)
let x_extents = d3.set(barley, d => d.variety).values()
let x_scale = d3.scaleBand().domain(x_extents).range([0,width-2*pad.x]).padding(.1)
let y_scale = d3.scaleLinear().domain([0,d3.max(nested_data, d => d.value)]).range([height-2*pad.y,0])
let plot_group = d3.select(svg).append('g').attr('transform', 'translate('+pad.x+','+pad.y+')')
plot_group.selectAll('rect').data(nested_data).enter().append('rect')
.attr('x', d => x_scale(d.key)).attr('width', x_scale.bandwidth())
.attr('y', d => y_scale(d.value)).attr('height', d => y_scale(0)-y_scale(d.value))
return svg
}
Insert cell
Insert cell
{
let width = 400, height = 400, pad = {x:50,y:50}
let svg = DOM.svg(width,height)
let x_extents = d3.extent(iris, d => d.sepalWidth)
let x_scale = d3.scaleLinear().domain(x_extents).range([0,width-2*pad.x])
let y_scale = d3.scaleLinear().domain(d3.extent(iris, d => d.sepalLength)).range([height-2*pad.y,0])
let plot_group = d3.select(svg).append('g').attr('transform', 'translate('+pad.x+','+pad.y+')')
plot_group.selectAll('circle').data(iris).enter().append('circle')
.attr('cx', d => x_scale(d.sepalWidth)).attr('cy', d => y_scale(d.sepalLength)).attr('r', 4)
plot_group.append('g').attr('transform', 'translate(0,'+y_scale.range()[0]+')').call(d3.axisBottom(x_scale))
plot_group.append('g').call(d3.axisLeft(y_scale))
plot_group.append('text').text('Sepal Width').attr('text-anchor', 'middle')
.attr('x', d3.mean(x_scale.range())).attr('y', y_scale.range()[0]+33)
plot_group.append('text').text('Sepal Length').attr('text-anchor', 'middle')
.attr('transform', 'translate('+(-33)+','+d3.mean(y_scale.range())+') rotate(270)')
return svg
}
Insert cell
Insert cell
{
let width = 400, height = 400, pad = {x:50,y:50}
let svg = DOM.svg(width,height)
let x_extents = d3.extent(iris, d => d.sepalWidth)
let x_scale = d3.scaleLinear().domain(x_extents).range([0,width-2*pad.x])
let y_scale = d3.scaleLinear().domain(d3.extent(iris, d => d.sepalLength)).range([height-2*pad.y,0])
let plot_group = d3.select(svg).append('g').attr('transform', 'translate('+pad.x+','+pad.y+')')
// bound our plot with a rectangle
plot_group.append('rect').attr('width', x_scale.range()[1]).attr('height', y_scale.range()[0])
.attr('fill', 'none').attr('stroke', d3.hcl(0,0,50)).attr('stroke-width', 1)
plot_group.selectAll('circle').data(iris).enter().append('circle')
.attr('cx', d => x_scale(d.sepalWidth)).attr('cy', d => y_scale(d.sepalLength)).attr('r', 4)
.attr('fill', d3.hcl(330,60,50))
plot_group.append('g').attr('id', 'xaxis').attr('transform', 'translate(0,'+y_scale.range()[0]+')').call(d3.axisBottom(x_scale).ticks(5))
plot_group.append('g').attr('id', 'yaxis').call(d3.axisLeft(y_scale).ticks(5))
// get rid of the domains for the x and y axes
plot_group.selectAll('#xaxis,#yaxis').select('.domain').remove()
// tone down the colors
plot_group.selectAll('#xaxis,#yaxis').selectAll('text').attr('fill', d3.hcl(0,0,50))
plot_group.selectAll('#xaxis,#yaxis').selectAll('line').attr('stroke', d3.hcl(0,0,50))
// provide guides for our ticks
plot_group.select('#xaxis').selectAll('.tick').append('line')
.attr('y1', -y_scale.range()[0]).attr('y2', y_scale.range()[1])
.attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5)
plot_group.select('#yaxis').selectAll('.tick').append('line')
.attr('x1', x_scale.range()[0]).attr('x2', x_scale.range()[1])
.attr('stroke', d3.hcl(0,0,70)).attr('stroke-width', .5)
plot_group.append('text').text('Sepal Width').attr('text-anchor', 'middle')
.attr('x', d3.mean(x_scale.range())).attr('y', y_scale.range()[0]+33)
plot_group.append('text').text('Sepal Length').attr('text-anchor', 'middle')
.attr('transform', 'translate('+(-30)+','+d3.mean(y_scale.range())+') rotate(270)')
plot_group.selectAll('circle').raise()
console.log('circle selection:',plot_group.selectAll('circle'))
return svg
}
Insert cell
Insert cell
Insert cell
{
let svg = DOM.svg(500,200)
let my_data = [ [1,2,3], [4,5], [6,7,8], [9,10] ]
let row_scale = d3.scalePoint().domain([0,1,2,3]).range([0,200]).padding(0.4)
let column_scale = d3.scalePoint().domain([0,1,2]).range([0,500]).padding(0.4)
let lum_scale = d3.scaleLinear().domain([1,10]).range([0,90])
let chroma_scale = d3.scaleLinear().domain([1,10]).range([90,10])
d3.select(svg).selectAll('nothing')
.data(my_data)
.enter()
.append('g') // create a group for each item of my_data (each item an array)
.attr('transform', (d,i) => 'translate(0,'+row_scale(i)+')')
.selectAll('moreempty') // parents in this empty selection are now the groups we created
.data(d => d) // data called for _each_ item in parents, namely each group element, which has an array
.enter()
.append('g') // for each item, in each array, of my_data
.attr('transform', (d,i) => 'translate('+column_scale(i)+',0)')
.append('circle') // for each item, in each array, a circle is added as child to the group element
.attr('r', 10)
.attr('fill', d => d3.hcl(30,chroma_scale(d),lum_scale(d)))
let nested_selection = d3.select(svg).selectAll('g').selectAll('circle')
console.log('nested selection:',nested_selection)
return svg
}
Insert cell
Insert cell
{
let height = 800, pad = {x:80,y:40}, plot_w = width-2*pad.x, plot_h = height-2*pad.y
let svg = DOM.svg(width,height)
var max_agg = -1e14;
var nested_data = d3.nest()
.key(d => d.variety)
.key(d => d.site)
.key(d => d.year)
.rollup(d_arr => {
var mean_value = d3.mean(d_arr, d => d.yield);
max_agg = Math.max(max_agg,mean_value);
return mean_value;
})
.entries(barley)
let unique_varieties = d3.set(barley, d => d.variety).values()
let unique_sites = d3.set(barley, d => d.site).values()
let unique_years = d3.set(barley, d => d.year).values()
let variety_scale = d3.scaleBand().domain(unique_varieties).range([0,plot_w]).paddingInner(.15).paddingOuter(.05);
var site_scale = d3.scaleBand().domain(unique_sites).range([0,plot_h]).paddingInner(.25).paddingOuter(.05);
var year_scale = d3.scaleBand().domain(unique_years).range([0,variety_scale.bandwidth()]).paddingInner(0.05);
var yield_scale = d3.scaleLinear().domain([0,max_agg]).range([site_scale.bandwidth(),0])
let plot_group = d3.select(svg).append('g').attr('transform', 'translate('+pad.x+','+pad.y+')')
plot_group.selectAll('cols').data(nested_data).enter()
.append('g').attr('transform', d => 'translate('+variety_scale(d.key)+',0)')
.selectAll('rows').data(d => d.values).enter()
.append('g').attr('transform', d => 'translate(0,'+site_scale(d.key)+')').attr('class', 'cell')
.selectAll('groups').data(d => d.values).enter().append('rect')
.attr('x', d => year_scale(d.key)).attr('width', year_scale.bandwidth())
.attr('y', d => yield_scale(d.value)).attr('height', d => yield_scale(0)-yield_scale(d.value))
.attr('fill', d3.hcl(10,50,50))

plot_group.selectAll('.cell').append('rect').lower()
.attr('width', variety_scale.bandwidth()).attr('height', site_scale.bandwidth())
.attr('fill', d3.hcl(0,0,90))
plot_group.append('g').attr('id', 'yaxis').call(d3.axisLeft(site_scale))
plot_group.append('g').attr('id', 'yaxis').call(d3.axisTop(variety_scale))
plot_group.selectAll('.cell').append('g').attr('class', 'yearaxis')
.attr('transform', 'translate(0,'+yield_scale.range()[0]+')').call(d3.axisBottom(year_scale))
//plot_group.selectAll('.cell').append('g').attr('class', 'yieldaxis').call(d3.axisLeft(year_scale))
plot_group.selectAll('#yaxis,#xaxis,.yearaxis').selectAll('.domain').remove()
plot_group.selectAll('#yaxis,#xaxis').selectAll('line').remove()
return svg
}
Insert cell
Insert cell
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