Setting up a Node ServerWeek 12 - Interaction and Animation: D3 Transitions, Behaviors, and BrushingWeek 11 - Intro to D3.js: Mapping Data with D3Parsing API ResponsesWeek 4a - Exploring Data with Vega-LiteWeek 3 - Data Management with ZebrasWeek 2a - Introduction to Javascript Part2Week 1b - Introduction to JavascriptWeek 1a - Introduction to HTML and JavascriptWeek 0 - Introduction to Observable
Week 10 - Intro to D3.js: Making a Chart
d3 = require("d3@5")
exData = [ 40, 90, 30, 60 ];
//select based on elements/ ID/ classes
{
d3.selectAll( "rect" ); // select all SVG rect elements within my DOM, doesn't matter if the rectangle will be yet have not been established yet.
d3.select( "#boston" ); // select an element where id='boston'
//"#" indicates we are selecting based on ID
d3.selectAll( ".bar" ); // select all elements with the class 'bar'
//select based on the class
}
d3.selectAll('svg')
.data(exData)
.attr( "height", d => {return d;});
{
// Width and height of the SVG object
let w = 150;
let h = 175;
// Initialize SVG object
const svg = d3.select(DOM.svg(w, h));
//Make an SVG container (the SVG Coordinate Space)
//var svgContainer = d3.select("body").append("svg")
//.attr("width", 200)
//.attr("height", 200);
// Select and generate rectangle elements
svg.selectAll( "rect" )
//insert an empty rectangle
.data( exData )
//4 rectangles
.enter()
//update the rectangles
.append("rect")
.attr( "x", 30 )
.attr( "y", 0 )
.attr( "width", 20 )
.attr( "height", 100 )
.attr( "fill", "steelblue");
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*25 + 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();
}
{
// 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
.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));
//modify this svg object
// 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
.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", 175)
.attr("stroke-width", 2)
.attr("stroke", "black");
// Create x-axis
svg.append("line")
.attr("x1", 30)
.attr("y1", 175)
.attr("x2", 130)
.attr("y2", 175)
.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();
}
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};
}
{
// 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
let yScale = d3.scaleLinear()
.domain([0, maxValue])
.range([0, y_axisLength])
return yScale(100); // As the domain and range have the same value in this example, yScale outputs a 1-to-1 relationship.
}
{
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();
}
// Your code here
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();
}
// 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.
