Cycling through phases of professionalism and sheer silly
Published
Edited
Jul 27, 2020
1 star
simpleData = new Array(10).fill(undefined)
.map(_ => ({
value: d3.randomInt(1,10)(),
name: randomWords()
}))
width
chart1 = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
return svg.node()
}
margin = ({top: 30, right: 0, bottom: 30, left: 40})
x = d3.scaleBand()
.domain(simpleData.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(simpleData, d => d.value)])
.range([height - margin.bottom, margin.top])
simpleData
xCoordinates = simpleData.map(d => d.value).map(d => y(d))
yCoordinates = simpleData.map(d => d.name).map(d => x(d))
md`For fun, we're going to define another scale for our colors.
https://observablehq.com/@d3/working-with-color`
color = d3.scaleOrdinal()
.domain(simpleData.map(d => d.name))
.range(d3.schemeSet1)
md`Like our coordinates, \`\`d3.schemeSet\`\` allows us to map each data point with a corresponding color.`
simpleData.map(d => d.name).map(d => color(d))
stageTwoSVG = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
svg.append('g')
.style('stroke', 'black')
.selectAll('rect')
.data(simpleData)
.join('rect')
.attr('fill', d => color(d.name))
.attr('x', d => x(d.name))
.attr('y', d => y(d.value))
.attr('height', d => y(0) - y(d.value))
.attr('width', x.bandwidth())
return svg.node()
}
xAxis = g => g
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
.selectAll('.domain').remove()
yAxis = g => g
.attr('transform', `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.selectAll('.domain').remove()
stageThreeSVG = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height])
svg.append('g')
.style('stroke', 'black')
.selectAll('rect')
.data(simpleData)
.join('rect')
.attr('fill', d => color(d.name))
.attr('x', d => x(d.name))
.attr('y', d => y(d.value))
.attr('height', d => y(0) - y(d.value))
.attr('width', x.bandwidth())
xAxis(svg.append('g'))
yAxis(svg.append('g'))
svg.append("text")
.attr("x", (width/2))
.attr("y", margin.top)
.attr("text-anchor", "middle")
.attr("font-size", "24px")
.attr("font-family", "sans-serif")
.text(`Bar Chart Example`)
svg.append("text")
.attr("x", (width/2))
.attr("y", height)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-family", "sans-serif")
.text("x-axis label")
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height/2)
.attr("y", 20)
.attr("text-anchor", "middle")
.attr("font-size", "12px")
.attr("font-family", "sans-serif")
.text("y-axis label")
return svg.node()
}
d3 = require('d3@5', 'd3-random@2')
randomWords = require('https://bundle.run/random-words@1.1.1')
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.
