Professor of Computer Science at Old Dominion University
Public
Edited
Feb 6, 2023
Paused
1 fork
Importers
import {data} from "@nyuvis/bar-chart-walk-through"
printTable(data)
totalWidth = width // width of entire chart (same as width of Observable cell)
totalHeight = 400 // height of entire chart
// more room at left and bottom for axis markers and labels
margin = ({top: 20, bottom: 45, left: 75, right: 10})
visWidth = totalWidth - margin.left - margin.right
visHeight = totalHeight - margin.top - margin.bottom
{
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// IMPT: to access the margin variable inside translate, must use ` `, not ' ' or " "
// annotations to illustrate effect of transform
g.append("rect").attr("x", 0).attr("y", 0).attr("width", visWidth).attr("height",visHeight)
.attr("fill", "lightgray");
g.append("circle").attr("cx", 0).attr("cy", 0).attr("r", 2).attr("fill", "red");
g.append("text").attr("x", 0).attr("y", 0).text("(0,0)");
return svg.node();
}
test_y = d3.scaleBand()
.domain(data.map(d => d.country))
.range([0, visHeight])
.padding(0.2)
visualizeTicks(test_y)
test_y("China")
test_y("Mexico")
test_x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.population)]).nice()
.range([0, visWidth])
visualizeTicks(test_x)
format = d3.format('~s')
visualizeTicks(test_x, [10, '~s'])
{
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);
// NEW: move scales setup inside vis cell
const x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.population)]).nice()
.range([0, visWidth]);
const y = d3.scaleBand()
.domain(data.map(d => d.country))
.range([0, visHeight])
.padding(0.2);
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// NEW: add in our data, binding to rect
g.selectAll('rect')
.data(data)
.join('rect')
.attr('x', 0) // each bar starts at the same x position
.attr('y', d => y(d.country))
.attr('width', d => x(d.population))
.attr('height', y.bandwidth())
.attr('fill', 'steelblue');
return svg.node();
}
{
// set up outer svg container
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);
// set up scales
const x = d3.scaleLinear()
.domain([0, d3.max(data, d => d.population)]).nice()
.range([0, visWidth]);
const y = d3.scaleBand()
.domain(data.map(d => d.country))
.range([0, visHeight])
.padding(0.2);
// set up svg group for chart
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// NEW: set up axes
const xAxis = d3.axisBottom(x).tickFormat(format);
const yAxis = d3.axisLeft(y);
// set up y-axis and label (no label)
g.append('g').call(yAxis);
// set up x-axis and label
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
.append('text')
.attr('fill', 'black')
.attr('x', visWidth / 2)
.attr('y', 40)
.text("Population");
// draw mark for each element in data
g.selectAll('rect')
.data(data)
.join('rect')
.attr('x', 0)
.attr('y', d => y(d.country))
.attr('width', d => x(d.population))
.attr('height', y.bandwidth())
.attr('fill', 'steelblue');
return svg.node();
}
d3 = require("d3@7")
import {visualizeTicks, visualizeScale} from "@d3/continuous-scales"
import {printTable} from "@uwdata/data-utilities"
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.
