The avatar for @spattana
Sumant Pattanaik
Published
D3 Class
Edited
Feb 17, 2021
Fork of Week 2, Tuesday
Importers
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 data
Week 3
Week 4: Getting Started With InteractionWeb Scraping Table data from HTML file.Fetch Covid-19 dataWeek 5Week 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
movingAverage(d3.range(10), 3)
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
{
const [svgNode, svg] = getSVG();
const pointScale = d3
.scalePoint()
.domain(randomData.map(d => d[0]))
.range([0, H])
.padding(0.3);

const valueScale = d3
.scaleLinear()
.domain(d3.extent(randomData, d => d[1]))
.range([0, W - pointScale.step()])
.nice();
const lines = svg
.append("g")
.selectAll("g")
.data(randomData)
.join("g");
lines
.append("line")
.attr("x1", 0)
.attr("x2", d => valueScale(d[1]))
.attr("y1", d => pointScale(d[0]))
.attr("y2", d => pointScale(d[0]))
.style("stroke", "steelblue");

lines
.append("g")
.attr(
"transform",
d =>
`translate(${valueScale(d[1])}, ${pointScale(d[0]) -
pointScale.step() / 2})`
)
.style("fill", "steelblue")
.call(drawTweeterIcon, pointScale.step());
svg.append("g").call(d3.axisLeft().scale(pointScale));
svg
.append("g")
.call(d3.axisTop().scale(valueScale))
.select(".domain")
.remove();
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
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
{
const [svgNode, svg] = getSVG();
const data = olympicData.slice(0, 10);

const countries = data.map(d => d.Country);

const countryScale = d3
.scaleBand()
.domain(countries)
.range([0, W])
.padding(0.2);

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

const yScale = d3
.scaleLinear()
.domain([0, 1050])
.range([H, 0])
.nice();
const medals = ["Gold", "Silver", "Bronze"];
const colorScale = d3
.scaleOrdinal()
.domain(medals)
.range(["#FFD700", "#C0C0C0", "#cd7f32"]);

const xScale = d3
.scaleBand()
.domain(medals)
.range([0, countryScale.bandwidth()])
.padding(0.05);

svg.append("g").call(d3.axisLeft().scale(yScale));

svg
.append("g")
.selectAll("g")
.data(data)
.join("g")
.attr("transform", d => `translate(${countryScale(d.Country)},0)`)
.selectAll("rect")
.data(d => [["Gold", d.Gold], ["Silver", d.Silver], ["Bronze", d.Bronze]])
.join("rect")
.attr("x", d => xScale(d[0]))
.attr("y", d => yScale(d[1]))
.attr("width", d => xScale.bandwidth())
.attr("height", d => H - yScale(d[1]))
.style("fill", d => colorScale(d[0]));
return svgNode;
}
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