Public
Edited
Feb 17, 2023
Insert cell
Insert cell
db = {
const client = await DuckDBClient.of({});

client.query(`
CREATE TABLE pref_daily AS
select * from 'https://raw.githubusercontent.com/kj-9/dbt_covid19jp/main/dist/pref_daily.parquet'
`);
return client;
}
Insert cell
db
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
db
WITH stg AS (
select
prefCode,
prefJP,
date,
newCases,
newCases - lag(newCases) OVER (PARTITION BY prefJP ORDER BY date) AS newCasesDiff
from pref_daily
)
select
prefCode,
prefJP,
max(newCases) AS newCasesMax,
list({'date': date, 'value': newCasesDiff}) AS newCases
from stg
where date between '2023-01-25' and '2023-01-31'
group by prefCode, prefJP
order by prefCode
Insert cell
pref_daily[9].newCases.toArray()[0].date
Insert cell
Inputs.table(pref_daily, {
header: {
prefCode: "No.",
prefJP: "Prefecture"
},
width: {
//prefCode: 30
//prefJP: 100
},
align: {
prefJP: "right",
newCasesMax: "left",
flipper_length_mm: "left"
},
format: {
prefJP: (x) => x,
newCasesMax: (x) => drawBar(x),
newCases: (x) => drawLine(x.toArray())
},
rows: 48
//maxWidth: 800
})
Insert cell
drawBar = {
const margin = { top: 0, right: 0, bottom: 0, left: 0 };
const width = 100;
const height = 15;
const x = d3
.scaleLinear()
.domain([0, d3.max(pref_daily, (d) => d.newCasesMax)])
.range([margin.left, width - margin.right])
.interpolate(d3.interpolateRound);

return (value) => {
const svg = d3
.select("svg")
.append("svg")
.attr("width", "100%")
.attr("height", height);

svg.append("rect");
svg
.append("rect")
.attr("x", 0)
.attr("width", x(value) - x(0))
.attr("height", height)
.attr("fill", colFill);

return htl.html`${svg.node()}`;
};
}
Insert cell
drawBar(100000)
Insert cell
drawLine = {
const dimensions = {
width: 6,
height: 0.5,
marginTop: 0
};
const xAccessor = (d) => d.date;
const yAccessor = (d) => d.value;

return (data) => {
const xDomain = d3.extent(data, xAccessor);
const xScale = d3.scaleTime().domain(xDomain).range([0, dimensions.width]);

const yDomain = [0, d3.max(data, yAccessor)];
const yScale = d3
.scaleLinear()
.domain(yDomain)
.range([dimensions.height, dimensions.marginTop]);

const svg = d3.select(
html`<svg viewBox="0 0 ${dimensions.width} ${dimensions.height}"></svg>`
);

const lineGenerator = d3
.line()
.x((d) => xScale(xAccessor(d)))
.y((d) => yScale(yAccessor(d)))
.curve(d3.curveBumpX);

const line = svg
/* Append `path` */
.append("path")
/* Bind the data */
.datum(data)
/* Pass the generated line to the `d` attribute */
.attr("d", lineGenerator)
/* Set some styles */
.attr("stroke", `${colStroke}`)
.attr("stroke-width", 0.1)
.attr("stroke-linejoin", "round")
.attr("fill", "none");

const areaGenerator = d3
.area()
.x((d) => xScale(xAccessor(d)))
.y1((d) => yScale(yAccessor(d)))
.y0(dimensions.height)
.curve(d3.curveBumpX);

const area = svg
.append("path")
.datum(data)
.attr("d", areaGenerator)
.attr("fill", `${colFill}`);
return svg.node();
};
}
Insert cell
drawLine(pref_daily[9].newCases.toArray())
Insert cell
colFill = "hsl(258.1, 100%, 92%)"
Insert cell
colStroke = "hsl(258.1, 100%, 66.9%)"
Insert cell

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