Published
Edited
Dec 19, 2020
chart = {
const svg = d3.create("svg")
.attr("height", 412)
.attr("width", 800)
let g = svg.selectAll('rect')
.data( data )
.enter()
g.append('rect')
.attr('x', margin)
.attr('y', margin)
.attr('width', d => scale(d['w']))
.attr('height', d => scale(d['h']))
.attr('stroke', 'black')
.attr('fill', 'none')
.attr('stroke-width', '1')
.attr('opacity', d => d.percent / 50)
g.append('text')
.attr('x', d => scale(d['w'])+margin-2)
.attr('y', d => scale(d['h'])+margin-2)
.attr('font-size', '8px')
.attr('text-anchor', 'end')
.text(d => `${d.w}×${d.h}:${d.percent}%`)
return svg.node()
}
margin = 10
scale = d3.scaleLinear()
.domain(d3.extent(data.map(d=>d.w)))
.range([0, 800-2*margin])
data = d3.csvParse(await FileAttachment("res.csv").text(), d3.autoType)
.map(d => {
let split = d['Screen Resolution'].split('x')
return {
w: Number(split[0]),
h: Number(split[1]),
percent: d['Market Share Perc. (Oct 2019 - Oct 2020)'],
...d
}})
d3 = require('d3@5')
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.
