2016 top spotify songs by decade
chart = { const svg = d3.select(DOM.svg(width, height)); svg.append("g") .attr("fill", "#ff0080") .selectAll("rect").data(data).enter().append("rect") .attr("x", d => x(d.name)) .attr("y", d => y(d.value)) .attr("height", d => y(0) - y(d.value)) .attr("width", x.bandwidth()); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); return svg.node(); }
data = [{'name': 1960, 'value': 0}, {'name': 1970, 'value': 5}, {'name': 1980, 'value': 11}, {'name': 1990, 'value': 13}, {'name': 2000, 'value': 24}, {'name': 2010, 'value': 47}]
x = d3.scaleBand() .domain(data.map(d => d.name)) .range([margin.left, width - margin.right]) .padding(0.1)
y = d3.scaleLinear() .domain([0, 61]).nice() .range([height - margin.bottom, margin.top])
xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x) .tickSizeOuter(0).tickValues([1960, 1970, 1980, 1990, 2000, 2010]))
yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove())
height = 350
margin = ({top: 20, right: 0, bottom: 30, left: 40})
d3 = require("d3@5")