The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Guides and Examples
Edited
Jan 5
21 forks
Importers
51 stars
Guides and Examples
IntroductionJavaScript BasicsData Transformation
SVG and D3 Basics
Bar Chart Walk-throughLine and Area ChartsSelections 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
Insert cell
Insert cell
Insert cell
<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
</svg>
Insert cell
Insert cell
<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
<circle cx="100" cy="75" r="25" fill="red"/>
</svg>
Insert cell
Insert cell
<svg width="500" height="100">
<g transform="translate(100, -25)">
<circle cx="25" cy="50" r="25" fill="blue"/>
<circle cx="100" cy="75" r="25" fill="red"/>
</g>
</svg>
Insert cell
Insert cell
<svg width="500" height="100">
<g transform="translate(100, -25)" fill="green">
<circle cx="25" cy="50" r="25" />
<circle cx="100" cy="75" r="25" />
</g>
</svg>
Insert cell
Insert cell
Insert cell
<svg width="500" height="100">
<rect x="10" y="10" width="300" height="20" fill="purple"/>
<rect x="10" y="40" width="250" height="20" fill="brown"/>
<rect x="10" y="70" width="200" height="20" fill="orange"/>
</svg>
Insert cell
Insert cell
<svg width="500" height="100">
<line x1="10" y1="10" x2="500" y2="100" stroke="green" stroke-width="3"/>
<line x1="500" y1="10" x2="10" y2="100" stroke="blue" stroke-width="1" />
</svg>
Insert cell
Insert cell
<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>
Insert cell
Insert cell
Insert cell
Insert cell
<svg width="500" height="100">
<text text-anchor="start" font-family="monospace" x="250" y="15">align start</text>
<text text-anchor="middle" font-family="sans-serif" x="250" y="50">align middle</text>
<text text-anchor="end" font-family="serif" x="250" y="85">align end</text>
</svg>
Insert cell
Insert cell
<svg width="300" height="100">
<line x1="0" x2="300" y1="50" y2="50" stroke="#d3d3d3"/>
<text dominant-baseline="baseline" y="50" x="0">baseline</text>
<text dominant-baseline="middle" y="50" x="90">middle</text>
<text dominant-baseline="hanging" y="50" x="180">hanging</text>
</svg>
Insert cell
Insert cell
<svg width="200" height="100">
<text font-family="monospace" y="50">
<tspan fill="red">one</tspan>
<tspan fill="blue">two</tspan>
<tspan fill="green">three</tspan>
</text>
</svg>
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
<svg width="500" height="100">
<circle cx="25" cy="50" r="25" fill="blue"/>
</svg>
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// add one circle to the svg element and set its attributes
svg.append('circle')
.attr('cx', 25)
.attr('cy', 50)
.attr('r', 25)
.attr('fill', 'blue');
// return the outer SVG element for Observable to render it
return svg.node();
}
Insert cell
<svg width="500" height="100">
<g transform="translate(100, -25)" fill="green">
<circle cx="25" cy="50" r="25" />
<circle cx="100" cy="75" r="25" />
</g>
</svg>
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// add a group to the svg element and translate it
const g = svg.append('g')
.attr('transform', 'translate(100, -25)')
.attr('fill', 'green');
// add a circle to the group and set its attributes
g.append('circle')
.attr('cx', 25)
.attr('cy', 50)
.attr('r', 25);
// add another circle to the group and set its attributes
g.append('circle')
.attr('cx', 100)
.attr('cy', 75)
.attr('r', 25);
// return the outer SVG element for Observable to render it
return svg.node();
}
Insert cell
Insert cell
<svg width="500" height="100">
<rect x="10" y="10" width="300" height="20" fill="purple"/>
<rect x="10" y="40" width="250" height="20" fill="brown"/>
<rect x="10" y="70" width="200" height="20" fill="orange"/>
</svg>
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);
// create one circle for each element in circleInfo
svg.selectAll('circle')
.data(circleInfo)
.join('circle')
// set the attributes for the circles based on the data
.attr('fill', 'green')
.attr('cx', circ => circ.x)
.attr('cy', circ => circ.y)
// this function syntax works too
// it behaves the same as the above arrow functions
.attr('r', function (circ) {
return circ.radius;
});
// return the outer SVG element in order to render it
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
rectInfo = [
{ xPos: 10, yPos: 10, width: 300, height: 20, color: 'purple' },
{ xPos: 10, yPos: 40, width: 250, height: 20, color: 'brown' },
{ xPos: 10, yPos: 70, width: 200, height: 20, color: 'orange' },
]
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
// create our outer SVG element and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 300);
// create one group for each row of circles
const rows = svg.selectAll('g')
.data(circleGrid)
.join('g')
// set the y position and color for each row
.attr('transform', row => `translate(0,${row.y})`)
.attr('fill', row => row.color);
// add one text label to each row
rows.append('text')
.attr('font-family', 'sans-serif')
.attr('y', -30)
.text(d => d.label)
// we need to do another data join to add the circles for each row
rows.selectAll('circle')
// row.circles contains the array circles for the row
.data(row => row.circles)
.join('circle')
.attr('fill', circ => circ.color)
.attr('cx', circ => circ.x)
.attr('r', circ => circ.radius);
// return the outer SVG element in order to render it
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// write your answer here
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
linearScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 100])
Insert cell
linearScale(0)
Insert cell
linearScale(2.5)
Insert cell
linearScale(7.5)
Insert cell
linearScale(10)
Insert cell
Insert cell
fahrenheitToCelsius = d3.scaleLinear()
.domain([32, 212])
.range([0, 100])
Insert cell
fahrenheitToCelsius(32)
Insert cell
fahrenheitToCelsius(75)
Insert cell
fahrenheitToCelsius(212)
Insert cell
Insert cell
scores = [
{name: 'Brian', score: 90},
{name: 'Taylor', score: 80},
{name: 'Kelly', score: 70},
{name: 'Jane', score: 45},
{name: 'Joe', score: 30},
]
Insert cell
Insert cell
Insert cell
Insert cell
maxScore = d3.max(scores, d => d.score)
Insert cell
Insert cell
x = d3.scaleLinear()
.domain([0, maxScore])
.range([0, width])
Insert cell
x(0)
Insert cell
x(maxScore / 2)
Insert cell
x(maxScore)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
y = d3.scaleBand()
.domain(names)
.range([0, height])
.padding(0.2)
Insert cell
Insert cell
y("Brian")
Insert cell
y("Kelly")
Insert cell
y("Joe")
Insert cell
Insert cell
y.bandwidth()
Insert cell
Insert cell
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);

