JavaScript Basics PracticeJavaScript Basics Practice - SolutionsData Transformation PracticeData Transformation Practice - SolutionsSVG and D3 Basics PracticeSVG and D3 Basics Practice - SolutionsBar Chart PracticeBar Chart Practice - SolutionsLine and Area Charts Practice - SolutionsMaps PracticeMaps Practice - SolutionsMaps Practice II - SolutionsMaps Practice IISmall Multiples PracticeSmall Multiples Practice - SolutionsColor and Clarity PracticeColor and Clarity Practice - SolutionsAnimated Maps PracticeAnimated Maps Practice - SolutionsNetworks PracticeNetworks Practice - SolutionsInteraction PracticeInteraction Practice - SolutionsGraph Design Practice
Line and Area Charts Practice
dataset
boroughToMonthToInjuries = d3.rollups(
dataset,
// for all of the collisions in the same borough and month,
// get the sum of the number of injuries
collisions => d3.sum(collisions, c => c.injured),
// group by borough
d => d.borough,
// then group by month
// d3.timeMonth rounds the date down to the first of the month
d => d3.timeMonth(d.date)
)
dataByBorough = boroughToMonthToInjuries
.map(([borough, months]) => ({
borough: borough,
counts: months
.map(([date, injuries]) => ({date, injuries}))
.sort((a, b) => d3.ascending(a.date, b.date))
}))
margin = ({top: 30, right: 30, bottom: 20, left: 40})
width
height = 500
brooklyn = dataByBorough[0].counts
monthExtent = []
x = d3.scaleTime()
.domain()
.range()
maxInjuries = 0
y = d3.scaleLinear()
.domain().nice()
.range()
boroughs = []
color = d3.scaleOrdinal()
.domain()
.range()
dataByBorough[0].counts[0]
line = d3.line()
.x(d => )
.y(d => )
line(dataByBorough[0].counts)
xAxis = d3.axisBottom(x)
// show the full month name in the tick marks
.tickFormat(d3.timeFormat('%B'))
yAxis = d3.axisLeft(y)
{
// set up
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// draw axes
svg.append('g')
// move x-axis to the bottom
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
svg.append('g')
.attr('transform', `translate(${margin.left})`)
.call(yAxis)
.call(g => g.select('.domain').remove())
// add axis label
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', 5)
.attr('x', 0)
.text('Collision Injuries, 2019');
/* Draw the lines in linesGroup.
- Create one path for each element in dataByBorough.
- Use the line generator to set the "d" attribute.
- Use the color scale to set the "stroke" attribute.
- Set the "fill" attribute to none.
- Set the "stroke-width" attribute to to 2.
When you are setting the attributes
.attr('foo', d => ...)
remember that d is an object that looks like this:
{
borough: "BROOKLYN",
counts: [
{date: 2019-01-01T00:00, injuries: 968},
{date: 2019-02-01T00:00, injuries: 857},
...
]
}
*/
const linesGroup = svg.append('g');
return svg.node();
}
injuriesByMonthAndBorough = d3.rollup(
dataset,
// get the total number of injuries in the collisions array
collisions => d3.sum(collisions, d => d.injured),
// group by month first
d => d3.timeMonth(d.date),
// then by borough
d => d.borough
)
Array.from(injuriesByMonthAndBorough)[0]
stack = d3.stack()
.keys(boroughs)
// define how to get the value for a given borough
.value(([month, boroughtToCount], borough) => boroughtToCount.get(borough))
.order(d3.stackOrderDescending)
// .offset(d3.stackOffsetExpand)
stacked = stack(injuriesByMonthAndBorough)
stacked[1][0]
myArray = {
const numbers = [1, 2, 3];
numbers.message = "hello";
return numbers;
}
myArray[0]
myArray.message
stacked[1]
stacked[1].key
stacked[1][0]
stacked[1][0].data
margin
width
height
x
color
injuriesByMonthAndBorough
stacked
maxTotalInjuries = 0
yStacked = d3.scaleLinear()
.domain().nice()
.range()
stacked[1][0]
area = d3.area()
.x(d => )
.y1(d => )
.y0(d => )
{
// set up
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// axes
const xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat('%B'))
const yAxis = d3.axisLeft(yStacked);
svg.append('g')
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis)
.call(g => g.selectAll('.domain').remove());
svg.append('g')
.attr('transform', `translate(${margin.left})`)
.call(yAxis)
.call(g => g.selectAll('.domain').remove())
.append('text')
.attr('fill', 'black')
.attr('text-anchor', 'start')
.attr('dominant-baseline', 'hanging')
.attr('font-weight', 'bold')
.attr('y', 5)
.attr('x', 0)
.text('Collision Injuries, 2019');
/* Draw the areas in areasGroup.
Create one path for each element in stacked.
- Use the area generator to set the "d" attribute.
- Use the color scale to set the "fill" attribute.
When you are setting the attributes
.attr('foo', d => ...)
remember that d is the data array for one layer.
The borough for that layer is in d.key
*/
const areasGroup = svg.append('g');
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.
