pixel flipper, data sifter. trying to see what I can while I'm here
x = [1,2,3,4,5]
mySvg = html`
<svg width=${width} height=300 view-box="0 0 954 300" style="border: 1px solid black;">
<g transform="translate(100, 50)">
<rect x=0 y=0 width=100 height=100 fill="orange"></rect>
<circle cx=0 cy=0 r=50 fill=none stroke=black></circle>
<path d="M100,100 L500,100 L600,200Z" fill="seagreen" fill-opacity="0.5" stroke="black"></path>
</g>
</svg>
`
width
colors = ["rgb(185,100,198)", "rgb(47,110,116)", "rgb(240,137,51)"]
mySvg2 = html`
<svg width=${width} height=300>
<g transform="translate(100, 100)">
<rect x=0 y=0 width=100 height=100 fill="orange"></rect>
<circle cx=0 cy=0 r=50 fill=none stroke=black></circle>
</g>
<text x=250 y=100 >Hello, World</text>
</svg>
`
penguins = d3.csv(
"https://raw.githubusercontent.com/allisonhorst/palmerpenguins/master/inst/extdata/penguins.csv",
d3.autoType
)
myScale = d3.scaleLinear()
.domain([0, 10000])
.range([100, 700])
myScale(0)
height = 300
data = penguins.filter(d => d[xdim] !== "NA")
{
for(let i = 0; i < penguins.length; i++) {
let d = penguins[i]
// console.log(d.flipper_length_mm)
}
}
xExtent = d3.extent(data, function(d) { return d[xdim] })
xScale = d3.scaleLinear()
.domain(xExtent)
.range([30, width - 30])
yExtent = d3.extent(data, d => d[ydim])
yScale = d3.scaleLinear()
.domain(yExtent)
.range([height - 30, 30])
bySpecies = d3.group(data, d => d.species)
species = Array.from(bySpecies.keys())
Array.from(bySpecies.values())
colorScale("Gentoo")
colorScale = d3.scaleOrdinal()
.domain(species)
.range(colors)
import {select} from "@jashkenas/inputs"
penguins[0]
dimensions = ["bill_length_mm", "bill_depth_mm", "flipper_length_mm", "body_mass_g"]
xdim
scatter = {
let svg, xg, yg, cg
if(this) {
// reference existing things here
svg = d3.select(this)
xg = svg.select("g.x-axis")
yg = svg.select("g.y-axis")
cg = svg.select("g.circles")
} else {
// create things here
svg = d3.create("svg")
xg = svg.append("g").classed("x-axis", true)
yg = svg.append("g").classed("y-axis", true)
cg = svg.append("g").classed("circles", true)
}
svg
.attr("width", width)
.attr("height", height)
xg.attr("transform", `translate(0, ${height - 30})`)
xAxis(xg)
yg.attr("transform", `translate(30, 0)`)
yAxis(yg)
function enter(selection) {
return selection.append("circle")
.attr("cx", d => xScale(d[xdim]))
.attr("cy", d => yScale(d[ydim]))
.attr("fill", d => colorScale(d.species))
.attr("r", 1)
}
function update(selection) {
return selection
}
let circles = cg.selectAll("circle")
.data(data)
// .join("circle")
.join(enter, update)
.transition()
.duration(3000)
.attr("cx", d => xScale(d[xdim]))
.attr("cy", d => yScale(d[ydim]))
.attr("fill", d => colorScale(d.species))
.attr("r", 5)
return svg.node()
}
`
<html>
<svg>
<g class="circles"></g>
<g class="x-axis"></g>
</svg>
<script>
let svg = d3.select("svg")
function render() {
xScale = d3.scaleLinear()
.domain()
.range([0, width])
svg.selectAll("circles")
.data(penguins)
.join("circles")
...
}
render()
dropdown.on("select", render)
window.on("resize", render)
</script>
`
xAxis = (svg) => {
svg.call(d3.axisBottom(xScale))
return svg
}
yAxis = (svg) => {
svg.call(d3.axisLeft(yScale))
return svg
}
md`### Legend
`
scatter2
aq.from(scatter2).view()
import { aq, op } from '@uwdata/arquero'
d3 = require("d3@6")
emmet = require('https://bundle.run/emmet@2.1.4')
emmet.parseMarkup("div.class")
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.
