Published
Edited
Apr 17, 2019
Insert cell
Insert cell
Insert cell
{
// Width and height of the SVG object
let w = 350;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);
// Set up the reset button to move it back to 50,50
d3.select("#reset").on("click", function() {
rectangle
.transition()
.attr("x", 50)
.attr("y", 50);
});

d3.select("#start").on("click", function() {
rectangle
.transition(); // ALL OF OUR TRANSITIONS WILL GO HERE!
});
return svgContainer.node();
}
Insert cell
Insert cell
html`
<button id="start">Transition</button>
<button id="reset">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 350;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start").on("click", function() {
rectangle
.transition()
.attr("x", 250) // New Position (250 = number of pixels)
.attr("opacity", 0.50);
});

d3.select("#reset").on("click", function() {
rectangle
.transition() // is the code to make changes
.attr("x", 50); // Old Position
});
return svgContainer.node();
}
Insert cell
Insert cell
html`
<button id="start1">Transition</button>
<button id="reset1">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 350;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 150) //HERE
.attr("height", 150); //HERE

d3.select("#start1").on("click", function() {
console.log(28282822828343434)
rectangle
.transition()
.attr("width", 100) // New Width
.attr("height", 100); // New Height
});

d3.select("#reset1").on("click", function() {
rectangle
.transition()
.attr("width", 50)
.attr("height", 50);
});
return svgContainer.node();

}
Insert cell
Insert cell
html`
<button id="start2">Transition</button>
<button id="reset2">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 350;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start2").on("click", function() {
rectangle
.attr("opacity", 0.8); //HERE
});

d3.select("#reset2").on("click", function() {
rectangle
.attr("opacity", 0.3); //HERE
});
return svgContainer.node();

}
Insert cell
Insert cell
html`
<button id="start3">Transition</button>
<button id="reset3">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 350;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start3").on("click", function() {
rectangle
.attr("fill", "black"); //HERE
});

d3.select("#reset3").on("click", function() {
rectangle
.attr("fill", "pink"); //HERE
});
return svgContainer.node();

}
Insert cell
Insert cell
html`
<button id="start4">Transition</button>
<button id="reset4">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 400;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start4").on("click", function() {
rectangle
.transition()
.attr("fill", "red") // New Color (Hex, RGB, or Web Safe)
.attr("opacity", 0.5) // New Opacity
.attr("width", 100) // New Width
.attr("height", 100) // New Height
.attr("x", 250)
.delay(500); // New Position //HERE
});

d3.select("#reset4").on("click", function() {
rectangle
.transition()
.attr("fill", "black") // New Color (Hex, RGB, or Web Safe)
.attr("opacity", 1) // New Opacity
.attr("width", 50) // New Width
.attr("height", 50) // New Height
.attr("x", 50); // New Position
});
return svgContainer.node();

}
Insert cell
Insert cell
html`
<button id="start5">Transition</button>
<button id="reset5">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 400;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start5").on("click", function() {
rectangle
.transition()
.attr("x", 250) // New Position
.duration(2500); // Set Duration of 2500ms (2.5 seconds)
});

d3.select("#reset5").on("click", function() {
rectangle
.transition()
.attr("x", 50) // New Position
.duration(2500); // Set Duration of 2500ms (2.5 seconds)
});
return svgContainer.node();

}
Insert cell
Insert cell
html`
<button id="start6">Transition</button>
<button id="reset6">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 400;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start7").on("click", function() {
rectangle
.transition()
.attr("x", 250) // New Position
.ease(d3.easeBounce); // Use the Bounce Transition Ease
});

d3.select("#reset7").on("click", function() {
rectangle
.transition()
.attr("x", 50) // New Position
.ease(d3.easeBounce); // Use the Bounce Transition Ease
});
return svgContainer.node();

}
Insert cell
Insert cell
html`
<button id="start7">Transition</button>
<button id="reset7">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 400;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start7").on("click", function() {
rectangle
.transition()
.attr("x", 250) // New Position
.ease(d3.easePoly); // Use the Bounce Transition Ease
});

d3.select("#reset7").on("click", function() {
rectangle
.transition()
.attr("x", 50) // New Position
.ease(d3.easePoly); // Use the Bounce Transition Ease
});
return svgContainer.node();

}

