The avatar for @spattana
Sumant Pattanaik
Published
D3 Class
Edited
Feb 23, 2021
Importers
1 star
1
D3 Class
Useful Javascript Array functions.SVG cheat sheetD3: IntroducingScales and AxesUseful D3 Functions for Data handlingWeek 2, TuesdayclipPath and textPathUS Baby NamesData Fetch and Meta dataWeek 3Week 4: Getting Started With InteractionWeb Scraping Table data from HTML file.Fetch Covid-19 data
Week 5
Week 8: HierarchiesCircle PackingTreemapGraph LayoutWeek 6Week 7: TuesdayDrawing Axis in d3 CanvasInteraction in d3 Canvas based Scatter PlotsGeoVisualization using D3TopoJSON and GeoVisualizationMore d3 Scale functions and InterpolationsColor from Wavelength, Correlated Temperature and HTML color pickerHSV and HSL Color ModelsMore on d3 join()Final Projects
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
mutable brushData = ''
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
showCentroid = {
toggleCentroid;
return !this;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const [svgNode, svg] = getSVG();
const mydata = [[0, 100], [110, 100]];
const chart = svg.append("g");
chart
.selectAll("g")
.data(mydata)
.join("g")
.call(myfunction);

const t = svg.transition().duration(2000);
//.ease(d3.easeLinear);
chart
.selectAll("rect")
.transition(t)
.style("fill", "blue")
.transition(t)
.style("fill", "orange");

return svgNode;

function myfunction(container) {
container
.append("rect")
.attr("width", 100)
.attr("height", 100)
.style("fill", d => "red")
.attr("transform", d => {
mutable feedback1 = d;
return `translate(${d[0]},${d[1]})`;
});
}
}
Insert cell
mutable feedback1 = ""
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
sampleKeys
Insert cell
d3.stack().keys(sampleKeys)(sampleData)
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
d3
.arc()
.innerRadius(50)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2).cornerRadius
Insert cell
d3
.arc()
.innerRadius(50)
.outerRadius(100)
.startAngle(0)
.endAngle(Math.PI / 2)()
Insert cell
arcGen = d3
.arc()
.innerRadius(50)
.outerRadius(100)
Insert cell
arcGen({ startAngle: 0, endAngle: Math.PI / 2 })
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
(2 * Math.PI * pieData[2]) / d3.sum(pieData)
Insert cell
(2 * Math.PI * pieData[3]) / d3.sum(pieData) +
(2 * Math.PI * pieData[2]) / d3.sum(pieData)
Insert cell
d3.pie()(pieData)
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
{
const binData = d3.bin()(oldFaithfulData.map(d => d[waiting_OR_eruption]));
const binDomain = binData.map(d => `${d.x0}-${d.x1}`);

const [svgNode, svg] = getSVG();

const xBandScale = d3
.scaleBand()
.domain(binDomain)
.range([0, W])
.padding(0.01);

const xRange = [
xBandScale(binDomain[0]),
xBandScale(binDomain[binDomain.length - 1]) + xBandScale.bandwidth()
];

const xDomain = [binData[0].x0, binData[binData.length - 1].x1];

// return [xDomain, xRange];

const xScale = d3
.scaleLinear()
.domain(xDomain)
.range(xRange);

const yScale = d3
.scaleLinear()
.domain([0, d3.max(binData, d => d.length)])
.nice()
.range([H, 0]);

svg
.append("g")
.style("fill", "steelblue")
.selectAll("rect")
.data(binData)
.join("rect")
.attr("x", d => xBandScale(`${d.x0}-${d.x1}`))
.attr("width", xBandScale.bandwidth())
.attr("y", d => yScale(d.length))
.attr("height", d => yScale(0) - yScale(d.length));

const xBandAxis = g =>
g
.attr("transform", `translate(0,${H})`)
.call(d3.axisBottom(xBandScale).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove());
svg.append("g").call(xBandAxis);

svg
.append("text")
.attr("transform", `translate(${W / 2},${H})`)
.style("text-anchor", "middle")
.attr("dy", 30)
.text(`${waiting_OR_eruption} in minutes`);

const yAxis = g =>
g.call(d3.axisLeft(yScale)).call(g => g.selectAll(".domain").remove());
svg.append("g").call(yAxis);

const areaGenerator = d3
.area()
.y0(yScale(0))
.y1(d => yScale(d.length))
.x(d => xScale((d.x0 + d.x1) / 2))
.curve(d3.curveBasis);
//return areaGenerator(binData);
svg
.append("path")
.datum(binData)
.style("stroke", "black")
.style("fill", "#fcd88a")
.style("opacity", 0.4)
.attr("d", areaGenerator);
return svgNode;
}
Insert cell
md`### Violin Plot using d3.bin`
Insert cell
{
const [svgNode, svg] = getSVG();

const fillScale = d3.scaleOrdinal().range(["#fcd88a", "#cf7c1c", "#93c464"]);

const normal = d3.randomNormal();
const sampleData = d3.range(1000).map(d => normal());

const bin = d3
.bin()
// .thresholds(15)
.domain([-3, 3])
.thresholds([-3, -2.5, -2, -1.5, -1, -0.5, 0, 0.5, 1, 1.5, 2, 2.5, 3]);

const binData = bin(sampleData);

const xScale = d3
.scaleLinear()
.domain([-3, 3])
.range([0, W]);

const yScale = d3
.scaleLinear()
.domain([0, d3.max(binData, d => d.length)])
.nice()
.range([0, H / 2]);

svg
.append("g")
.attr("transform", `translate(0,${H})`)
.call(d3.axisBottom().scale(xScale));

svg.append("g").call(
d3
.axisTop()
.scale(xScale)
.tickSize(-H)
);

const areaGenerator = d3
.area()
.y0(d => -yScale(d.length))
.y1(d => yScale(d.length))
.x(d => xScale((d.x0 + d.x1) / 2))
.curve(d3.curveBasis);

svg
.append("g")
.selectAll("path")
.data([sampleData])
.join("path")
.attr("transform", `translate(0,${H / 2})`)
.style("stroke", "black")
.style("opacity", 0.9)
.style("fill", (d, i) => fillScale(i))
.attr("d", d => areaGenerator(bin(d)));

return svgNode;
}
Insert cell
Symbols=md`### [d3-Symbol](https://github.com/d3/d3-shape#symbols)`
Insert cell
{
const [svgNode, svg] = getSVG({
width: width,
height: 50,
margin: { top: 0, right: 0, bottom: 0, left: 0 }
});

const symbolGenerator = d3.symbol().size(512);

const symbolNames = "Circle Cross Diamond Square Star Triangle Wye".split(
/ /
);

const xScale = d3
.scalePoint()
.domain(symbolNames)
.range([0, width])
.padding(0.25);

svg
.append('g')
.style("fill", "black")
.style("stroke", "red")
.selectAll('path')
.data(symbolNames)
.join('path')
.attr('transform', d => `translate(${xScale(d)},20)`)
.attr('d', d => symbolGenerator.type(d3["symbol" + d])());

svg
.append('g')
.style("fill", "black")
.style("stroke", "red")
.selectAll('circle')
.data(symbolNames)
.join('circle')
.attr('transform', d => `translate(${xScale(d)},20)`)
.attr("r", 3)
.style("fill", "green");

svg
.append('g')
.selectAll('text')
.data(symbolNames)
.join('text')
.attr('transform', d => `translate(${xScale(d)},45)`)
.style("text-anchor", "middle")
.text(d => d);
return svgNode;
}
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
oldFaithfulData = d3.tsv( "https://gist.githubusercontent.com/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9/raw/dcb23e8f6eefdbc4ada97d6eda22b2a4f256c263/faithful.tsv",
d3.autoType
)
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