{
// 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()
.attr("opacity", 0.5)
});
d3.select("#reset2").on("click", function() {
rectangle
.transition()
.attr("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
.transition()
.style("fill","blue")
});
d3.select("#reset3").on("click", function() {
rectangle
.transition()
.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();
}
// your code here
html`
<button id="start100">Transition</button>
<button id="reset100">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("#start100").on("click", function() {
rectangle
.transition()
.attr("x", 200) // New Position
.ease(d3.easeSinIn); // Use the Bounce Transition Ease
});
d3.select("#reset100").on("click", function() {
rectangle
.transition()
.attr("x", 100) // New Position
.ease(d3.easeSinIn); // 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 {"data": ratData, "color": "blue"} //added color field here so easy to select later in section below
case "Chart 2": return {"data": ratDataV2, "color": "red"}
}
}
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.data ) //select color field in that dataset
.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", selectedData.color)
.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
// see above!
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))
let callout = (g, value) => {
if (!value) return g.style("display", "none");
g
.style("display", null)
.style("pointer-events", "none")
.style("font", "10px sans-serif");
const path = g.selectAll("path")
.data([null])
.join("path")
.attr("fill", "white")
.attr("stroke", "black");
const text = g.selectAll("text")
.data([null])
.join("text")
.call(text => text
.selectAll("tspan")
.data((value + "").split(/\n/))
.join("tspan")
.attr("x", 0)
.attr("y", (d, i) => `${i * 1.1}em`)
.style("font-weight", (_, i) => i ? null : "bold")
.text(d => d));
const {x, y, width: w, height: h} = text.node().getBBox();
text.attr("transform", `translate(${-w / 2},${15 - y})`);
path.attr("d", `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`);
};
let bisect = d3.bisector(d => d.date).left;
let mx = {
const date = x.invert(mx);
const index = bisect(data, date, 1);
const a = data[index - 1];
const b = data[index];
return date - a.date > b.date - date ? a : b;
}
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()
const tooltip = svg.append("g");
svg.on("touchmove mousemove", function() {
const {date, value} = bisect(d3.mouse(this)[0]);
tooltip
.attr("transform", `translate(${x(date)},${y(value)})`)
.call(callout, `${value.toLocaleString(undefined, {style: "currency", currency: "USD"})}
${date.toLocaleString(undefined, {month: "short", day: "numeric", year: "numeric"})}`);
});
svg.on("touchend mouseleave", () => tooltip.call(callout, null));
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
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.