IntroductionJavaScript BasicsData TransformationSVG and D3 BasicsBar Chart Walk-throughSelections and JoinsMapsChoropleth Color SchemesFundamental Graphs with D3Graphical Encoding ExamplesContextual Elements, Aesthetics, and ClaritySmall MultiplesSmall Multiples with Different AxesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Line and Area Charts
<svg width="190" height="160">
<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>
injuriesByMonth
margin = ({top: 30, right: 30, bottom: 20, left: 40})
width
height = 500
dateExtent = d3.extent(injuriesByMonth, d => d.date)
x = d3.scaleTime()
.domain(dateExtent)
.range([margin.left, width - margin.right])
maxInjuries = d3.max(injuriesByMonth, d => d.injuries)
y = d3.scaleLinear()
.domain([0, maxInjuries]).nice()
.range([height - margin.bottom, margin.top]);
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.injuries))
line(injuriesByMonth)
<svg width=${width} height=${height}>
<path
d=${line(injuriesByMonth)}
fill="none"
stroke="steelblue"
/>
</svg>
{
// Setup
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// Create the axes
const xAxis = d3.axisBottom(x)
// change the format of the tick marks to only show month names
.tickFormat(d3.timeFormat('%B'));
svg.append('g')
// move x-axis down to the bottom
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft(y);
svg.append('g')
// move y-axis to the left to account for left margin
.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')
.text('Collision Injuries, 2019');
// Draw the line
// We are only drawing one line, so we can append one path
svg.append('path')
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', line(injuriesByMonth));
return svg.node();
}
area = d3.area()
.x(d => x(d.date))
.y1(d => y(d.injuries))
.y0(d => y(0))
area(injuriesByMonth)
<svg width=${width} height=${height}>
<path
d=${area(injuriesByMonth)}
fill="steelblue"
/>
</svg>
{
// Setup
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
// Create the axes
const xAxis = d3.axisBottom(x)
// change the format of the tick marks to only show month names
.tickFormat(d3.timeFormat('%B'));
svg.append('g')
// move x-axis down to the bottom
.attr('transform', `translate(0,${height - margin.bottom})`)
.call(xAxis);
const yAxis = d3.axisLeft(y);
svg.append('g')
// move y-axis to the left to account for left margin
.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')
.text('Collision Injuries, 2019');
// Draw the area
// we are only drawing one line, so we can append one path
svg.append('path')
.attr('stroke-width', 2)
.attr('fill', 'steelblue')
.attr('d', area(injuriesByMonth));
return svg.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.