Published unlisted
Edited
Sep 10, 2020
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let x = 5.5
return x
}
Insert cell
{
let x = 'This is a String'
return x
}
Insert cell
Insert cell
Insert cell
{
let obj = {x:3.4, y:5.8, name:'Hello'}
return obj
}
Insert cell
{
let obj = {x:3.4, y:5.8, other_obj : {p:5.4, title:'inside here'} }
obj.new_prob = 'new_prop!'
let string_var = 'dynamic_prop'
obj[string_var] = 'dynamic_val'
return obj
}
Insert cell
Insert cell
{
let arr = [3, 5, 'not a number?', {title:'indeed this is an object', val:4}]
arr.push(8)
return arr
}
Insert cell
Insert cell
{
let nums = [4, 5, 6, 7]
for(let i = 0; i < nums.length; i++) {
nums[i] = nums[i] + 2
}
return nums
}
Insert cell
Insert cell
{
let obj = {x:3, y:4, z:5}
for(let prop in obj)
obj[prop]+=2
return obj
}
Insert cell
Insert cell
{
let root = {name:'root', is_leaf:false}
root.children = [{name:'child1', is_leaf:true}, {name:'child2', is_leaf:false}]
let non_leaf = root.children[1]
non_leaf.children = [{name:'grandchild1', is_leaf:true}, {name:'grandchild2', is_leaf:true}]
return root
}
Insert cell
Insert cell
Insert cell
{
function foo(a,b) {
return a+b
}
return foo(4,3)
}
Insert cell
Insert cell
{
function my_foo(a,b) {
return b-a
}
let obj = {x:3.4, y:5.8}
obj.new_foo = my_foo
return obj.new_foo(3,2)
}
Insert cell
Insert cell
{
function my_foo(a,b) {
return b-a + this.x+this.y
}
let obj = {x:3.4, y:5.8}
obj.new_foo = my_foo
return obj.new_foo(3,2)
}
Insert cell
Insert cell
{
let obj = {x:3.4, y:5.8}
obj.new_foo = function(a,b) {
return b-a + this.x+this.y
}
return obj.new_foo(3,2)
}
Insert cell
Insert cell
Insert cell
{
let obj = {x:3.4, y:5.8}
obj.new_foo = (a,b) => b-a + this.x+this.y
return obj.new_foo(3,2)
}
Insert cell
Insert cell
Insert cell
{
let our_obj = {a:2, b:4}
our_obj.calling_func = function(foo) {
this.c = foo(this.a,this.b)
}
our_obj.calling_func((x,y) => x*y)
return our_obj.c
}
Insert cell
Insert cell
{
let v = 3
let my_func = (a) => 2*a+v

return my_func(4)
}
Insert cell
Insert cell
{
let all_funcs = []
for(let i = 0; i < 3; i++) {
let v = 3+i
let my_func = (a) => 2*a+v
all_funcs.push(my_func)
}

return [all_funcs[0](4), all_funcs[1](4), all_funcs[2](4)]
}
Insert cell
Insert cell
{
let outer_func = (a) => {
let my_var = 2*a
let inner_func = (b) => {
let inner_var = my_var+b+a
return inner_var
}
return inner_func
}
let func_instance = outer_func(4)

return func_instance(2)
}
Insert cell
Insert cell
{
// think of this as a way to handle events for data - one function is created for each data item, so we identify arg1 and arg2 as a single data item
let event_manager = (arg1,arg2) => {
let events = []
let add_event = (event) => {
events.push(event)
}
let process_events = () => {
let event_results = []
for(let edx = 0; edx < events.length; edx++) {
let next_event = events[edx]
let event_result = next_event(arg1,arg2)
event_results.push(event_result)
}
return event_results
}
return {push_event:add_event, process_it_all:process_events}
}
// some concrete data items, and their corresponding event managers
let some_funcs = [event_manager(3,5), event_manager(2,4)]
// this is where we specify what to do when an event is triggered (our so-called event handlers)
let some_data = [1, 2, 3]
for(let idx = 0; idx < some_data.length; idx++) {
let the_data = some_data[idx]
let event_handler = (x,y) => x*y+the_data
for(let fdx = 0; fdx < some_funcs.length; fdx++) {
let the_func = some_funcs[fdx]
the_func.push_event(event_handler)
}
}
// think of this as the triggering of the event - we do not call this explicitly, it is called for us
let all_results = []
for(let fdx = 0; fdx < some_funcs.length; fdx++)
all_results.push(some_funcs[fdx].process_it_all())
return all_results
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
let my_arr = [1, 4, 6]
my_arr.my_map = function(user_func) {
let new_arr = []
for(let i = 0; i < this.length; i++)
new_arr.push(user_func(this[i]))
return new_arr
}
let mapped_arr = my_arr.map(d => d+1)
return mapped_arr
}
Insert cell
Insert cell
{
let arr = [{a:0,b:'item1'},{a:5,b:'item2'},{a:8,b:'item3'}]
let just_the_strings = arr.map((d,i) => d.b)
return just_the_strings
}
Insert cell
Insert cell
{
let arr = [{a:0,b:'item1'},{a:5,b:'item2'},{a:8,b:'item3'}]
let large_arr = arr.filter((d,i) => d.a >= 5).map(d => d.b)
return large_arr
}
Insert cell
Insert cell
new_arr = other_arr.map(d => d*d*d)
Insert cell
Insert cell
my_arr = {
let the_arr = [1, 3, 4, 6, 7, 11, 13]
return the_arr.map(d => 2*d)
}
Insert cell
Insert cell
my_arr
Insert cell
Insert cell
other_arr = my_arr.filter(d => d < 10)
Insert cell
Insert cell
Insert cell
Insert cell
foo = (a,b) => {
let two_a = 2*a, two_b = 2*b
return two_a+two_b
}
Insert cell
foo(3,4)
Insert cell
Insert cell
foo_2 = (a,b) => {
let two_a = 2*a, two_b = 2*b
return other_arr.map(d => d+two_a+two_b)
}
Insert cell
my_foo = foo_2(3,4)
Insert cell
Insert cell
Insert cell
Insert cell
cars_data = FileAttachment("cars.json").json()
Insert cell
Insert cell
cars_data[0]
Insert cell
Insert cell
property_0 = 'Miles_per_Gallon'
Insert cell
property_1 = 'Horsepower'
Insert cell
Insert cell
prop_extents = {
let the_extents = {}
the_extents[property_0] = d3.extent(cars_data, d => d[property_0])
the_extents[property_1] = d3.extent(cars_data, d => d[property_1])
return the_extents
}
Insert cell
Insert cell
prop_0_scale = d3.scaleLinear().domain(prop_extents[property_0]).range([0,400])
Insert cell
prop_1_scale = d3.scaleLinear().domain(prop_extents[property_1]).range([0,400])
Insert cell
Insert cell
scatterplot = {
let svg = d3.create('svg') // SVG node, wrapped in a selection
.attr('width', 500) // width of our drawing canvas
.attr('height', 500) // height of our drawing canvas
let center_g = svg.append('g') // append a single group element to our SVG
.attr('transform', 'translate(50,50)') // translate it a bit
center_g.selectAll('circle') // Returns an empty selection, whose parent is the group element
.data(cars_data) // Data join on our cars array: update and exit selections empty ...
.enter() // ... but the enter selection has all of our data, and placeholder elements for creation!
.append('circle') // We replace placeholder elements with circles, joining data with graphics! 👍
.attr('cx', d => prop_0_scale(d[property_0])) // x-coordinate of a circle: map property 0 to pixel units
.attr('cy', d => 400-prop_1_scale(d[property_1])) // y-coordinate of a circle: map property 1 to pixel units
.attr('r', 3.5) // radius of a circle
.attr('fill', d3.hcl(200,25,70)) // the fill color of the circle
.attr('stroke', d3.hcl(0,0,40)) // the stroke color of the circle
.attr('stroke-width', 0.5) // thickness of the stroke
return svg.node() // returning our SVG node will draw all of its children elements!
}
Insert cell
Insert cell
Insert cell
d3 = require('d3@5')
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