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"}),
]
d3 = require('d3')
dateConverter = d3.timeParse("%m/%Y")
justSomeData = [1,2,3,4]
justSomeData.map((d,i)=> d * Math.PI)
justSomeData.map((d,i)=> d + "\uD83D\uDC08")
data = iceCream.map((d,i) => ({date:dateConverter(d.date),interest:parseFloat(d.interest)}) )
width = 600
height = 300
margin = 60
xScale = d3.scaleTime().range([margin , width - margin]).domain(d3.extent(data, (d,i) => d.date))
yScale = d3.scaleLinear().range([height-margin , margin]).domain(d3.extent(data, (d,i) => d.interest))
line = d3.line()
.x((d,i)=> xScale(d.date))
.y((d,i)=> yScale(d.interest))
{
const canvas = d3.select(DOM.svg(width, height))
canvas.selectAll("path")
.data([data])
.join("path")
.attr("d", function(d,i) { return line(d) })
//.attr("d", line)
.style("stroke", "green" )
.style("stroke-width", 10)
.style("fill", "none")
return canvas.node();
}
xAxis = d3.axisBottom().scale(xScale).tickFormat(d3.timeFormat("%b"))
yAxis = d3.axisLeft().scale(yScale).tickFormat((d,i) => d + " kittens")
{
const canvas = d3.create('svg')
.attr('width', width)
.attr('height', height)
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height-margin) + ")")
.call(xAxis)
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + margin + ",0)")
.call(yAxis)
canvas.selectAll("path.icecream")
.data([data])
.join("path")
.attr("d", function(d,i) { return line(d) })
.attr("class", "icecream")
.style("stroke", "black" )
.style("stroke-width", 2)
.style("fill", "none")
return canvas.node();
}
yAxis_updated = d3.axisLeft()
.scale(yScale)
.tickFormat((d,i) => d + "%")
xAxis_updated =
d3.axisBottom().scale(xScale)
.tickFormat(d3.timeFormat("%b"))
{
const canvas = d3.select(DOM.svg(width, height))
canvas.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height-margin) + ")")
.call(xAxis_updated)
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 + ",0)")
.call(yAxis_updated)
canvas.append("text")
.attr("transform", "rotate(-90,15,"+(height/2)+")")
//.attr("transform", "rotate(9)")
.attr("x", 15)
.attr("y", height/2)
.style("text-anchor", "middle")
.text("Interest")
canvas.selectAll("path.icecream")
.data([data])
.join("path")
.attr("d", line)
.attr("class", "icecream")
.style("stroke", "black" )
.style("stroke-width", 2)
.style("fill", "none")
return canvas.node();
}
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.
