Published
Edited
Aug 11, 2021
tooltip = d3
.select('body')
.append('div')
.style('position', 'absolute')
.style('z-index', '10')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('border-radius', '4px')
.style('color', '#fff');
sortedData = data2.sort(function(a,b){
return b.value - a.value; });
{
switch (order) {
case "name-ascending": data2.sort((a, b) => a.LOCATION.localeCompare(b.LOCATION)); break;
case "value-ascending": data2.sort((a, b) => a.Value - b.Value); break;
case "value-descending": data2.sort((a, b) => b.Value - a.Value); break;
}
x.domain(data2.map(d => d.LOCATION));
chart.update();
return order;
}
data = (await require("@observablehq/alphabet"))
.map(({letter, percentage}) => ({name: letter, value: percentage}))
data3 = d3.csvParse(await FileAttachment("DP_LIVE_06042021203914841_Full_a3.csv").text(), d3.autoType)
dd1
data2 = data3.filter(function(d) {
if( d.TIME == dd1 && d.SUBJECT == groupingAttribute )
{
return d;
}
});
x = d3.scaleBand()
.domain(data2.map(d => d.LOCATION))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(data2, d => d.Value)]).nice()
.range([height - margin.bottom, margin.top])
yTitle = g => g.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("y", 10)
.text("2019 Education Indicators ")
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`,`rotate(-15)`)
.call(d3.axisBottom(x)
.tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
height = 500
margin = ({top: 30, right: 0, bottom: 100, left: 40})
d3 = require("d3@5")
import {Radio} from "@observablehq/inputs"
import {select} from "@jashkenas/inputs"
import {radio} from "@jashkenas/inputs"
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.
