Published
Edited
Sep 8, 2020
html`
<svg width=${width} height=100>
<circle r=50 cx=50 cy=50 fill="red"></circle>
<rect height=100 width=100 x=120 y=0 fill="steelblue"></rect>
<path transform="translate(240,0)" d="M0,100 L50,0 L100,100" fill="green"></path>
</svg>
`
{
const svgContainer = d3.select(svg)
// clean out our previous render
svgContainer.selectAll('*').remove()
const margin = { top: 50, bottom: 100, left: 100, right: 50 }
const innerWidth = width - margin.left - margin.right
const innerHeight = height - margin.top - margin.bottom
const xValue = d => d.nrOfNominations
const yValue = d => d.imdbRating
const xAxisLabel = "Number of Nominations"
const yAxisLabel = "IMDB Rating"
const scaleX = d3.scaleLinear()
.domain(d3.extent(data, xValue))
.range([0, innerWidth])
const scaleY = d3.scaleLinear()
.domain(d3.extent(data, yValue))
.range([innerHeight, 0])
.nice()
const g = svgContainer.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`)
const xAxis = d3.axisBottom(scaleX)
.ticks(10)
.tickPadding(10)
const yAxis = d3.axisLeft(scaleY)
.tickPadding(10)
.tickFormat(d3.format(".1f"))
const xAxisG = svgContainer.append('g')
.call(xAxis)
.attr('transform', `translate(${margin.left},${margin.top + innerHeight})`)
const yAxisG = svgContainer.append('g')
.call(yAxis)
.attr('transform', `translate(${margin.left},${margin.top})`)
g.append('text')
.attr('class', 'axis-label')
.attr('x', innerWidth / 2)
.attr('y', innerHeight)
.attr('dy', 50)
.attr('fill', 'black')
.text(xAxisLabel)
g.append('text')
.attr('class', 'axis-label')
.attr('x', -innerHeight / 2)
.attr('y', - 50)
.attr('transform', 'rotate(-90)')
.attr('fill', 'black')
.text(yAxisLabel)
const circles = g.selectAll('circle')
.data(data).enter().append('circle')
.attr('r', 5)
.attr('cx', d => scaleX(xValue(d)))
.attr('cy', d => scaleY(yValue(d)))
.attr('fill', 'steelblue')
}
html`
<style>
.tick {
font-size: 1.5em;
}
.axis-label {
text-anchor: middle;
}
</style>
`
data = d3.csvParse(imdb, d => {
const autoTypedData = d3.autoType(d)
autoTypedData.year = new Date(autoTypedData.year, 0, 1)
return autoTypedData
}).filter(
d => (d.nrOfNominations < 1000) && (typeof d.imdbRating === 'number')
)
d3
width = 954
height = 400
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.
