d3 = require('d3')
drawingCircles = [3, 5, 5, 6, 15, 18]
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> height - (i*20))
.attr("r", (d,i)=> d)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> height - (i*20))
.attr("r", (d,i)=> d)
.style("fill", "purple")
.style("stroke", "black")
.style("stroke-width", 3) // reminder, this means 3 pixels
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> height - (i*20))
.attr("r", (d,i)=> d)
.style("fill", "purple")
.style("stroke", "black")
.style("stroke-width", (d,i) => d)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> height - (i*20))
.attr("r", (d,i)=> d)
.style("fill", (d,i) => palette(d/18))
.style("stroke", "black")
.style("stroke-width", 2)
return canvas.node();
}
between0and1 = d3.scaleLinear().range([0,1]).domain([3,18])
between0and1(3)
between0and1(5)
between0and1(6)
between0and1(15)
between0and1(18)
d3.min(drawingCircles)
d3.max(drawingCircles)
d3.extent(drawingCircles)
updatedBetween0and1 = d3.scaleLinear().range([0,1]).domain(d3.extent(drawingCircles))
[updatedBetween0and1(3),updatedBetween0and1(5),updatedBetween0and1(6),updatedBetween0and1(15),updatedBetween0and1(18)]
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain(d3.extent(drawingCircles))
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> height - (i*20))
.attr("r", (d,i)=> d)
.style("fill", (d,i) => palette(color(d)) )
.style("stroke", "black")
.style("stroke-width", 2)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
canvas.selectAll("circle")
.data(drawingCircles)
.join("circle")
.attr("cx", (d,i)=> i*30)
.attr("cy", (d,i)=> height - (i*20))
.attr("r", (d,i)=> d)
.style("fill", (d,i) => palette(color(d)) )
.style("stroke", "black")
.style("stroke-width", 2)
return canvas.node();
}
{
const width = 600
const height = 400
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
canvas.selectAll("rect")
.data(drawingCircles)
.join("rect")
.attr("x", (d,i)=> d*5)
.attr("y", (d,i)=> height - (i*20))
.attr("width", 20)
.attr("height", 20)
.style("fill", (d,i) => palette(color(d)) )
.style("stroke", "black")
.style("stroke-width", 2)
return canvas.node();
}
{
const width = 600
const height = 400
const margin = 30 // Add my margin
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
// Use the margin to create an x domain and range
const x = d3.scaleLinear().range([margin,width-margin]).domain(d3.extent(drawingCircles))
// Use the margin to create an y domain and range
const y = d3.scaleLinear().range([height-margin,margin]).domain([0,drawingCircles.length-1])
canvas.selectAll("rect")
.data(drawingCircles)
.join("rect")
.attr("x", (d,i)=> x(d))
.attr("y", (d,i)=> y(i))
.attr("width", 20)
.attr("height", 20)
.style("fill", (d,i) => palette(color(d)) )
.style("stroke", "black")
.style("stroke-width", 2)
return canvas.node();
}
{
const width = 600
const height = 400
const margin = 30 // Add my margin
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
const x = d3.scaleLinear().range([margin,width-margin]).domain(d3.extent(drawingCircles))
const y = d3.scaleLinear().range([height-margin,margin]).domain([0,drawingCircles.length-1])
canvas.selectAll("rect")
.data(drawingCircles)
.join("rect")
.attr("x", (d,i)=> x(d))
.attr("y", (d,i)=> y(i))
.attr("width", 20)
.attr("height", 20)
.style("fill", (d,i) => palette(color(d)) )
.style("stroke", "black")
.style("stroke-width", 2)
// adding in the text
canvas.selectAll("text")
.data(drawingCircles)
.join("text")
.attr("x", (d,i)=> x(d))
.attr("y", (d,i)=> y(i))
.text((d,i) => "x: "+d+" y: "+i)
return canvas.node();
}
breakout = {
const width = 600
const height = 400
const margin = {"left":30,"right":100,"top":30,"bottom":30} // updating our margins
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
// adding more of margin for our text and adding the specific margins for left ,right, top, and bottom
const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles))
const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1])
canvas.selectAll("rect")
.data(drawingCircles)
.join("rect")
.attr("x", (d,i)=> x(d))
.attr("y", (d,i)=> y(i))
.attr("width", 20)
.attr("height", 20)
.style("fill", (d,i) => palette(color(d)) )
.style("stroke", "black")
.style("stroke-width", 2)
canvas.selectAll("text")
.data(drawingCircles)
.join("text")
.attr("x", (d,i)=> x(d))
// moving our text up a bit (subtracting 5 pixels)
.attr("y", (d,i)=> y(i)-5)
.text((d,i) => "x: "+d+" y: "+i)
return canvas.node();
}
{
const width = 600
const height = 400
const margin = {"left":30,"right":100,"top":30,"bottom":30}
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles))
const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1])
// update this to select the lines, then join (or add) lines.
canvas.selectAll("line")
.data(drawingCircles)
.join("line")
// lines require x1,y1 (where the line starts) and x2,y2 (where the lines end)
.attr("x1", (d,i)=> x(d))
.attr("y1", (d,i)=> y(i))
.attr("x2", (d,i)=> x(d)+10)
.attr("y2", (d,i)=> y(i)+10)
// to change the color of the line we need to update the stroke, not the fill.
.style("stroke", (d,i) => palette(color(d)) )
.style("stroke-width", 10)
return canvas.node();
}
{
const width = 600
const height = 400
const margin = {"left":30,"right":100,"top":30,"bottom":30}
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles))
const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1])
canvas.selectAll("line")
.data(drawingCircles.slice(0, -1)) // we first need to cut off our data one position short
.join("line")
.attr("x1", (d,i)=> x(d))
.attr("y1", (d,i)=> y(i))
// we then need to end our line with the next data point.
// that's why we use (i+1) and why we cutoff the last position in our array
.attr("x2", (d,i)=> x(drawingCircles[i+1]))
.attr("y2", (d,i)=> y(i+1))
.style("stroke", "black" ) // changing this back, as not all the data points (and colors) will be represented
.style("stroke-width", 10)
return canvas.node();
}
{
const width = 600
const height = 400
const margin = {"left":30,"right":100,"top":30,"bottom":30}
const canvas = d3.select(DOM.svg(width, height))
const palette = d3.interpolatePurples
const color = d3.scaleLinear().range([0,1]).domain([0,d3.max(drawingCircles)])
const x = d3.scaleLinear().range([margin.left,width-(margin.right)]).domain(d3.extent(drawingCircles))
const y = d3.scaleLinear().range([height-margin.bottom,margin.top]).domain([0,drawingCircles.length-1])
// this is our function to create the line, where the x is based on the d(ata) and the y on the i(ndex)
const line = d3.line()
.x((d,i)=> x(d))
.y((d,i)=> y(i))
canvas.selectAll("path")
.data([drawingCircles])
.join("path")
.attr("d", line)
.style("stroke", "black" )
.style("stroke-width", 10)
.style("fill", "none") // SPECIAL NOTE HERE: we set the fill to "none" because a path will have a fill color
return canvas.node();
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.