The avatar for @aaronkyle
Aaron Kyle Dennis
Social development practitioner. Trying to understand our world.
Published unlisted
Edited
Aug 13, 2021
Fork of Communities v.1
1
Insert cell
md`# Communities v.1`
Insert cell
file = FileAttachment("A_observ.csv")

Insert cell
d3.csvParse(await file.text())
Insert cell
data = FileAttachment("A_observ.csv").csv()
Insert cell
Added in parent
data_typed = d3.csvParse(await FileAttachment("A_observ.csv").text(), d3.autoType)
Insert cell
viewof filter = Inputs.search(data)
Insert cell
b = data.City
Insert cell
viewof Cities = Inputs.select([data.City], {label: "City", filter: [data.City]})
Insert cell
Inputs.table(data)
Insert cell
Inputs.table(data, {columns: ["City", "CSM"], sort: "CSM", reverse: true, required: false})
Insert cell
columns = data.columns
Insert cell
Insert cell
Inputs.table(search, {columns})
Insert cell
function sparkbar(max) {
return x => htl.html`<div style="
background: steelblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
color: white;">${x.toLocaleString("en")}`
}
Insert cell
Inputs.table(data, {
format: {
CSM: sparkbar(d3.max(data, d => d.culmen_length_mm)),
State: sparkbar(d3.max(data, d => d.culmen_depth_mm)),
City: sparkbar(d3.max(data, d => d.flipper_length_mm)),
Community: sparkbar(d3.max(data, d => d.body_mass_g)),
Owner: x => x.toUpperCase()
}
})
Insert cell
viewof city = Inputs.select(data.map(d => d.city), {label: "Sport", sort: true, unique: true})
Insert cell
vegalite = require('@observablehq/vega-lite')
Insert cell
data.map(d => d.count)
Insert cell
import { vl } from "@vega/vega-lite-api"
Insert cell
Added in fork
csv_local = await file.csv()
Insert cell
Added in fork
csv_local.length
Insert cell
Added in fork
csv_local[0].CSM
Insert cell
Added in fork
import {file as file_import} from '@carterv/comms'
Insert cell
cv = require('@carterv/comms')
Insert cell
vegalite({
data: { values: data },
mark: "bar",
autosize: "fit",
width: width,
encoding: {
x: {
field: "CSM",
type: "ordinal"
},
y: {
field: d3.count("CSM"),
type: "quantitative"
}
}
})
Insert cell
Added in parent
data
Insert cell
Added in parent
d3.count("CSM")
Insert cell
Added in parent
data_typed
Insert cell
Added in parent
revised = vegalite({
  data: { values: data_typed },
  mark: "bar",
  autosize: "fit",
  width: width,
  encoding: {
    x: {
      field: "CSM",
      type: "ordinal"
    },
    y: {
      field: "Community Id",
      type: "quantitative"
    }
  }
})
Insert cell
vegalite({
data: { values: data },
mark: "bar",
autosize: "fit",
encoding: {
x: {
field: "CSM",
type: "ordinal"
},
y: {
field: "Community",
type: "quantitative"
}
}
})
Insert cell
dates = {
const data = await FileAttachment("A_observ.csv").csv();
const parseDate = d3.utcParse("%Y-%m-%d %H:%M:%S");
for (const d of data) d["Date Registered"] = parseDate(d["Date Registered"]);
return data;
}
Insert cell
margin = ({top: 30, right: 0, bottom: 30, left: 40})
Insert cell
height = 500
Insert cell
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.count)]).nice()
.range([height - margin.bottom, margin.top])
Insert cell
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, data.format))
.call(g => g.select(".domain").remove())
.call(g => g.append("text")
.attr("x", -margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(data.y))
Insert cell
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickFormat(i => data[i].CSM).tickSizeOuter(0))
Insert cell
color = "steelblue"
Insert cell
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);

svg.append("g")
.attr("fill", color)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());

svg.append("g")
.call(xAxis);

svg.append("g")
.call(yAxis);

return svg.node();
}
Insert cell