Insert cell
Insert cell
html`
<button id="start7">Transition</button>
<button id="reset7">Reset</button>
`
Insert cell
{
// Width and height of the SVG object
let w = 400;
let h = 175;
//Make an SVG Container
var svgContainer = d3.select(DOM.svg(w, h))
.attr("width", 400)
.attr("height", 200)
.style("border-color", "black")
.style("border-style", "solid")
.style("border-width", "1px");
// Draw the Rectangle
var rectangle = svgContainer.append("rect")
.attr("x", 50)
.attr("y", 50)
.attr("width", 50)
.attr("height", 50);

d3.select("#start7").on("click", function() {
rectangle
.transition()
.attr("x", 250)
.attr("width", 100)
.attr("height", 100)
.attr("opacity", 0.5)
.attr("fill", "red")
.delay(500)
.duration(2500)
.ease(d3.easeBounce)
.on("end",function() { // on end of transition...
d3.select(this)
.transition() // second transition
.attr("x", 150) // second x
.attr("width", 75) // second width
.attr("height", 75) // second height
.attr("opacity", 0.75) // second opacity
.attr("fill", "blue") // second color
.delay(500) // second delay
.duration(2500) // second time
.ease(d3.easeBounce); // second ease
});
});

d3.select("#reset7").on("click", function() {
rectangle
.transition()
.attr("x", 50)
.attr("y", 50); // New Position
});
return svgContainer.node();

}
Insert cell
Insert cell
// Your code here
Insert cell
Insert cell
Insert cell
html`
<button id="start">Transition</button>
<button id="reset">Reset</button>
`
Insert cell
Insert cell
ratObject = d3.csv("https://gist.githubusercontent.com/cesandoval/90183e0d9fab6c19119348bc79c78a4a/raw/fec1e6b7a220c42f9bbcb3260adc718fa9a68b5a/coffee_rodents_transform.csv", (d) => ({city : d.city,rats2015 : +d.rats_2015,coffee2015 : +d.coffee_2015,rats2016 : +d.rats_2016,coffee2016 : + d.coffee_2016}))

Insert cell
{
//Width and height
var w = 180;
var h = 180;

//Make an SVG Container
var svg = d3.select(DOM.svg(w, h))
// .append("svg")
.attr("width", w)
.attr("height", h)
.attr("style", "outline: thin solid black;");

var circle = svg.selectAll("circle")
.data(ratObject)
.enter()
.append("circle")
.attr("cx", function(d) {
return d.rats2015;
})
.attr("cy", function(d) {
return d.coffee2015;
})
.attr("r", 5);
return svg.node();
}
Insert cell
Insert cell
html`
<button id="start8">Transition</button>
<button id="reset8">Reset</button>
`
Insert cell
{
//Width and height
var w = 180;
var h = 180;

//Make an SVG Container
var svg = d3.select(DOM.svg(w, h))
// .append("svg")
.attr("width", w)
.attr("height", h)
.attr("style", "outline: thin solid black;");

var circle = svg.selectAll("circle")
.data(ratObject)
.enter()
.append("circle")
.attr("cx", function(d) {
return d.rats2015;
})
.attr("cy", function(d) {
return d.coffee2015;
})
.attr("r", 5);

d3.select("#start8").on("click", function() {
circle
.transition()
.attr("cx", function(d) {
return d.rats2016;
})
.attr("cy", function(d) {
return d.coffee2016;
})
});

d3.select("#reset8").on("click", function() {
circle
.transition()
.attr("cx", function(d) {
return d.rats2015;
})
.attr("cy", function(d) {
return d.coffee2015;
})
});
return svg.node();
}
Insert cell
Insert cell
viewof chart = html`<select>
<option>Chart 1
<option>Chart 2
</select>`
Insert cell
tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("font-family", "'Open Sans', sans-serif")
.style("font-size", "12px")
.style("z-index", "10")
.style("visibility", "hidden");
Insert cell
ratData = d3.csv("https://gist.githubusercontent.com/cesandoval/63376af7e561c92de00cf4d77d5fdd25/raw/14d008c98952b85c56190a891ba0167cd6c35553/rat-data-larger.csv", (d) => ({city : d.city,rats : +d.rats}))
Insert cell
ratDataV2 = d3.csv("https://gist.githubusercontent.com/cesandoval/9613b27a16344bb5bf2e1fb29c475681/raw/e11dbfabb8f1b4a974ec8ac3407cffa44d817df9/rat-data-large-v2.csv", (d) => ({city : d.city,rats : +d.rats}))
Insert cell
Insert cell
selectedData = {
switch (chartType) { //switch= if / else function in a more concise way
case "Chart 1": return ratData //if ...
case "Chart 2": return ratDataV2 //else...
}
}
Insert cell
Insert cell
viewof chartType = html`<select>
<option>Chart 1
<option>Chart 2
</select>`
Insert cell
{
var w = 150;
var h = 105;

// Get length of Array and set length so we can an input dataset of variable length
var arrayLength = ratData.length; // length of dataset
var maxValue = d3.max(ratData, function(d) { return +d.rats;} ); // get maximum value of our dataset
var x_axisLength = 100; // length of x-axis in our layout
var y_axisLength = 100; // length of y-axis in our layout

// Use a scale for the height of the visualization
var yScale = d3.scaleLinear()
.domain([0, maxValue])
.range([0, y_axisLength]);

//Make an SVG Container
var svg = d3.select(DOM.svg(w, h))
// .append("svg")
.attr("width", w)
.attr("height", h)
.attr("style", "outline: thin solid black;");
// Select and generate rectangle elements
var rect = svg.selectAll( "rect" )
.data( selectedData )
.enter()
.append("rect")
.attr( "x", function(d,i){
return i * (x_axisLength/arrayLength) + 30; // Set x coordinate of rectangle to index of data value (i) *25
})
.attr( "y", function(d){
return h - yScale(d.rats) - 5; // Set y coordinate of rect using the y scale
})
.attr( "width", (x_axisLength/arrayLength) - 1)
.attr( "height", function(d){
return yScale(d.rats); // Set height of using the scale
})
.attr( "fill", "steelblue")
.on("mouseover", d => tooltip.style("visibility", "visible").text(d.city + ": " + d.rats))
.on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d.city + ": " + d.rats))
.on("mouseout", d => tooltip.style("visibility", "hidden"));

