Published
Edited
Apr 17, 2019
{
// 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();
}
html`
<button id="start">Transition</button>
<button id="reset">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("#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();
}
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", 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();
}
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
.attr("opacity", 0.8); //HERE
});
d3.select("#reset2").on("click", function() {
rectangle
.attr("opacity", 0.3); //HERE
});
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
.attr("fill", "black"); //HERE
});
d3.select("#reset3").on("click", function() {
rectangle
.attr("fill", "pink"); //HERE
});
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(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();
}
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("#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();
}
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) // 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();
}
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) { //switch= if / else function in a more concise way
case "Chart 1": return ratData //if ...
case "Chart 2": return ratDataV2 //else...
}
}
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();
}
copy from another book
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);
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();
}
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");
// 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.