Professor of Computer Science at Old Dominion University
Public
Edited
Feb 6, 2023
Paused
4 forks
import {injuriesByMonth} from "@nyuvis/lines-and-maps"
printTable(injuriesByMonth)
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(injuriesByMonth, d => d.date))
.range([0, visWidth])
visualizeTicks(test_x)
test_y = d3.scaleLinear()
.domain([0, d3.max(injuriesByMonth, d => d.injuries)]).nice()
.range([visHeight, 0]);
visualizeTicks(test_y)
{
// 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(injuriesByMonth, d => d.date))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, d3.max(injuriesByMonth, d => d.injuries)]).nice()
.range([visHeight, 0]);
// NEW: set up path generator
const line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries));
// set up svg group for the 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
// SINGLE LINE CHART: only drawing 1 line, so can append without doing select/data/join
g.append('path')
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', line(injuriesByMonth)); // NEW: specify the path generator
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(injuriesByMonth, d => d.date))
.range([0, visWidth]);
const y = d3.scaleLinear()
.domain([0, d3.max(injuriesByMonth, d => d.injuries)]).nice()
.range([visHeight, 0]);
// NEW: 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 marks
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
// SINGLE AREA CHART: only drawing 1 area, so can append without doing select/data/join
g.append('path')
.attr('fill', 'steelblue')
.attr('d', area(injuriesByMonth)); // NEW: specify the path generator
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"
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.
