The end-to-end solution for building and hosting better data apps, dashboards, and reports.
data = d3.csv(
"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType // this will automatically convert the CSV text into numbers and dates as appropriate
) // d3.csv() returns a JavaScript Promise, which the notebook cell displays when it resolves
Inputs.table(data)
myScale = d3.scaleLinear()
.domain([0, 10000]) // the domain is the "input", based on the data
.range([100, 700]) // the range is the "output", usually pixels or some visual property
viewof value = Inputs.range([0, 10000], { step: 100 })
myScale(value) // as you change the slider, this value will change too
d3.min(data, d => d.flipper_length_mm)
d3.max(data, d => d.flipper_length_mm)
d3.extent(data, d => d.flipper_length_mm)
// Type your code here
xScale = d3.scaleLinear()
// this should change once you've set the domain and range of your scale
xScale(data[0].bill_length_mm)
yScale = d3.scaleLinear()
.domain(d3.extent(data, d => d.bill_depth_mm))
.range([20, 380])
{
let svg = d3.create("svg")
.attr("width", 640)
.attr("height", 400)
svg.selectAll("circle")
.data([1,2,3])
.join("circle")
.attr("cx", d => 100 + d * 150)
.attr("cy", 200)
.attr("r", 50)
return svg.node()
}
// Type your code here
species = _.uniqBy(data, d => d.species).map(d => d.species)
colorScale = d3.scaleOrdinal()
.domain(species)
// let's use the 3 colors from the Palmer project graphics
.range([
"rgb(185,100,198)",
"rgb(47,110,116)",
"rgb(240,137,51)"
])
swatches({ color: colorScale })
// Type your code here
{
let svg = d3.create("svg").attr("width", width).attr("height", 40)
let g = svg.append("g").attr("transform", "translate(20,0)")
let xAxis = d3.axisBottom(xScale) // this sets up the axis component
//.ticks(5) // you can customize it by chaining options here
xAxis(g) // this renders SVG elements into the "g" container
return svg.node()
}
// Type your code here
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.
