Published
Edited
Oct 15, 2019
Insert cell
Insert cell
Insert cell
Insert cell
DOM.download(() => serialize(chart), undefined, "Save as SVG")
Insert cell
Insert cell
Insert cell
doNotHighlight = function(){
d3.selectAll(".dot")
.transition()
.duration(200)
.style("fill", "lightgrey")
.attr("r", 5 )
.attr("stroke", "none")
}
Insert cell
x = d3.scaleLinear()
.domain([0,250])
.range([0,550])
Insert cell
y = d3.scaleLinear()
.domain([0,250])
.range([0,550])
Insert cell
color = d3.scaleOrdinal()
.domain(["Max_Kepler", "Eddie_Rosario", "Nelson_Cruz", "Mitch_Garver", "Miguel_Sano", "C_J_Cron", "Jorge_Polanco", "Jonathan_Schoop", "Marwin_Gonzalez", "Jason_Castro", "Byron_Buxton", "Ehire_Adrianza", "Willians_Astudillo", "Luis_Arraez", "Jake_Cave"])
.range(["#0A2F51", "#0C3F5C", "#0F5267", "#116672", "#178678", "#1A9073", "#1D9A6C", "#32A66B", "#48B16D", "#5EBC72", "#74C67A", "#8FD08A", "#ADDAA1", "#C7E4B8", "#DEEDCF"])
Insert cell
width = 550
Insert cell
height = 550
Insert cell
_ = require('lodash')
Insert cell
home_runs = d3.nest()
.key(d => d.player_name_d3)
.rollup(v => v.length)
.entries(data);


Insert cell
home_runs.values()
Insert cell
name_map = Object.assign(new Map(await d3.csv("https://gist.githubusercontent.com/thomasoide/936123fec8a82ae18b4a9c3d8d165051/raw/8d0d56121c413903f4de87c6f976fd64d6087618/twins_hrs_clean.csv", ({player_name_d3, player_name}) => [player_name_d3, player_name])))
Insert cell
name_map.get('Jake_Cave')
Insert cell
home_runs[1].key
Insert cell
d3.values(home_runs)
Insert cell
data_2 = d3.map(home_runs, d => d.player_name_d3).keys(v => v.length)
Insert cell
map = d3.map(data, d => d.player_name_d3).keys()
Insert cell
data = d3.csv("https://gist.githubusercontent.com/thomasoide/936123fec8a82ae18b4a9c3d8d165051/raw/8d0d56121c413903f4de87c6f976fd64d6087618/twins_hrs_clean.csv")
Insert cell
d3 = require("d3@5")
Insert cell
import {serialize} from "@mbostock/saving-svg"
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