scatterplot svg w/ time scale

forked from lucamerzi's block: scatterplot svg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3 Scatter Plot</title>
    <script src="https://d3js.org/d3.v5.js"></script>
  	<style>
      #chart{ width:800px;height:400px;background-color:#f7f7f7;margin:25px auto; }
      .x-axis path .x-axis line{ shape-rendering: crispEdges; }
      .x-axis text{ font-family:sans-serif;font-weight:bold; }
      .y-axis text{ font-family:sans-serif;font-weight:bold; }
    </style>
</head>
<body>
<div id="chart"></div>
<script>

var data = [
    { date: "07/01/2017", num: 20 },
    { date: "07/02/2017", num: 37 },
    { date: "07/03/2017", num: 25 },
    { date: "07/04/2017", num: 45 },
    { date: "07/05/2017", num: 23 },
    { date: "07/06/2017", num: 33 },
    { date: "07/07/2017", num: 49 },
    { date: "07/08/2017", num: 40 },
    { date: "07/09/2017", num: 36 },
    { date: "07/10/2017", num: 27 }
  ]
  
  var chart_width     = 800
  var chart_height    = 400
  var padding         = 50
  var time_parse      = d3.timeParse("%m/%d/%Y")
  var time_format     = d3.timeFormat("%B %d");
  
  // parsing dates in data array
	data.forEach(function(el){
    el["date"] = time_parse(el["date"])
  })
    
  // create svg element
  var svg = d3.select("#chart")
  	.append("svg")
  	.attr("width", chart_width)
  	.attr("height", chart_height)
  
  // create x_scale
  var x_scale = d3.scaleTime()
  		// max and min
			// .domain([ d3.min(data, d => d.date), d3.max(data, d => d.date) ])
  		// hard-coded
  		.domain([ time_parse("06/30/2017"), time_parse("07/11/2017") ])
  		.range([padding, chart_width - padding * 2])
  
  // create y_scale
  var y_scale = d3.scaleLinear()
  		.domain([0, d3.max(data, function(d){
        return d.num
      })])
  		.range([chart_height - padding, padding])
  
  // create a scale to replace r scale
  var a_scale = d3.scaleSqrt()
		.domain([0, d3.max(data,function(d){
      return d.num
    })]) 
  	.range([0, 25])  
  
  // create x_axis
  var x_axis = d3.axisBottom( x_scale )
     .ticks(6)
  
  svg.append("g")
  	 .classed("x-axis", true)
  	 .attr("transform", `translate(0,${chart_height - padding})`)
  	 .call( x_axis )
  
  // create y_axis
  var y_axis = d3.axisLeft( y_scale )
  	 .ticks(4)
  svg.append("g")
  	 .classed("y-axis", true)
     .attr("transform", `translate(${padding},0)`)
  	 .call(y_axis)
  
  // add circles
  svg.selectAll("circle")
  	.data(data)
  	.enter()
  	.append("circle")
  	.attr("cx", function(d){
    	return x_scale(d.date)
  	})
  	.attr("cy", function(d){
    	return y_scale(d.num)
  	})
  	.attr("r", function(d){
    	return a_scale(d.num)
  	})
  	.attr("fill", "#D1AB0E")
  
  // create labels
  svg.append("g").selectAll("text")
  	.data(data)
  	.enter()
  	.append("text")
  	.text(function(d){
    return (`${time_format(d.date)}`)
  	})
  	.attr("x", function(d){
    return x_scale(d.date)
  	})
  	.attr("y", function(d){
    return y_scale(d.num)
  	})
  	.attr("font-size", "12")
  
</script>
</body>
</html>

https://d3js.org/d3.v5.js