// Create y-axis
svg.append("line")
.attr("x1", 30)
.attr("y1", 0)
.attr("x2", 30)
.attr("y2", 100)
.attr("stroke-width", 2)
.attr("stroke", "black");

// Create x-axis
svg.append("line")
.attr("x1", 30)
.attr("y1", 100)
.attr("x2", 130)
.attr("y2", 100)
.attr("stroke-width", 2)
.attr("stroke", "black");

// y-axis label
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.text("No. of Rats")
.attr("transform", "translate(20, 20) rotate(-90)")
.attr("font-size", "14px")
.attr("font-family", "'Open Sans', sans-serif");
return svg.node();
}
Insert cell
Insert cell
copy from another book
Insert cell
Insert cell
data = Object.assign((await d3.csv("https://gist.githubusercontent.com/mbostock/14613fb82f32f40119009c94f5a46d72/raw/d0d70ffb7b749714e4ba1dece761f6502b2bdea2/aapl.csv", d3.autoType)).map(({date, close}) => ({date, value: close})), {y: "$ Close"})
Insert cell
{
var margin = {top: 60, right: 20, bottom: 30, left: 50},
width = 700 - margin.left - margin.right,
height = 365 - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width, height));
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
}
Insert cell
Insert cell
{
var margin = {top: 60, right: 20, bottom: 30, left: 50},
width = 700 - margin.left - margin.right,
height = 365 - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width, height));
let path = svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
}
Insert cell
Insert cell
{
var margin = {top: 60, right: 20, bottom: 30, left: 50},
width = 700 - margin.left - margin.right,
height = 365 - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width, height));
let path = svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
// Variable to Hold Total Length
var totalLength = path.node().getTotalLength();

// Set Properties of Dash Array and Dash Offset and initiate Transition
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition() // Call Transition Method
.duration(4000) // Set Duration timing (ms)
.ease(d3.easeLinear) // Set Easing option
.attr("stroke-dashoffset", 0); // Set final value of dash-offset for transition

}
Insert cell
Insert cell
{
var margin = {top: 60, right: 20, bottom: 30, left: 50},
width = 700 - margin.left - margin.right,
height = 365 - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width, height));
let x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
let y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
let xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
let yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
let line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.date))
.y(d => y(d.value))

svg.append("g")
.call(xAxis);

svg.append("g")
.call(yAxis);
let path = svg.append("path")
.attr("d", line(data))
.attr("stroke", "steelblue")
.attr("stroke-width", "1.5")
.attr("fill", "none");
var totalLength = path.node().getTotalLength()
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(4000)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0)
return svg.node();
}
Insert cell
Insert cell
html`
<button id="startLine">Start Animation</button>
`
Insert cell
Insert cell
{
var margin = {top: 60, right: 20, bottom: 30, left: 50},
width = 700 - margin.left - margin.right,
height = 365 - margin.top - margin.bottom;
const svg = d3.select(DOM.svg(width, height));
let x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
let y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
let xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
let yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
let line = d3.line()
.defined(d => !isNaN(d.value))
.x(d => x(d.date))
.y(d => y(d.value))

svg.append("g")
.call(xAxis);

svg.append("g")
.call(yAxis);
tooltip1
let path = svg.append("path")
.attr("d", line(data))
.attr("stroke", "steelblue")
.attr("stroke-width", "1.5")
.attr("class", "line")
.attr("fill", "none")
.on("mouseover", d => tooltip.style("visibility", "visible").text(d.date + ": " + d.value))
.on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d.neighborhood + ": " + d.calls))
.on("mouseout", d => tooltip.style("visibility", "hidden"));

var totalLength = path.node().getTotalLength()
d3.select("#startLine").on("click", function() {
path
.attr("stroke-dasharray", totalLength + " " + totalLength)
.attr("stroke-dashoffset", totalLength)
.transition()
.duration(4000)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0)
})
return svg.node();
}
Insert cell
tooltip1 = d3.select("body")
.append("div")
.style("position", "absolute")
.style("font-family", "'Open Sans', sans-serif")
.style("font-size", "12px")
.style("z-index", "10")
.style("visibility", "hidden");

Insert cell
Insert cell
// Your code here

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more