Published
Edited
May 1, 2019
1 star
Insert cell
Insert cell
Insert cell
Insert cell
height = 500
Insert cell
Insert cell
Insert cell
// height = 20
Insert cell
Insert cell
{
let firstNumber = 55
return firstNumber + 10
}
Insert cell
Insert cell
function addingNumbers(number3, number4){
let number5 = number3 + number4
return number5
}
Insert cell
Insert cell
Insert cell
bosData = d3.csv("https://gist.githubusercontent.com/jdev42092/46071bf3284265c37ea07d6328ef7a3a/raw/cc7bfc53f3853437749906ccf7d2cac49c43c9a2/neigh_311.csv", ({neighborhood, num_311}) => ({neighborhood: neighborhood, calls: +num_311}))
Insert cell
Insert cell
{
var 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 = 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();
}
Insert cell
Insert cell
margin = ({top: 15, right: 10, bottom: 25, left: 30})
Insert cell
// Initialize SVG object (using our pre-defined width and height)
svg = d3.select(DOM.svg(width, height));
Insert cell
// Get length of dataset
arrayLength = bosData.length; // length of dataset
Insert cell
maxValue = d3.max(bosData, d=> d.calls); // get max value of our dataset
Insert cell
x_axisLength = (width - margin.right - margin.left); // length of x-axis in our layout
Insert cell
y_axisLength = (height - margin.top - margin.bottom); // length of y-axis in our layout
Insert cell
// Use a scale for the height of the visualization
yScale = d3.scaleLinear()
.domain([0, d3.max(bosData, d=> d.calls)])
.range([margin.bottom, height - margin.top])

Insert cell
// 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");
Insert cell
// 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");
Insert cell
// 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");
Insert cell
// 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)");
Insert cell
svg.node();

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more