pixel flipper, data sifter. trying to see what I can while I'm here
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>
`
colors = ["rgb(185,100,198)", "rgb(47,110,116)", "rgb(240,137,51)"]
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>
`
penguins = d3.csv(
"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType
)
scalechart
xdomain = d3.extent(penguins, d => d[xdim])
x = d3.scaleLinear()
.domain(xdomain)
.range([margin, width - margin])
ydomain = d3.extent(penguins, d => d[ydim])
y = d3.scaleLinear()
.domain(ydomain)
.range([height - margin, margin])
margin = 20
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()
}
color = d3.scaleOrdinal()
.range(colors)
xAxis = (svg) => {
svg.call(d3.axisBottom(x))
return svg
}
yAxis = (svg) => {
svg.call(d3.axisLeft(y))
return svg
}
speciesGroups = d3.group(penguins, d => d.species)
species = Array.from(speciesGroups.keys())
{
let svg = d3.create("svg")
.attr("width", width)
.attr("height", 100)
let lg = svg.append("g")
lg.call(legend)
return svg.node()
}
legendSize = 20
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
}
import { aq, op } from '@uwdata/arquero'
aq.from(penguins).view()
dimensions = ["bill_length_mm", "bill_depth_mm", "flipper_length_mm", "body_mass_g"]
aq.from(scatter2).view()
scatter2
selection
colorKey = "species"
import {viewof selection} with {
penguins as data,
dimensions as keys,
color as z,
colorKey as keyz,
height as height
} from "@d3/brushable-parallel-coordinates"
d3 = require("d3@6")
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.
