{
// 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();
}
{
// 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
});
d3.select("#reset").on("click", function() {
rectangle
.transition()
.attr("x", 50); // Old Position
});
return svgContainer.node();
}
html`
<button id="start1">Transition</button>
<button id="reset1">Reset</button>
`
{
// 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("#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();
}
html`
<button id="start2">Transition</button>
<button id="reset2">Reset</button>
`
{
// 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
.transition()
.style("opacity", 0.5)
});
d3.select("#reset2").on("click", function() {
rectangle
.transition()
.style("opacity", 1)
});
return svgContainer.node();
}
html`
<button id="start3">Transition</button>
<button id="reset3">Reset</button>
`
{
// 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
.style("fill", "red")
});
d3.select("#reset3").on("click", function() {
rectangle
.style("fill", "black")
});
return svgContainer.node();
}
html`
<button id="start4">Transition</button>
<button id="reset4">Reset</button>
`
{
// 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(100); // New Position
});
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();
}
html`
<button id="start5">Transition</button>
<button id="reset5">Reset</button>
`
{
// 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();
}
html`
<button id="start6">Transition</button>
<button id="reset6">Reset</button>
`
{
// 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("#start6").on("click", function() {
rectangle
.transition()
.attr("x", 250) // New Position
.ease(d3.easeBounce); // Use the Bounce Transition Ease
});
d3.select("#reset6").on("click", function() {
rectangle
.transition()
.attr("x", 50) // New Position
.ease(d3.easeBounce); // Use the Bounce Transition Ease
});
return svgContainer.node();
}
html`
<button id="start8">Transition</button>
<button id="reset8">Reset</button>
`
//rememeber to change the start and restart id
// your code here
{
// 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("#start8").on("click", function() {
rectangle
.transition()
.attr("x", 250) // New Position
.ease(d3.easePolyIn); // Use the Bounce Transition Ease
});
d3.select("#reset8").on("click", function() {
rectangle
.transition()
.attr("x", 50) // New Position
.ease(d3.easePolyIn); // Use the Bounce Transition Ease
});
return svgContainer.node();
}
html`
<button id="start7">Transition</button>
<button id="reset7">Reset</button>
`
{
// 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();
}
// Your code here
html`
<button id="start">Transition</button>
<button id="reset">Reset</button>
`
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}))
{
//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();
}
html`
<button id="start8">Transition</button>
<button id="reset8">Reset</button>
`
{
//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();
}
viewof chart = html`<select>
<option>Chart 1
<option>Chart 2
</select>`
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");
ratData = d3.csv("https://gist.githubusercontent.com/cesandoval/63376af7e561c92de00cf4d77d5fdd25/raw/14d008c98952b85c56190a891ba0167cd6c35553/rat-data-larger.csv", (d) => ({city : d.city,rats : +d.rats}))
ratDataV2 = d3.csv("https://gist.githubusercontent.com/cesandoval/9613b27a16344bb5bf2e1fb29c475681/raw/e11dbfabb8f1b4a974ec8ac3407cffa44d817df9/rat-data-large-v2.csv", (d) => ({city : d.city,rats : +d.rats}))
selectedData = {
switch (chartType) {
case "Chart 1": return ratData
case "Chart 2": return ratDataV2
}
}
viewof chartType = html`<select>
<option>Chart 1
<option>Chart 2
</select>`
{
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();
}
// your code here
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"})
{
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")
}
{
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")
}
{
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
}
{
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();
}
html`
<button id="startLine">Start Animation</button>
`
{
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("class", "line")
.attr("fill", "none");
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();
}
// Your code here
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.
