I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
d3.geoPath + Canvas + Zoom + PanningTopoJSON Simplifier and Filter attributesHow to add a tooltip in D3d3.stack with d3.groupScatterplot OverplottingTreemap from tabled3.stack with d3.nestD3 data binding v3 to v5D3 Network Visualization PlaygroundReusable charts d3@4Marks and Channels in D3
Intro to D3
playUl = html`
<ul id="target">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>`
selTarget = d3.select("#target")
{
const playUl = html`
<ul id="target">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>`;
// On observable we can select directly to an html element
const selTarget = d3.select(playUl);
// Uncomment some of these lines and re run this cell
// selTarget.style("color", "firebrick");
// selTarget.attr("class", "myList");
// selTarget.html("<li>Only one now</li>");
// selTarget.text("<li>Only one now</li>"); // The <li> doesn't get parsed
return playUl;
}
{
const playUl = html`
<ul id="target">
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>`;
const selTarget = d3.select(playUl);
selTarget.append("li")
.text("Cuatro")
.style("color", "slateblue");
return playUl;
}
{
const div = html`<div>Should show an img<br></div>`;
// Write code to insert an img showing
const url = "https://camo.githubusercontent.com/722a5cc12c7d40231ebeb8ca6facdc8547e2abf7/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667";
// YOUR CODE HERE
return div;
}
myData = [
{ name:"John", age:37, height:193},
{ name:"Mafe", age:36, height:173},
{ name:"Santi", age:9, height:120},
{ name:"David", age:3, height:70},
{ name:"Sonia", age:73, height:150},
{ name:"Vicente", age:73, height:189},
]
{
const ul = d3.select(html`<ul class=""></ul>`);
ul.append("li").text(myData[0].name);
ul.append("li").text(myData[1].name);
ul.append("li").text(myData[2].name);
return ul.node(); // We can get the html element from a single item selection using .node()
}
{
const ul = d3.select(html`<ul></ul>`);
const addLi = (d, i) =>
ul.append("li").text(d.name);
// Calls addLi for each item on the array
myData.forEach(addLi);
return ul.node();
}
{
const ul = d3.select(html`<ul><li>uno</li></ul>`); // create a new ul and select it
const getName = (d) => {
return d.name;
}
const getAge = (d) => d.age + "pt";
// Select all the elements
const lis = ul.selectAll("li")
.data(myData) // data binding
.enter() // The elements that must be created
.append("li")
.text(getName); // This doesn't call getName, it passes it as a parameter
return ul.node();
}
{ // Solve exercise here
const ul = d3.select(html`<ul></ul>`); // create a new ul and select it
const getName = (d) => {
return d.name;
}
// Select all the elements
const lis = ul.selectAll("li")
.data(myData)
.enter() // The elements that must be created
.append("li")
.text(getName); // This doesn't call getName, it passes it as a parameter
return ul.node();
}
baseDiv = html`
<div id="selDiv">
<p>Uno</p>
<p>Dos</p>
</div>
`
selDiv = d3.select(baseDiv)
selPs = selDiv.selectAll("p")
ps = selPs.data(myData)
psEnter = ps.enter()
{
const baseDiv = html`
<div id="selDiv">
<p>Uno</p>
<p>Dos</p>
</div>
`;
const selDiv = d3.select(baseDiv);
const selPs = selDiv.selectAll("p");
const ps = selPs.data(myData);
const psEnter = ps.enter();
// psEnter.append("p")
// .text( d => d.name)
// .style("color", "salmon");
return baseDiv;
}
{
const div = html`
<div>
<div id="counts"></div>
<ul>
${initialElements.split(",").map(e => `<li>${e}</li>`)}
</ul>
</div>
`;
const ps = d3.select(div)
.select("ul")
.selectAll("li")
.data(myData);
const psEnter = ps.enter()
.append("li")
.text( d => d.name)
.style("color", "steelblue");
const psExit = ps.exit()
.style("color", "salmon")
.transition().duration(2000)
.style("opacity", "0")
.remove();
d3.select(div)
.select("#counts")
.append("div")
.html(`
👉 Enter: ${psEnter.nodes().length}
👉 Update: ${ps.nodes().length}
👉 Exit: ${psExit.nodes().length}
`);
return div;
}
addPs = (selection, mData) => {
const ps = selection.selectAll("p")
.data(mData)
.text(d => d.name) ;
const psEnter = ps.enter()
.append("p")
.style("color", "steelblue")
.text(d => d.name);
const psExit = ps.exit().remove();
}
{
const newDiv = d3.select(html`<div><p>old element</p><div>`);
// Exercise
return newDiv.node();
}
{
const addPs = (selection, mData) => {
const ps = selection.selectAll("li")
.data(mData)
.text(d => d.name); // We don't want this redundant call
const psEnter = ps.enter()
.append("li")
.style("color", "steelblue")
.text(d => d.name);
const psExit = ps.exit().remove();
}
const div = html`<ul></ul>`;
addPs(d3.select(div), myData);
return div;
}
drawCirclesNoScale = (selection, mData) => {
const circles = selection.selectAll(".point")
.data(mData);
const circlesEnter = circles.enter()
.append("circle")
.attr("class", "point");
circlesEnter.merge(circles)
.attr("cx", d => d.height)
.attr("cy", d => d.age)
.style("fill", "steelblue")
.attr("r", 5);
circles.exit().remove();
}
circlesWithoutScales = {
const svg = d3.select(html`<svg width="${width}" height="${height}"></svg>`);
drawCirclesNoScale(svg, myData);
return svg.node();
}
md`### Exercise
Create a function that modifies the SVG and adds [text](/#text) tags to show the names next to the circles
`
drawTextNoScale = (selection, mData) => {
// Complete me!
}
circlesAndTextWithoutScales = {
const svg = d3.select(html`<svg width="${width}" height="${height}"></svg>`);
drawCirclesNoScale(svg, myData);
drawTextNoScale(svg, myData);
return svg.node();
}
xScale = d3.scaleLinear()
.domain([0, d3.max(myData, d => d.height) ])
.range([50, width - 100])
yScale = d3.scaleLinear()
.domain([0, d3.max(myData, d => d.age)])
.range([height - 50, 50])
{
const svg = d3.select(DOM.svg(width, height));
const circles = svg.selectAll("circle")
.data(myData)
.enter()
.append("circle")
.attr("cx", d => xScale(d.height))
.attr("cy", d => yScale(d.age))
.style("fill", "steelblue")
.attr("r", 5)
.append("title")
.text(d => d.name)
const text = svg.selectAll("text")
.data(myData)
.enter()
.append("text")
.attr("x", d => xScale(d.height))
.attr("y", d => yScale(d.age) + 10)
.text(d => d.name)
return svg.node();
}
{
const svg = d3.select(DOM.svg(width, height)),
margin = {top:60, bottom:50, left:50, right:10},
iwidth = width - margin.left - margin.right,
iheight = height - margin.top - margin.bottom,
x = d3.scaleLinear()
.domain([
0,
d3.max(myData, d=> d.height)
])
.range([ 0, iwidth]),
y = d3.scaleLinear()
.domain([0, d3.max(myData, d=> d.age) ])
.range([ iheight, 0]);
console.log("iheight", iheight);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`)
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0,${iheight})`);
g.append("g")
.call(d3.axisLeft(y));
const circles = g.selectAll("circle")
.data(myData)
.enter()
.append("circle")
.attr("cx", d => x(d.height))
.attr("cy", d => y(d.age))
.style("fill", "steelblue")
.attr("r", 5)
.append("title")
.text(d => d.name);
const text = g.selectAll(".label")
.data(myData)
.enter()
.append("text")
.attr("class", "label")
.attr("x", d => x(d.height))
.attr("y", d => y(d.age) + 10)
.text(d => d.name);
return svg.node();
}
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.
