Published
Edited
Apr 20, 2020
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("path")
.data(series)
.join("path")
.attr("fill", ({key}) => color(key))
.attr("d", area)
.append("title")
.text(({key}) => key);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
data = {
const json = await FileAttachment("history-test.min.json").json();
const jsonData = json.data;
const dates = jsonData.dates.slice(0, numDays);
const continents = d3Array.groups( jsonData.places, d => d.continent );
// console.log(dates);
console.clear();
console.log('................ data block..........');
const d = dates.map(
(date, idx) => {
console.log('............date block');
const continentData = continents.map(
(continent) => {
const total = continent[1].reduce( (acc,cur) => {
return acc + cur.deaths[idx];
}, 0)
console.log('total', total);
return [ continent[0], total ];
}
)
console.log(continentData);
let asObject = {};
continentData.forEach( (d) => {
console.log(d);
asObject[d[0]] = d[1]
}
);
// console.log( asObject );
return Object.assign( { "date" : new Date(date) }, asObject );
// return { date: new Date(date), test: 1, test2: 3 };
}
)
console.log(d);
const cols = Object.keys(d[0]).filter( d => d !== 'date' );
return Object.assign( d, { columns: cols, y: "number of deaths"} )
}
mutable stackOffsetType = d3.stackOffsetNone
keys = data.columns
series = d3.stack()
.keys(data.columns)
.offset(stackOffsetType)
(data)
area = d3.area()
.x(d => x(d.data.date))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y2 = d3.scaleLinear()
.range([height - margin.bottom, margin.top])
y = d3.scaleLinear()
.domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()
.range([height - margin.bottom, margin.top])
color = d3.scaleOrdinal()
.domain(data.columns)
.range(d3.schemeSet3)
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(10, "%"))
.call(g => g.select(".domain").remove())
height = 500
margin = ({top: 10, right: 20, bottom: 20, left: 40})
d3 = require("d3@5")
d3Array = require("d3-array@^2.2")
import {swatches} from "@d3/color-legend"
import {slider} 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.
