top20allRaw = FileAttachment("teestt-areras@1.csv").csv({ typed: true })
top20allNew = top20allRaw.map(d => {
const root = d.root;
const parse = d3.timeParse('%Y');
const counts = Object.entries(d)
.filter(([key, value]) => key !== 'root')
.map(([date, count]) => ({ date, count }));
return { root, counts};
})
md`### Dimensions`
dimensions = {
const margin = { top: 30, bottom: 20, right: 10, left: 30 };
const visWidth = width - margin.left - margin.right;
const visHeight = 1000 - margin.top - margin.bottom;
return { margin, visWidth, visHeight };
}
numRows = 6
row = d3.scaleBand()
.domain(d3.range(numRows))
.range([0, dimensions.visHeight])
.padding(0.3)
numCols = 4
col = d3.scaleBand()
.domain(d3.range(numCols))
.range([0, dimensions.visWidth])
.padding(0.2)
maxCount = d3.max(top20allNew, root => d3.max(root.counts, d => d.count))
y = d3.scaleLinear()
.domain([0, maxCount])
.range([row.bandwidth(), 0])
dateExtent = d3.extent(top20allNew[0].counts, d => d.date)
x = d3.scaleTime()
.domain(dateExtent)
.range([0, col.bandwidth()])
md`### Generator`
area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.count))
.y0(d => y(0))
.defined(d => d.count !== '-')
yAxis = d3.axisLeft(y)
.tickSizeOuter(0)
.ticks(4)
xAxis = d3.axisBottom(x)
.tickSizeOuter(0)
.ticks(4)
viz = {
// the usual set up
const {visWidth, visHeight, margin} = dimensions;
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append('g')
.attr('font-family', 'sans-serif')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// title
g.append('text')
.text(`Top 20 Keywords Video Youtube`)
// add a group for each cell and position it according to its row and column
const cells = g.selectAll('g')
.data(top20allNew)
.join('g')
.attr('transform', (d, i) => {
/* i is the current index
in this case, the value of i will be from 0-25. */
// get the row index and column index for this cell
const r = Math.floor(i / numCols);
const c = i % numCols;
// use the scales to get the x, y coordinates
return `translate(${col(c)}, ${row(r)})`;
});
// add the area to each cell
cells.append('path')
.attr('d', d => area(d.counts))
.attr('fill', 'blue');
// add the state label to each cell
cells.append('text')
.attr('font-size', 14)
.attr('font-weight', 600)
.attr('dominant-baseline', 'middle')
.attr('x', 10)
.attr('y', y(400))
.text(d => d.root)
// Axes
// add x axes to each chart
const xAxes = cells.append('g')
// move it to the bottom
.attr('transform', d => `translate(0,${row.bandwidth()})`)
.call(xAxis)
// remove the baseline
.call(g => g.select('.domain').remove())
// change the tick color to gray
.call(g => g.selectAll('line').attr('stroke', '#c0c0c0'));
const yAxes = cells.append('g')
.call(yAxis)
// remove the baseline
.call(g => g.select('.domain').remove())
// change the tick color to gray
.call(g => g.selectAll('line').attr('stroke', '#c0c0c0'));
return svg.node();
}
md`# Word Count Top 10 per Year`
chart = {
const svg = d3.create("svg")
.attr("viewBox", [-50, 0, width + margin.left + margin.right, height + margin.bottom + margin.top]);
const myGroups = [...new Set(data.map(d => d.year))]
const myVars = [...new Set(data.map(d => d.root))]
const xScale = d3.scaleBand()
.domain(myGroups)
.range([0, width])
.padding(0.02);
const yScale = d3.scaleBand()
.domain(myVars)
.range([height, 0])
.padding(0.02);
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg
.append("g")
.attr("class", "axis x-axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "axis-label")
.attr("x", "40%")
.attr("dy", "3em")
.text("Age")
.attr("font-size", "12")
.attr("fill", "black")
svg
.append("g")
.attr("class", "axis y-axis")
.call(yAxis)
.append("text")
.attr("class", "axis-label")
.attr("y", "50%") //in the middle of line
.attr("dx", "-3em")
.attr("writing-mode", "vertical-rl")
.text("Variables")
.attr("font-size", "12")
.attr("fill", "black")
// color scale
var myColor = d3.scaleLinear()
.domain([0, 100])
.range(['#fff', 'blue'])
svg
.selectAll()
.data(data, function (d) { return d.year + ':' + d.Count_root; })
.enter()
.append("rect")
.attr("x", d => xScale(d.group))
.attr("y", d => yScale(d.variable))
.attr("width", xScale.bandwidth())
.attr("height", yScale.bandwidth())
.style("fill", d => myColor)
return svg.node();
}
myWords = [...new Set(data.map(d => d.root))]
myValues = [...new Set(data.map(d => d.Count_root))]
height = 600
width = 1024
margin = ({ top: 30, right: 30, bottom: 40, left: 80 })
data = d3.csvParse(await FileAttachment("top10.csv").text(), d3.autoType)
color_scale = d3.scaleLinear()
.domain([0, 100])
.range(['#fff', 'blue'])
d3 = require("d3")
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.
