Published
Edited
Oct 27, 2020
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mySvg = html`
<svg width=${width} height=200>
<rect x=250 y=50 width=200 height=50 fill="orange"></rect>
<circle cx=100 cy=100 r=50 fill="seagreen"></circle>
<g transform="translate(250,50)rotate(-10)">
<path d="M50,50 L200,50 L300,100" stroke="black" stroke-width=10 fill="none"></path>
<text x="50" y="40">Hello, world!</text>
<g>
</svg>
`
Insert cell
Insert cell
colors = ["rgb(185,100,198)", "rgb(47,110,116)", "rgb(240,137,51)"]
Insert cell
Insert cell
mySvg2 = html`
<svg>
<circle cx=50 cy=50 r=50 fill="${colors[0]}"></circle>
<circle cx=150 cy=50 r=50 fill="${colors[1]}"></circle>
<circle cx=250 cy=50 r=50 fill="${colors[2]}"></circle>
</svg>
`
Insert cell
Insert cell
penguins = d3.csv(
"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType
)
Insert cell
Insert cell
Insert cell
Insert cell
scalechart
Insert cell
Insert cell
xdomain = d3.extent(penguins, d => d[xdim])
Insert cell
x = d3.scaleLinear()
.domain(xdomain)
.range([margin, width - margin])
Insert cell
ydomain = d3.extent(penguins, d => d[ydim])
Insert cell
y = d3.scaleLinear()
.domain(ydomain)
.range([height - margin, margin])
Insert cell
Insert cell
margin = 20
Insert cell
Insert cell
Insert cell
Insert cell
scatter = {
let svg, xg, yg, lg;
if(this) {
svg = d3.select(this)
xg = svg.select(".x-axis")
yg = svg.select(".y-axis")
lg = svg.select(".legend")
} else {
svg = d3.create("svg")
.attr("width", width)
.attr("height", height)
xg = svg.append("g").classed("x-axis", true)
yg = svg.append("g").classed("y-axis", true)
lg = svg.append("g").classed("legend", true)
}
svg.selectAll("circle")
.data(penguins)
.join(enter => {
return enter.append("circle")
.attr("cx", d => x(d[xdim]))
.attr("cy", d => y(d[ydim]))
},
update => {
return update
})
.attr("fill", d => color(d.species))
.attr("r", 5)
.transition()
.duration(2000)
.ease(d3.easeCubic)
.attr("cx", d => x(d[xdim]))
.attr("cy", d => y(d[ydim]))

xg
.attr("transform", `translate(0, ${height - margin})`)
.transition().duration(2000)
.call(xAxis)
yg
.attr("transform", `translate(${margin},0)`)
.transition().duration(2000)
.call(yAxis)
lg
.attr("transform", `translate(${margin + 10}, 0)`)
.call(legend)
return svg.node()
}
Insert cell
color = d3.scaleOrdinal()
.range(colors)
Insert cell
Insert cell
xAxis = (svg) => {
svg.call(d3.axisBottom(x))
return svg
}
Insert cell
yAxis = (svg) => {
svg.call(d3.axisLeft(y))
return svg
}
Insert cell
Insert cell
speciesGroups = d3.group(penguins, d => d.species)
Insert cell
species = Array.from(speciesGroups.keys())
Insert cell
{
let svg = d3.create("svg")
.attr("width", width)
.attr("height", 100)
let lg = svg.append("g")
lg.call(legend)

return svg.node()
}
Insert cell
legendSize = 20
Insert cell
legend = (svg) => {
let leg = svg.selectAll("g")
.data(species)
.join(
enter => {
let g = enter.append("g")
g.append("rect")
.attr("width", legendSize)
.attr("height", legendSize)
g.append("text")
.attr("y", legendSize - 4)
.attr("x", legendSize + 5)
return g
},
update => {
return update
})
.attr("transform", (d,i) => {
return `translate(0, ${20 + i * (legendSize + 5)})`
})
leg.select("rect").attr("fill", d => color(d))
leg.select("text").text(d => d)
return svg
}
Insert cell
Insert cell
Insert cell
import { aq, op } from '@uwdata/arquero'
Insert cell
aq.from(penguins).view()
Insert cell
Insert cell
dimensions = ["bill_length_mm", "bill_depth_mm", "flipper_length_mm", "body_mass_g"]
Insert cell
Insert cell
Insert cell
aq.from(scatter2).view()
Insert cell
scatter2
Insert cell
selection
Insert cell
colorKey = "species"
Insert cell
import {viewof selection} with {
penguins as data,
dimensions as keys,
color as z,
colorKey as keyz,
height as height
} from "@d3/brushable-parallel-coordinates"
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@6")
Insert cell
Insert cell

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.
Learn more