Published
Edited
Apr 3, 2019
d3 = require("d3@5")
exData = [ 40, 90, 30, 60 ];
{
d3.selectAll( "rect" ); // 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 = 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 )
.attr( "y", 0 )
.attr( "width", 20 )
.attr( "height", d => d )
.attr( "fill", "steelblue");
return svg.node();
}
{
// Width and height of the SVG object
let w = 150;
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*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", barWidth )
.attr( "height", d => d) // Set height of rectangle to data value
.attr( "fill", "steelblue");
return svg.node();
}
exData2 = [50,50,50,50]
{
// 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));
// 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
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.