Published
Edited
Apr 14, 2019
d3 = require("d3@5")
exData = [ 40, 90, 30, 60 ];
{
d3.selectAll( "circle" ); // select all SVG rect elements
d3.select( "#boston" ); // select an element where id='boston'
d3.selectAll( ".bar" ); // select all elements with the class 'bar'
}
d3.selectAll('svg')
.data(exData)
.attr( "height", (d) => {return d;});
{
// Width and height of the SVG object
let w = 350;
let h = 175;
let barWidth = 20
// Initialize SVG object
const svg = d3.select(DOM.svg(w, h));
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data( exData )
.enter()
.append("rect")
.attr( "x", (d,i) => i*barWidth + 0 )
.attr( "y", 0 )
.attr( "width", barWidth )
.attr( "height", d => d )
.attr( "fill", "red");
return svg.node();
}
{
// Width and height of the SVG object
let w = 150;
let h = 175;
// Initialize SVG object
const svg = d3.select(DOM.svg(w, h));
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data( exData )
.enter()
.append("rect")
.attr( "x", (d,i) => (i*30 + 30))
// Set x coordinate of rectangle to index of data value (i)*25.
// Add 30 to account for our left margin.
.attr( "y", 0 )
.attr( "width", 20 )
.attr( "height", d => d) // Set height of rectangle to data value
.attr( "fill", "steelblue");
return svg.node();
}
// Your code here
{
// Width and height of the SVG object
let w = 150;
let h = 175;
// Initialize SVG object
const svg = d3.select(DOM.svg(w, h));
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data( exData )
.enter()
.append("rect")
.attr( "x", (d,i) => (i*25 + 30))
// Set x coordinate of rectangle to index of data value (i)*25.
// Add 30 to account for our left margin.
.attr( "y", d => h-d )// Set y coordinate for each bar to height minus the data value // chaneg to 0 for inverted
.attr( "width", 20 )
.attr( "height", d => d) // Set height of rectangle to data value
.attr( "fill", "steelblue");
return svg.node();
}
// Your code here
{
// Width and height of the SVG object
let w = 150;
let h = 175;
// Initialize SVG object
const svg = d3.select(DOM.svg(w, h));
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data( exData )
.enter()
.append("rect")
.attr( "x", (d,i) => (i*25 + 30))
// Set x coordinate of rectangle to index of data value (i)*25.
// Add 30 to account for our left margin.
.attr( "y", d => h-d-15 ) // Set y coordinate for each bar to height minus the data value
.attr( "width", 20 )
.attr( "height", d => d) // Set height of rectangle to data value
.attr( "fill", "steelblue");
// Create y-axis
svg.append("line")
.attr("x1", 30)
.attr("y1", 75)
.attr("x2", 30)
.attr("y2", 160)
.attr("stroke-width", 2)
.attr("stroke", "red");
// Create x-axis
svg.append("line")
.attr("x1", 30)
.attr("y1", 160)
.attr("x2", 130)
.attr("y2", 160)
.attr("stroke-width", 2)
.attr("stroke", "red");
// Add a Label
// y-axis label
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.text("No. of Rats")
.attr("transform", "translate(10, 100) rotate(-90)");
// x-axis label
svg.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.text("cities")
.attr("transform", "translate(60, 175) rotate(0)");
return svg.node();
}
html`
<style>
text {
font-family: "Open Sans", sans-serif;
font-size: 12px;
}
</style>
`
// New dataset with More Numbers
ratData = [ 40, 70, 60, 20, 40, 100, 60 ];
{
// Get length of dataset
let arrayLength = ratData.length; // length of dataset
let maxValue = d3.max(ratData, d => +d); // get max value of our dataset
let x_axisLength = 100; // length of x-axis in our layout
let y_axisLength = 100; // length of y-axis in our layout
return {arrayLength, maxValue};
}
// Your code here
{
// Get length of dataset
let arrayLength = ratData.length; // length of dataset
let maxValue = d3.max(ratData, d => +d); // get max value of our dataset
let x_axisLength = 100; // length of x-axis in our layout
let y_axisLength = 50; // length of y-axis in our layout
let yScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 1000])
return yScale(5); // As the domain and range have the same value in this example, yScale outputs a 1-to-1 relationship.
//the value passed is from the domain, but it reflects in the range
}
{
let yScale = d3.scaleLinear()
.domain([0, d3.max(ratData, d => +d)])
.range([margin.bottom, height - margin.top]);
return yScale(0); // 0 should correspond with the lowest pixel of y-axis (i.e. the bottom margin)
}
// We can put all of our margins into a single object and reference them using their keys
margin = ({top: 15, right: 10, bottom: 25, left: 30})
{
// Initialize SVG object (using our pre-defined width and height)
const svg = d3.select(DOM.svg(width, height));
// Get length of dataset
let arrayLength = ratData.length; // length of dataset
let maxValue = d3.max(ratData, d => +d); // get max value of our dataset
let x_axisLength = (width - margin.right - margin.left); // length of x-axis in our layout
let y_axisLength = (height - margin.top - margin.bottom); // length of y-axis in our layout
// Use a scale for the height of the visualization
const yScale = d3.scaleLinear()
.domain([0, d3.max(ratData, d => +d)])
.range([margin.bottom, height - margin.top])
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data( ratData )
.enter()
.append("rect")
.attr( "x", (d,i) => (i*(x_axisLength/arrayLength) + margin.left))
// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.
// Add left margin to account for our left margin.
.attr( "y", d => (height - yScale(d)) )
// Set y coordinate using yScale.
.attr( "width", (x_axisLength/arrayLength) - 1 )
// Set bar width using length of array, with 1px gap between each bar.
.attr( "height", d => yScale(d) - yScale(0))
// Set height of rectangle to data value, accounting for bottom margin.
.attr( "fill", "steelblue");
// Create y-axis, beginning at the top margin and ending at the bottom margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", margin.top)
.attr("x2", margin.left)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Create x-axis beginning at the left margin, and ending at the right margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", height - margin.bottom)
.attr("x2", width - margin.right)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Add a Label
// 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)");
return svg.node();
}
scaleLinearArray = [0.23232, 1000, 203, 500, 800]
arrayLin2 = {
let arrayLin2 = []
let yScale = d3.scaleLinear().domain([0.23232, 1000]).range([0, 1])
for (var i =0; i <scaleLinearArray.length; i++){
arrayLin2[i] = yScale(scaleLinearArray[i])
}
return arrayLin2
}
bandScale = d3.scaleBand()
.domain(['Mon', 'Tue', 'Wed', 'Thu', 'Fri'])
.range([0, 100])
.padding(2)
bandScale('Thu')
scaleBandArray = [2000, 2001, 2002, 2003,2004]
scaleBandArrayFunc = d3.scaleBand()
.domain(scaleBandArray)
.range([0, 1])
.padding(.2)
bandScale2 = { // how it understands the scaleBand as elements, not numbers?
let bandedArr = []
for (var i =0; i <scaleBandArray.length; i++){
bandedArr[i] = scaleBandArrayFunc(scaleBandArray[i])
}
return bandedArr
}
bosData = d3.csv("https://gist.githubusercontent.com/jdev42092/46071bf3284265c37ea07d6328ef7a3a/raw/cc7bfc53f3853437749906ccf7d2cac49c43c9a2/neigh_311.csv", ({neighborhood, num_311}) => ({neighborhood: neighborhood, calls: +num_311}))
{
// Initialize SVG object (using our pre-defined width and height)
const svg = d3.select(DOM.svg(width, height));
// Get length of dataset
let arrayLength = bosData.length; // length of dataset
let maxValue = d3.max(bosData, d=> d.calls); // get max value of our dataset
let x_axisLength = (width - margin.right - margin.left); // length of x-axis in our layout
let y_axisLength = (height - margin.top - margin.bottom); // length of y-axis in our layout
// Use a scale for the height of the visualization
const yScale = d3.scaleLinear()
.domain([0, d3.max(bosData, d=> d.calls)])
.range([margin.bottom, height - margin.top])
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data( bosData )
.enter()
.append("rect")
.attr( "x", (d,i) => (i*(x_axisLength/arrayLength) + margin.left))
// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.
// Add left margin to account for our left margin.
.attr( "y", d => (height - yScale(d.calls)) )
// Set y coordinate using yScale.
.attr( "width", (x_axisLength/arrayLength) - 1 )
// Set bar width using length of array, with 1px gap between each bar.
.attr( "height", d => yScale(d.calls) - yScale(0))
// Set height of rectangle to data value, accounting for bottom margin.
.attr( "fill", "steelblue");
// Create y-axis, beginning at the top margin and ending at the bottom margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", margin.top)
.attr("x2", margin.left)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Create x-axis beginning at the left margin, and ending at the right margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", height - margin.bottom)
.attr("x2", width - margin.right)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Add a Label
// y-axis label
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.text("No. of 311 Calls")
.attr("transform", "translate(20, 20) rotate(-90)");
return svg.node();
}
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");
{
// Initialize SVG object (using our pre-defined width and height)
const svg = d3.select(DOM.svg(width, height));
// Get length of dataset
let arrayLength = bosData.length; // length of dataset
let maxValue = d3.max(bosData, d=> d.calls); // get max value of our dataset
let x_axisLength = (width - margin.right - margin.left); // length of x-axis in our layout
let y_axisLength = (height - margin.top - margin.bottom); // length of y-axis in our layout
// Use a scale for the height of the visualization
const yScale = d3.scaleLinear()
.domain([0, d3.max(bosData, d=> d.calls)])
.range([margin.bottom, height - margin.top])
// Call tooltip
tooltip
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data( bosData )
.enter()
.append("rect")
.attr( "x", (d,i) => (i*(x_axisLength/arrayLength) + margin.left))
// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.
// Add left margin to account for our left margin.
.attr( "y", d => (height - yScale(d.calls)) )
// Set y coordinate using yScale.
.attr( "width", (x_axisLength/arrayLength) - 1 )
// Set bar width using length of array, with 1px gap between each bar.
.attr( "height", d => yScale(d.calls) - yScale(0))
// Set height of rectangle to data value, accounting for bottom margin.
.attr( "fill", "steelblue")
.on("mouseover", d => tooltip.style("visibility", "visible").text(d.neighborhood + ": " + d.calls))
.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"));
// Create y-axis, beginning at the top margin and ending at the bottom margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", margin.top)
.attr("x2", margin.left)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Create x-axis beginning at the left margin, and ending at the right margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", height - margin.bottom)
.attr("x2", width - margin.right)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Add a Label
// y-axis label
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.text("No. of 311 Calls")
.attr("transform", "translate(20, 20) rotate(-90)");
return svg.node();
}
migDataYears = {
let arrayYears = []
for (let i in migData){
let currentCoun = migData[i].Country_Name
arrayYears.push(currentCoun)
}
return arrayYears
}
{
// Initialize SVG object (using our pre-defined width and height)
const svg = d3.select(DOM.svg(width, height));
// Get length of dataset
let arrayLength = migData.length; // length of dataset
let maxValue = d3.max(migData, d=> d["2017"]); //why we use the [] here?
let x_axisLength = (width - margin.right - margin.left); // length of x-axis in our layout
let y_axisLength = (height - margin.top - margin.bottom); // length of y-axis in our layout
// Use a scale for the height of the visualization
const yScale = d3.scaleLinear()
.domain([0, d3.max(migData, d=>d["2017"])])
.range([margin.bottom, height - margin.top])
// Call tooltip
tooltip
// Select and generate rectangle elements
svg.selectAll( "rect" )
.data(migData)
.enter()
.append("rect")
.attr( "x", (d,i) => (i*(x_axisLength/arrayLength) + margin.left))
// Set x coordinate of each bar to index of data value (i) times dynamically calculated bar width.
// Add left margin to account for our left margin.
.attr( "y", d => (height - yScale(d["2017"])) )
// Set y coordinate using yScale.
.attr( "width", (x_axisLength/arrayLength) - 1 )
// Set bar width using length of array, with 1px gap between each bar.
.attr( "height", d => yScale(d["2017"]) - yScale(0))
// Set height of rectangle to data value, accounting for bottom margin.
.attr( "fill", "blue")
.on("mouseover", d => tooltip.style("visibility", "visible").text(d["Country Name"] + ": " + d["2017"]))
.on("mousemove", d => tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px").text(d["Country Name"] + ": " + d["2017"]))
.on("mouseout", d => tooltip.style("visibility", "hidden"));
// Create y-axis, beginning at the top margin and ending at the bottom margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", margin.top)
.attr("x2", margin.left)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Create x-axis beginning at the left margin, and ending at the right margin
svg.append("line")
.attr("x1", margin.left)
.attr("y1", height - margin.bottom)
.attr("x2", width - margin.right)
.attr("y2", height - margin.bottom)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Add a Label
// y-axis label
svg.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.text("2017")
.attr("transform", "translate(20, 20) rotate(-90)");
return svg.node();
}
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.
