Professor of Computer Science at Old Dominion University
import {dataByBorough, months, boroughs} from "@nyuvis/graphical-encoding-examples"
months
boroughs
printTable(dataByBorough)
printTable(dataByBorough.slice(0,1)[0].counts)
totalWidth = width
totalHeight = 500
margin = ({top: 30, bottom: 20, left: 40, right: 30})
visWidth = totalWidth - margin.left - margin.right
visHeight = totalHeight - margin.top - margin.bottom
test_x = d3.scaleTime()
.domain(d3.extent(months))
.range([0, visWidth])
visualizeTicks(test_x)
maxSingleBoroughInjuries = d3.max(dataByBorough, d => d3.max(d.counts, e => e.injuries))
test_y = d3.scaleLinear()
.domain([0, maxSingleBoroughInjuries]).nice()
.range([visHeight, 0]);
visualizeTicks(test_y)
test_color = d3.scaleOrdinal()
.domain(boroughs)
.range(d3.schemeTableau10)
Swatches(test_color)
{
// set up outer svg container
const svg = d3.create('svg')
.attr('width', totalWidth).attr('height', totalHeight);
// set up scales
const x = d3.scaleTime()
.domain(d3.extent(months))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, maxSingleBoroughInjuries]).nice()
.range([visHeight, 0]);
const color = d3.scaleOrdinal()
.domain(boroughs)
.range(d3.schemeTableau10);
// set up path generator
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries));
// 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).tickFormat(d3.timeFormat('%B'));
const yAxis = d3.axisLeft(y);
// configure x-axis and label
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis);
// configure y-axis and label
g.append('g').call(yAxis)
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', -margin.top + 5)
.attr('x', -margin.left)
.text('Collision Injuries, 2019');
// draw mark for each element in data
g.append('g')
.selectAll('path')
.data(dataByBorough)
.join('path')
.attr('stroke', d => color(d.borough))
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', d => line(d.counts));
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.scaleTime()
.domain(d3.extent(months))
.range([0, visWidth]);
// NEW: scaleBand for separate rows in small multiple view
const row = d3.scaleBand()
.domain(boroughs) // one row for each borough
.range([0, visHeight])
.paddingInner(0.25);
const y = d3.scaleLinear()
.domain([0, maxSingleBoroughInjuries]).nice()
.range([row.bandwidth(), 0]); // NEW: each y is now height of a row
const color = d3.scaleOrdinal()
.domain(boroughs)
.range(d3.schemeTableau10);
// set up path generator
const area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.injuries))
.y0(d => y(0));
// set up svg group for the chart
const g = svg.append("g")
.attr('transform', `translate(${margin.left}, ${margin.top})`);
// NEW set up svg groups for each row
const rows = g.append('g')
.selectAll('g')
.data(dataByBorough)
.join('g')
.attr('transform', d => `translate(0, ${row(d.borough)})`)
.attr('fill', d => color(d.borough))
// set up axes
const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%B'));
const yAxis = d3.axisLeft(y).ticks(5);
// configure x-axis and label
g.append('g')
.attr('transform', `translate(0, ${visHeight})`)
.call(xAxis);
// configure y-axis and label
// NEW: each row will have its own y-axis
rows.append('g')
.attr('class', 'y-axis') // apply a class so that we can select it later
.call(yAxis)
.call(g => g.select('.domain').remove()); // remove the axis line
rows.append('text')
.text(d => d.borough)
.attr('font-size', 12)
.attr('fill', 'black')
.attr('font-family', 'sans-serif')
.attr('y', 10)
.attr('x', 5);
g.select('.y-axis')
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'middle')
.attr('y', -10)
.attr('x', -10)
.text('Injured Count');
// append path to each group
rows.append('path')
.attr('d', d => area(d.counts));
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 {printTable} from "@uwdata/data-utilities"
import {procedure} from "@weiglemc/cs725-s22-d3-intro-bar-chart"
import {Legend, Swatches} from "@d3/color-legend"
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.
