projection = d3.geoAlbers()
.fitSize([visWidth, visHeight], usaGeo)
getName = feature => feature.properties.NAME
path = d3.geoPath().projection(projection)
{
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("transform", `translate(${margin.left}, ${margin.top})`);
// draw map
g.selectAll("path")
.data(usaGeo.features)
.join("path")
.attr("d", path)
.attr("fill", d => color(stateToRate[getName(d)] ) )
.attr("stroke", "white");
return svg.node();
}
usaGeo.features[0]
{
// set up
const margin = {top: 50, right: 120, bottom: 50 , left: 120};
const svg = d3.create('svg')
.attr('width', ajWidth + margin.left + margin.right)
.attr('height', ajHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// draw circles
const circlesGroup = g.append('g');
circlesGroup.selectAll("rect")
.data(unemploymentWithGrid)
.join("rect")
.attr("y", d => ajY(d.col))
.attr("x", d => ajX(d.row))
.attr("width", maxRadius*2)
.attr("height",maxRadius*2)
.attr("fill", d => color(d.rate))
for (let i = 0; i < unemploymentWithGrid.length; i++){
var item = unemploymentWithGrid[i]
g.append("text")
.text(stateToAbbr[item.state])
.attr("x", ajX(item.row))
.attr("y", ajY(item.col)+maxRadius+5)
.attr('font-family', 'sans-serif')
.attr('font-size', '15px')
}
// legend
//g.append("g").call(sizeLegend);
return svg.node();
}
stateToAbbr
{
// set up
const margin = {top: 50, right: 120, bottom: 50 , left: 120};
const svg = d3.create('svg')
.attr('width', ajWidth + margin.left + margin.right)
.attr('height', ajHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// draw circles
const circlesGroup = g.append('g');
circlesGroup.selectAll("circle")
.data(unemploymentWithGrid)
.join("circle")
.attr("cy", d => ajY(d.col))
.attr("cx", d => ajX(d.row))
.attr("r", d => radius(d.rate))
.attr("fill", d => color(d.rate))
for (let i = 0; i < unemploymentWithGrid.length; i++){
var item = unemploymentWithGrid[i]
g.append("text")
.text(item.state)
.attr("x", ajX(item.row)-maxRadius/2)
.attr("y", ajY(item.col)+maxRadius+5)
.attr('font-family', 'sans-serif')
.attr('font-size', '9px')
}
// legend
//g.append("g").call(sizeLegend);
return svg.node();
}
yVal = d3.scaleLinear()
.domain([d3.max(unemployment, d => d.rate), 0])
.range([0,visHeight])
state = unemployment.map(d => stateToAbbr[d.state])
//.map(d => stateToAbbr[d])
xVal = d3.scaleBand()
.domain(state)
.range([0,visWidth])
.padding(0.2)
yAxis = d3.axisLeft(yVal)
xAxis = d3.axisBottom(xVal)
yAxisGridDot = d3.axisLeft(yVal).tickSize(-visWidth).tickFormat('')
//Step 2: Draw scatter plot
scatterplot = {
const svg = d3.create('svg')
.attr('width', totalWidth)
// we could also put visHeight + margin.top + margin.bottom instead of totalHeight
.attr('height', totalHeight);
// append a group element and move it left and down to create space
// for the left and top margins
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
g.append('g')
.attr('class', 'axisGrid')
.call(yAxisGridDot);
// draw the circles in circlesGroup
const circlesGroup = g.append('g');
circlesGroup.selectAll("circle")
.data(unemployment)
.join("circle")
.attr("cx", d => xVal(stateToAbbr[d.state]))
.attr("cy", d => yVal(d.rate))
.attr("fill", d => "lightblue")
.attr("r", 5);
// create and add axes
//y-axis
g.append('g')
.call(yAxis)
.call(g => g.select('.domain').remove());
//x-axis
g.append('g')
// we have to move this group down to the bottom of the vis
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
// .call(g => g.select('.domain').remove())
return svg.node();
}
unemploymentWithGrid
row = [...new Set(unemploymentWithGrid.map(d => d.row))]
column = [...new Set(unemploymentWithGrid.map(d => d.col))]
cellsize = 70
ajHeight = column.length*cellsize
ajWidth = row.length*cellsize
ajY = d3.scalePoint()
.domain(column)
.range([0, ajHeight])
ajX = d3.scalePoint()
.domain(row)
.range([0, ajWidth])
maxRadius = cellsize/2 - 4
radius = d3.scaleSqrt()
.domain([0, extent[1]]).nice()
.range([0, maxRadius])
matrix = { // set up
const margin = {top: 30, right: 120, bottom: 30 , left: 120};
const svg = d3.create('svg')
.attr('width', ajWidth + margin.left + margin.right)
.attr('height', ajHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// draw circles
const circlesGroup = g.append('g');
circlesGroup.selectAll("circle")
.data(unemploymentWithGrid)
.join("circle")
.attr("cy", d => ajY(d.col))
.attr("cx", d => ajX(d.row))
.attr("r", d => radius(d.rate))
.attr("fill", "lightblue")
for (let i = 0; i < unemploymentWithGrid.length; i++){
var item = unemploymentWithGrid[i]
g.append("text")
.text(item.state)
.attr("x", ajX(item.row)-maxRadius/2)
.attr("y", ajY(item.col)+maxRadius)
.attr('font-family', 'sans-serif')
.attr('font-size', '8px')
}
// legend
//g.append("g").call(sizeLegend);
return svg.node();
}
totalWidth = width
totalHeight = 500
margin = ({top: 20, bottom: 45, left: 75, right: 10})
visWidth = totalWidth - margin.left - margin.right
visHeight = totalHeight - margin.top - margin.bottom
x = d3.scaleBand()
.domain(state)
.range([0, visWidth])
.padding(0.2)
y = d3.scaleLinear()
.domain([extent[0] - 1, extent[1]])
.range([0, visHeight])
yAxisBar = d3.axisLeft(d3.scaleLinear()
.domain([extent[0] - 1, extent[1]])
.range([visHeight, 0]))
yAxisGrid = d3.axisLeft(d3.scaleLinear()
.domain([extent[0] - 1, extent[1]])
.range([visHeight, 0])).tickSize(-visWidth).tickFormat('')
xAxisBar = d3.axisBottom(x)
{
// create and select an svg element that is the size of the bars plus margins
const svg = d3.create('svg')
.attr('width', totalWidth)
// we could also put visHeight + margin.top + margin.bottom instead of totalHeight
.attr('height', totalHeight);
// append a group element and move it left and down to create space
// for the left and top margins
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
g.append('g')
.attr('class', 'axisGrid')
.call(yAxisGrid);
// bind our data to rectangles
g.selectAll('rect')
.data(unemployment)
.join('rect')
// set attributes for each bar
.attr('x', d => x(stateToAbbr[d.state])) // each bar starts at the same x position
.attr('y', d => y(extent[1]) - y(d.rate)) // pass the name to the y-scale to get y position
.attr('width', x.bandwidth()) // pass the score to the x-scale to get width of the bar
.attr('height', d => y(d.rate)) // get the width of each band in the scale
.attr('fill', 'lightblue');
// add a group for the y-axis
g.append('g')
.call(yAxisBar)
// remove the baseline
.call(g => g.select('.domain').remove());
// add a group for the x-axis
g.append('g')
// we have to move this group down to the bottom of the vis
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxisBar)
.call(g => g.select('.domain').remove())
// add a label for the x-axis
.append('text')
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('x', visWidth / 2)
.attr('y', 40)
.text("States");
return svg.node();
}
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.
