The avatar for @dudaspm
Patrick M. Dudas
Published
D3 in ObservableHQ
Edited
Dec 7, 2020
1 fork
2 stars
D3 in ObservableHQ
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 - minified
Learning D3.js - Part 5 - Bar Chart
Learning D3.js - Part 5 - Bar Chart - minifiedBasic JavaScript/D3 functions
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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"}),
]
Insert cell
Insert cell
d3 = require('d3')
Insert cell
Insert cell
Insert cell
dateConverter = d3.timeParse("%m/%Y")
Insert cell
data = iceCream.map((d,i) => ({date:dateConverter(d.date),interest:+d.interest}) )
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
margin["left"]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
someData = [1,2,3,4,5,6,7,8,9,10]
Insert cell
Insert cell
tryingScaleBands = d3.scaleBand().range([0,100]).domain(d3.extent(someData))
Insert cell
Insert cell
someData.map(d=>tryingScaleBands(d))
Insert cell
Insert cell
temp = d3.scaleBand().range([0,1000]).domain([0,4,14,20,30,31,42,50,59,62])
Insert cell
[0,4,14,20,30,31,42,50,59,62].map(d=>temp(d))
Insert cell
letsTryScaleBandsAgain = d3.scaleBand().range([0,100]).domain(someData)
Insert cell
someData.map(d=>letsTryScaleBandsAgain(d))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const height = 75
const width = 600
const margin = ({top: 30, right: 40, bottom: 40, left: 50})
const canvas = d3.select(DOM.svg(width, height))

const scaleBand = d3.scaleBand().range([margin.left,width-margin.right]).domain(someData)
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height-20) + ")")
.call(d3.axisBottom().scale(scaleBand))
console.log(scaleBand.bandwidth())
canvas.append("g").selectAll("rect")
.data(someData)
.join("rect")
.attr("x", (d,i)=>scaleBand(d))
.attr("y", height-margin.bottom)
.attr("width",scaleBand.bandwidth)
.attr("height",20)
.style("stroke-width", 2)
.style("stroke","black")
.style("fill", "steelblue")
return canvas.node();
}

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
data.map((d,i)=>d.date)
Insert cell
x = d3.scaleBand().range([margin.left , width - margin.right]).domain(data.map((d,i)=>d.date)).padding(.1)
Insert cell
Insert cell
xAxis = d3.axisBottom().scale(x)
.tickFormat(d3.timeFormat("%b"))
Insert cell
Insert cell
y = d3.scaleLinear().range([height-margin.bottom , margin.top]).domain([0,100])
Insert cell
yAxis = d3.axisLeft()
.scale(y)
.tickFormat((d,i) => d + "%")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
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 => (height-margin.bottom) - y(d.interest))
.style("stroke-width", 2)
.style("stroke","black")
.style("fill", "steelblue")

return canvas.node();
}
Insert cell
{
const canvas = d3.select(DOM.svg(width, height))

canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height-margin.bottom) + ")")
.call(xAxis)
.selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
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 => (height-margin.bottom) - y(d.interest))
.style("stroke-width", 2)
.style("stroke","black")
.style("fill", "steelblue")

return canvas.node();
}
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