Data Scientist, Author, DataVis, Educator, Speaker, Public Service @ClintonBrownley
https://cbrownley.github.io
Public
Edited
Jan 16
1 fork
html`<svg width="128" height="128" fill="none" stroke="black">${
d3.range(8, 128, 8).map(radius => `<circle r="${radius}"></circle>`)
}</svg>`
d3.range(8, 128, 8)
d3.range(128, 0, -8)
d3.create("svg")
.attr("width", 128)
.attr("height", 128)
.call(svg => svg.selectAll("circle")
.data(d3.range(128, 0, -8))
.join("circle")
.attr("fill", d3.scaleSequential(d3.interpolateViridis).domain([0, 128]))
.attr("r", d => d))
.node()
html`<svg width="50" height="50"></svg>`
html`<svg width="500" height="50">
<rect x="0" y="0" width="500" height="50"/>
</svg>`
{
const svg = html`<svg viewBox="0 0 500 50"></svg>`;
const selSvg = d3.select(svg);
// D3 code goes here
selSvg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", 500)
.attr("height", 50)
.attr("fill", "steelblue");
return svg;
}
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
// D3 code goes here
selSvg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", '50%')
.attr("height", '50%')
.attr("fill", "steelblue");
return selSvg.node();
}
html`<svg width="500" height="50">
<circle cx="250" cy="25" r="25" />
</svg>`
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
// D3 code goes here
selSvg
.append("circle")
.attr("cx", 150)
.attr("cy", 25)
.attr("r", "25")
.attr("fill", "steelblue");
return selSvg.node();
}
html`<svg width="500" height="50">
<ellipse cx="250" cy="25" rx="100" ry="25"/>
</svg>`
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
// D3 code goes here
selSvg
.append("ellipse")
.attr("cx", 250)
.attr("cy", 25)
.attr("rx", 100)
.attr("ry", 25)
.attr("fill", "steelblue");
return selSvg.node();
}
html`<svg width="500" height="50">
<line x1="1" y1="1" x2="499" y2="49" stroke="steelblue" stroke-width="5"/>
</svg>`
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
// D3 code goes here
selSvg
.append("line")
.attr("x1", 10)
.attr("x2", 490)
.attr("y1", 10)
.attr("y2", 40)
.attr("stroke", "steelblue")
.attr("stroke-width", 3);
return selSvg.node();
}
html`<svg width="500" height="50">
<text x="250" y="25">Easy-peasy</text>
</svg>`
html`<svg width="500" height="50">
<text x="25%" y="25">Easy-peasy1</text>
<text x="50%" y="25">Easy-peasy2</text>
<text x="75%" y="25">Easy-peasy3</text>
</svg>`
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
let mytext = "Easy-peasy";
// D3 code goes here
selSvg
.append("text")
.attr("x", "25%")
.attr("y", "50%")
.text(`${mytext}`)
.attr("font-family", "Ariel, Helvetica, sans serif")
.attr("font-weight", "bold")
.attr("fill", "steelblue");
return selSvg.node();
}
html`<svg width="500" height="50">
<text x="250" y="25" font-family="Helvetica" font-size="25" fill="grey">Easy-peasy</text>
</svg>`
html`<svg width="500" height="100">
<circle cx="250" cy="50" r="25" fill="yellow" stroke="orange" stroke-width="5"/>
</svg>`
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
// D3 code goes here
selSvg
.append("circle")
.attr("cx", 250)
.attr("cy", 25)
.attr("r", '20')
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", 5);
return selSvg.node();
}
html`<svg width="500" height="50">
<rect x="0" y="0" width="30" height="30" fill="purple"/>
<rect x="20" y="5" width="30" height="30" fill="blue"/>
<rect x="40" y="10" width="30" height="30" fill="green"/>
<rect x="60" y="15" width="30" height="30" fill="yellow"/>
<rect x="80" y="20" width="30" height="30" fill="red"/>
</svg>`
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
const data = [
[0, 0, "purple"],
[20, 5, "blue"],
[40, 10, "green"],
[60, 15, "yellow"],
[80, 20, "red"]
];
const rects = selSvg
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d) => d[0])
.attr("y", (d) => d[1])
.attr("width", 30)
.attr("height", 30)
.attr("fill", (d) => d[2]);
return selSvg.node();
}
html`<svg width="500" height="50">
<circle cx="25" cy="25" r="25" fill="rgba(128, 0, 128, 1.0)"/>
<circle cx="50" cy="25" r="25" fill="rgba(0, 0, 255, 0.75)"/>
<circle cx="75" cy="25" r="25" fill="rgba(0, 255, 0, 0.5)"/>
<circle cx="100" cy="25" r="25" fill="rgba(255, 255, 0, 0.25)"/>
<circle cx="125" cy="25" r="25" fill="rgba(255, 0, 0, 0.1)"/>
</svg>`
{
const selSvg = d3.create("svg").attr("viewBox", [0, 0, 500, 50]);
const data = [
[25, 25, 25, "rgba(128, 0, 128, 1.0)"],
[50, 25, 25, "rgba(0, 0, 255, 0.75)"],
[75, 25, 25, "rgba(0, 255, 0, 0.5)"],
[100, 25, 25, "rgba(255, 255, 0, 0.25)"],
[125, 25, 25, "rgba(255, 0, 0, 0.1)"]
];
const circles = selSvg
.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => d[0])
.attr("cy", d => d[1])
.attr("r", d => d[2])
.attr("fill", d => d[3]);
return selSvg.node();
}
dataset = [5, 10, 15, 20, 25]
html`<svg width="20" height="20">${dataset.map(d => `<p>${d}</p>`)}</svg>`
d3.create("p")
.call(svg =>
svg
.selectAll("p")
.data(dataset)
.join("p")
.text(d => d)
)
.node()
d3
.create("p")
.call(svg =>
svg
.selectAll("p")
.data(dataset)
.join("p")
.text(d => "I can count up to " + d)
.style("color", d => (d > 15 ? "red" : "black"))
)
.node()
numbers = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, 33])
.attr("font-family", "sans-serif")
.attr("font-size", 14)
.style("display", "block");
svg
.selectAll("text")
.data(dataset)
.join("text")
.attr("x", (d, i) => i * 40)
.attr("y", 17)
.attr("dy", "0.35em")
.text(d => d);
return svg.node();
}
height = width * 0.6
d3 = require('d3@6')
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.
