Published
Edited
Apr 8, 2020
1 fork
1 star
md`# D3 Support`
d3 = require('d3')
parseTime = d3.timeParse("%d-%b-%y");
parseTime2 = d3.timeParse("%m/%d/%Y");
date = '1/1/2020'
parseTime(date)
parseTime2(date)
{
// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 50, left: 70},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// parse the date / time
var parseTime = d3.timeParse("%m/%d/%Y");
// set the ranges
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
// define the line
var valueline = d3.line()
.x(function(d) { return x(d.Date); })
.y(function(d) { return y(d.Num); });
// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select(DOM.svg(width,height))
// Get the data
d3.csv("https://gist.githubusercontent.com/nofurtherinformation/46946d1718f0372ce0903a6b3627afff/raw/23d6f1500e2656a6499bd8a3eff5212095bca9c6/COVID.csv").then(function(data) {
// format the data
data.forEach(function(d) {
d.Date = parseTime(d.Date);
d.Num = +d.Num;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Date; }));
y.domain([0, d3.max(data, function(d) { return d.Num; })]);
// Add the valueline path.
svg.append("path")
.data([data])
.attr("class", "line")
.attr("fill","none")
.attr("stroke","red")
.attr("stroke-width","2px")
.attr("d", valueline);
// Add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
});
return svg.node();
}
<style>
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.
