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
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.