// create one bar for each element in scores
const bars = svg.selectAll('rect')
.data(scores)
.join('rect')
// set the attributes for the rects
.attr('fill', 'steelblue')
.attr('x', 0)
.attr('y', d => 0) // EDIT THIS LINE
.attr('width', d => 0) // EDIT THIS LINE
.attr('height', 0); // EDIT THIS LINE

// return the outer SVG element in order to render it
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ordinalScale = d3.scaleOrdinal()
.domain(['one', 'two', 'three'])
.range([1, 2, 3])
Insert cell
ordinalScale('one')
Insert cell
ordinalScale('two')
Insert cell
ordinalScale('three')
Insert cell
Insert cell
names
Insert cell
d3.schemeCategory10
Insert cell
ordinalColor = d3.scaleOrdinal()
.domain(names)
.range(d3.schemeCategory10)
Insert cell
Insert cell
import {swatches} from "@d3/color-legend"
Insert cell
swatches({color: ordinalColor})
Insert cell
Insert cell
{
// create our outer SVG element with a size of 500x100 and select it
const svg = d3.create('svg')
.attr('width', 500)
.attr('height', 100);

// create one bar for each element in scores
const circles = svg.selectAll('rect')
.data(scores)
.join('rect')
// set the attributes for the rects
.attr('fill', d => 'steelblue') // EDIT THIS LINE
.attr('x', 0)
.attr('y', d => y(d.name))
.attr('width', d => x(d.score))
.attr('height', y.bandwidth())

// return the outer SVG element in order to render it
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more