Published
Edited
Jul 1, 2020
Introduction to ObservablesLearning D3.js - Part 1 - From the Top!Learning D3.js - Part 2 - Now with data!Learning D3.js - Part 3 - Styles and ShapesLearning D3.js - Part 4 - Line ChartLearning D3.js - Part 4 - Line Chart - minifiedLearning D3.js - Part 5 - Bar ChartBasic JavaScript/D3 functions
Learning D3.js - Part 5 - Bar Chart - minified
{
const canvas = d3.select(DOM.svg(width, height))
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height-margin.bottom) + ")")
.call(xAxis)
canvas.append("text")
.attr("x", width/2)
.attr("y", height-5)
.style("text-anchor", "middle")
.text("Months - 2019")
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yAxis)
canvas.append("text")
.attr("transform", "rotate(-90,15,"+(height/2)+")")
.attr("x", 15)
.attr("y", height/2)
.style("text-anchor", "middle")
.text("Interest")
canvas.append("g").selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d,i)=>x(d.date))
.attr("y",(d,i)=>y(d.interest))
.attr("width",x.bandwidth)
.attr("height", d => 0)
.style("stroke-width", 2)
.style("stroke","black")
.style("fill", "steelblue")
.transition()
.attr("height", d => (height-margin.bottom) - y(d.interest))
return canvas.node();
}
x = d3.scaleBand().range([margin.left , width - margin.right]).domain(data.map((d,i)=>d.date)).padding(.1)
xAxis = d3.axisBottom().scale(x)
.tickFormat(d3.timeFormat("%b"))
y = d3.scaleLinear().range([height-margin.bottom , margin.top]).domain([0,100])
yAxis = d3.axisLeft()
.scale(y)
.tickFormat((d,i) => d + "%")
line = d3.line()
.x((d,i)=> x(d.date))
.y((d,i)=> y(d.interest))
iceCream = [
({date:"01/2019",interest:"20"}),
({date:"02/2019",interest:"24"}),
({date:"03/2019",interest:"40.8"}),
({date:"04/2019",interest:"49.25"}),
({date:"05/2019",interest:"62"}),
({date:"06/2019",interest:"81"}),
({date:"07/2019",interest:"87.5"}),
({date:"08/2019",interest:"64.25"}),
({date:"09/2019",interest:"42.8"}),
({date:"10/2019",interest:"30.75"}),
({date:"11/2019",interest:"25"}),
({date:"12/2019",interest:"27.2"}),
]
dateConverter = d3.timeParse("%m/%Y")
data = iceCream.map((d,i) => ({date:dateConverter(d.date),interest:+d.interest}) )
width = 600
height = 300
margin = ({top: 30, right: 40, bottom: 40, left: 50})
d3 = require('d3')
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.
