Professor of Computer Science at Old Dominion University
import {iris} from "@nyuvis/svg-and-d3-basics-practice-solutions"
printTable(iris.slice(0,10))
margin = ({top: 20, bottom: 50, left: 120, right: 120})
visWidth = 400
visHeight = 400
test_x = d3.scaleLinear()
.domain(d3.extent(iris, d => d.sepalLength)).nice()
.range([0, visWidth]);
visualizeTicks(test_x)
test_y = d3.scaleLinear()
.domain(d3.extent(iris, d => d.sepalWidth)).nice()
.range([visHeight, 0]);
visualizeTicks(test_y)
species = new Set(iris.map(d => d.species))
test_color = d3.scaleOrdinal()
.domain(species)
.range(d3.schemeCategory10)
Swatches(test_color)
{
// set up outer svg container
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
// set up scales
const x = d3.scaleLinear()
.domain(d3.extent(iris, d => d.sepalLength)).nice()
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain(d3.extent(iris, d => d.sepalWidth)).nice()
.range([visHeight, 0]);
const color = d3.scaleOrdinal()
.domain(species)
.range(d3.schemeCategory10);
// set up svg group for chart
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// set up axes
const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);
// configure x-axis and label
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis)
.append("text")
.attr("x", visWidth / 2)
.attr("y", 40)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("sepal length (cm)");
// configure y-axis and label
g.append("g")
.call(yAxis)
.append("text")
.attr("x", -40)
.attr("y", visHeight/2)
.attr("fill", "black")
.attr("dominant-baseline", "middle")
.text("sepal width (cm)");
// draw mark for each element in data
g.append('g').selectAll("circle")
.data(iris)
.join("circle")
.attr("cx", d => x(d.sepalLength))
.attr("cy", d => y(d.sepalWidth))
.attr("fill", d => color(d.species))
.attr("r", 3);
return svg.node();
}
import {aq, op} from "@uwdata/arquero"
d3 = require("d3@7")
import {solution} from "@nyuvis/d3-introduction"
import {visualizeTicks} from "@d3/continuous-scales"
import {Swatches} from "@d3/color-legend"
import {printTable} from "@uwdata/data-utilities"
import {procedure} from "@weiglemc/cs725-s22-d3-intro-bar-chart"
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.
