The avatar for @aaizemberg
Ariel Aizemberg
Lic. en Ciencias de la Computación, DC, FCEyN, UBA. Profesor Asociado en el ITBA.
Public
Edited
Nov 7, 2022
Fork of D3.js
3
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg`<svg width="500" height="100">
<rect x="0" y="0" height="100" width="500" fill="white" stroke="black"/>
<circle cx="25" cy="50" r="25" fill="blue"/>
</svg>`
Insert cell
Insert cell
svg`<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`<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`<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`<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`<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`<svg width="500" height="300">
<path d="M 125 100 L 150 100 m 60 0 l 25 0 m -100 100 C 150 250, 200 250, 225 200 M 175 175 c 70 -15, 2 -20, 4.5 -70" stroke="black" fill="transparent"/>
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
svg`<svg width="500" height="100">
<line x1="250" y1="0" x2="250" y2="100" stroke="black"/>
<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`<svg width="300" height="100">
<line x1="0" y1="50" x2="300" y2="50" stroke="black"/>
<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`<svg width="200" height="100">
<text font-family="monospace" y="50">
<tspan fill="red">uno</tspan>
<tspan fill="blue">dos</tspan>
<tspan fill="green">tres</tspan>
</text>
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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') // enter().append('circle')
// set the attributes for the circles based on the data
.attr('fill', 'green')
.attr('cx', d => d.x)
.attr('cy', d => d.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
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('font-weight', 'bold')
.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
Insert cell
Insert cell
Insert cell
linearScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 600]);
Insert cell
linearScale(0);
Insert cell
linearScale(5);
Insert cell
linearScale(10);
Insert cell
Insert cell
colorLienarScale = d3.scaleLinear()
.domain([0, 10])
.range(['black', 'white']);
Insert cell
colorLienarScale(0);
Insert cell
colorLienarScale(5); // returns "rgb(255, 128, 0)"
Insert cell
colorLienarScale(10);
Insert cell
Insert cell
Insert cell
localtime = d3.scaleTime()
Insert cell
Insert cell
domain = localtime.domain()
Insert cell
Insert cell
range = localtime.range()
Insert cell
Insert cell
visualizeTicks(
d3.scaleTime()
.domain([Date.now(), Date.now() + 24 * 60 * 60 * 1000])
)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3.extent(scaleData)
Insert cell
Insert cell
scaleChart(scaleData)
Insert cell
Insert cell
Insert cell
threshold = d3.scaleThreshold()
.domain([10000, 100000])
.range(["white", "pink", "red"])
Insert cell
Insert cell
scaleChart(scaleData, threshold)
Insert cell
Insert cell
Insert cell
Insert cell
quantize = d3.scaleQuantize()
.domain(d3.extent(scaleData)) // pass only the extreme values to a scaleQuantize’s domain
.range(["white", "pink", "red"])
Insert cell
scaleChart(scaleData, quantize)
Insert cell
Insert cell
Insert cell
quantile = d3.scaleQuantile()
.domain(scaleData)
.range(["white", "pink", "red"])
Insert cell
scaleChart(scaleData, quantile)
Insert cell
showScaleGrouping(scaleData, {
scaleQuantile: quantile,
scaleThreshold: threshold,
scaleQuantize: quantize,
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
ordinalColor = d3.scaleOrdinal()
.domain(names)
.range(d3.schemeTableau10)
Insert cell
swatches({ color: ordinalColor})
Insert cell
ordinalColor1 = d3.scaleOrdinal()
.domain(names)
.range(d3.schemePastel1)
Insert cell
swatches({ color: ordinalColor1})
Insert cell
Insert cell
Insert cell
scale = d3.scaleBand()
.domain("ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("").slice(0, domainCardinality))
.range([40, 40 + rangeLength])
.paddingInner(paddingInner)
.paddingOuter(paddingOuter)
.align(align)
.round(enableRounding)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
config = ({
domain: ["A", "B", "C"], // 👀 change me!
padding: 0.5, // 👀
round: true, // 👀
range: [40, Math.min(650, width - 40)] // 👀
})
Insert cell
scaleP = d3.scalePoint()
.domain(config.domain)
.range(config.range)
.padding(config.padding)
.round(config.round)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
line = d3.line()
.x(d => walkX(d.step))
.y(d => walkY(d.value))
Insert cell
Insert cell
Insert cell
Insert cell
line2 = d3.line()
.x(d => walkX(d.step))
.y(d => walkY(d.value))
.curve(d3.curveCardinal);
Insert cell
Insert cell
Insert cell
Insert cell
areaGenerator = d3.area();
Insert cell
Insert cell
pathData = areaGenerator(points);
Insert cell
Insert cell
Insert cell
areaGenerator1 = d3.area().y0(150);
Insert cell
pathData1 = areaGenerator1(points);
Insert cell
Insert cell
Insert cell
yScale = d3.scaleLinear().domain([0, 100]).range([200, 0]);
Insert cell
Insert cell
areaGenerator3 = d3.area()
.x(function(d) {
return d.x;
})
.y0(function(d) {
return yScale(d.low);
})
.y1(function(d) {
return yScale(d.high);
});
Insert cell
area = areaGenerator3(points2);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import {StackedBarChart} from "@d3/stacked-bar-chart"
Insert cell
states = FileAttachment("us-population-state-age.csv").csv({typed: true})
Insert cell
ages = states.columns.slice(1)
Insert cell
stateages = ages.flatMap(age => states.map(d => ({state: d.name, age, population: d[age]}))) // pivot longer
Insert cell
chartStack = StackedBarChart(stateages, {
x: d => d.state,
y: d => d.population / 1e6,
z: d => d.age,
xDomain: d3.groupSort(stateages, D => d3.sum(D, d => -d.population), d => d.state),
yLabel: "↑ Population (millions)",
zDomain: ages,
colors: d3.schemeSpectral[ages.length],
width: 1200,
height: 500
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
population = FileAttachment("population-by-age.csv").csv({typed: true})
Insert cell
Insert cell
Insert cell
chartPie = PieChart(population, {
name: d => d.name,
value: d => d.value,
width,
height: 500
})
Insert cell
chartDonut = DonutChart(population, {
name: d => d.name,
value: d => d.value,
width,
height: 500
})
Insert cell
Insert cell
Insert cell
symbolGenerator = d3.symbol()
.type(d3.symbolStar)
.size(80);
Insert cell
symbolGenerator1 = d3.symbol()
.type(d3.symbolCross)
.size(80);
Insert cell
symbolGenerator2 = d3.symbol()
.type(d3.symbolCircle)
.size(80);
Insert cell
symbolGenerator3 = d3.symbol()
.type(d3.symbolDiamond)
.size(80);
Insert cell
symbolGenerator4 = d3.symbol()
.type(d3.symbolSquare)
.size(80);
Insert cell
symbolGenerator5 = d3.symbol()
.type(d3.symbolTriangle)
.size(80);
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
hierarchy.data // root
Insert cell
hierarchy.children[0].data // root -> País
Insert cell
hierarchy.children[0].children[0].data // root -> País -> Deporte
Insert cell
hierarchy.children[0].children[0].children[0].data // Nodo hoja, muestra información de tupla
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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