Published
Edited
Dec 30, 2021
a = new Array(1e6).fill(0);
b = a.map((val, ix) => ({id: ix}))
c = a.map((val, ix) => ({id: ix, shape: 'square', size: 10.5, color: 'green'}))
dataset=FileAttachment("production.csv").csv()
toSort = Object.keys(dataset)
data=d3.nest()
.key(function(d){return d.name;})
.sortValues(function (a) {
return a;
})
.entries(dataset) ;
data[0].key
results={
const results = [];
var result={};
var i= new Number(0);
var val ={};
for (i;i<data.length;i++) {
var i =0;
val.name=data[i].key;
for(var y=1965;y<=2020;y++){
result[y]=(data[0].values[y]*1)
results.push(result)
var result={};
}
results.push(result)
}
return results;
}
data_year = {
let data_year = data;
for(let i in data){
data_year[i].year = i.data;
data_year[i].num = i.data;
}
}
return data_year;
}
d3 = require("d3@5")
indexBy = require('index-array-by')
Object.keys(data[39].values[0])
data2={
let data2 = data;
for( var i=0;i<2;i++){
var flag=1965;
for(var j = 0 ;j<5;j++){
data2[flag]=data[i].values[0][flag];
flag++;
}
}
return data2;
}
{
const svg = d3.select(DOM.svg(width, height));
const bar = svg.append('g');
bar.append('g')
.call(xAxisBar);
bar.append('g')
.call(yAxisBar);
bar.selectAll('rect')
.data(data)
.join('rect')
.attr('x', d => xBar(0))
.attr('y', (d, i) => yBar(i))
// .attr('width', d => xBar(d.peakDeaths) - xBar(0))
.attr('height', yBar.bandwidth())
.attr('fill', 'red')
.on('mouseover', function(d) {
d3.select(this).attr('fill', 'steelblue');})
.on('mouseout', function(d) {
d3.select(this).attr('fill', 'red');})
// .on('click', function(e, d, i){
// drawLineChart(d);
// });
// const lineChart = svg.append('g')
// .attr('transform', `translate(0,${heightBar+padding})`);
// lineChart.append('g')
// .call(xAxisLine);
// lineChart.append('g')
// .call(yAxisLine);
// lineChart.append('text') //country name
// .attr('id', 'title')
// .attr('x', width - margin.right)
// .attr('y', margin.top +15)
// .attr('text-anchor', 'end')
// .attr('font-size', '15px')
// .attr('font-weight', 'bold')
// .attr('font-family', 'sans-serif');
// function drawLineChart(d) {
// lineChart.selectAll('path').remove(); //remove current line, if one exists
// lineChart.select('#title') //country name
// .text(d.location);
// lineChart.append('path')
// .datum(d['data'])
// .transition()
// .attr('stroke', 'orange')
// .attr('stroke-width', 1.5)
// .attr('fill', 'none')
// .attr('d', line(key));
// }
return svg.node();
}
yAxisBar = g => g
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(yBar).tickFormat(i => data2[i].key).tickSizeOuter(0))
xAxisBar = g => g
.attr('transform', `translate(0,${margin.top})`)
.call(d3.axisTop(xBar))
.call(g => g.select('.domain').remove())
.call(g => g.select('.tick:first-of-type text').clone()
.attr('x', -2)
.attr('y', -20)
.attr('text-anchor', 'start')
.attr('font-weight', 'bold')
.text("死亡总数"))
yBar = d3.scaleBand()
.domain(d3.range(20))
.range([margin.top, heightBar - margin.bottom])
.padding(0.3);
xBar = d3.scaleLinear()
.domain([0, 10000]).nice()
.range([margin.left, width - margin.right]);
yAxisLine = g => g
.attr('id', 'yAxisLine')
.attr("transform", `translate(${margin.left}, 0)`)
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
)
xAxisLine = g => g
.attr("transform", `translate(0, ${heightLine - margin.bottom})`)
line = key => {return d3.line()
.defined(d => !isNaN(d[key]))
}
height = heightBar + heightLine + padding;
padding = 0;
heightBar = 300;
heightLine = 200;
width = 700;
margin = ({top: 30, right: 30, bottom: 30, left: 125});
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.
