chart = {
const margin = { top: 30, right: 30, bottom: 30, left: 30 };
const width = 500 - margin.left - margin.right;
const height = 100 - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("background-color", "yellow");
const group = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
group.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', width)
.attr('height', height)
.style('fill', 'black');
return svg.node();
}
table = {
const columns = ['Name', 'Country', 'Ship Class', 'Builder', 'Laid Down'];
const table = d3.create('table');
const thead = table.append('thead');
const tbody = table.append('tbody');
// Header row
thead.append('tr')
.selectAll('th')
.data(columns)
.enter()
.append('th')
.text(d => d);
// Data rows
const rows = tbody.selectAll('tr')
.data(data_cleaned)
.enter()
.append('tr')
.style('color', d => d.Country === 'Japan' ? 'red' : 'blue'); // Color coding
rows.selectAll('td')
.data(d => columns.map(column => d[column]))
.enter()
.append('td')
.text(d => d);
return table.node();
}
histogram = {
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 500 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const group = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const values = data_cleaned.map(d => d.Displacement);
const bins = d3.bin().thresholds(20)(values);
const yScale = d3.scaleLinear()
.domain([0, d3.max(bins, d => d.length)])
.range([height, 0]);
const xScale = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([0, width]);
group.selectAll('rect')
.data(bins)
.enter()
.append('rect')
.attr('x', d => xScale(d.x0) + 1)
.attr('width', d => xScale(d.x1) - xScale(d.x0) - 1)
.attr('y', d => yScale(d.length))
.attr('height', d => height - yScale(d.length))
.attr('fill', 'steelblue');
group.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(xScale));
group.append('g')
.call(d3.axisLeft(yScale));
return svg.node();
}
scatterPlot = {
const margin = { top: 20, right: 30, bottom: 30, left: 40 };
const width = 500 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;
const svg = d3.create('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
const group = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const xScale = d3.scaleLinear()
.domain(d3.extent(data_cleaned, d => d.Length))
.range([0, width]);
const yScale = d3.scaleLinear()
.domain(d3.extent(data_cleaned, d => d.Beam))
.range([height, 0]);
const colorScale = d3.scaleOrdinal()
.domain(['Battleship', 'Carrier', 'Cruiser'])
.range(['red', 'lightblue', 'green']);
group.selectAll('circle')
.data(data_cleaned)
.enter()
.append('circle')
.attr('cx', d => xScale(d.Length))
.attr('cy', d => yScale(d.Beam))
.attr('r', 5)
.attr('fill', d => colorScale(d.Type));
group.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(xScale));
group.append('g')
.call(d3.axisLeft(yScale));
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.
