D3 Examples - Twitter Scatterplot

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset='utf-8'>
<head>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
    <title>Updating Linechart</title>
</head>
<body>
    <div id="option">
    </div>
</body>
<script>
​
// Define width/height, dateParser, x/yScale (just range), x/yAxes
var margin = {top: 30, right: 20, bottom: 30, left: 20}
width = 600 - margin.left - margin.right
height = 400 - margin.top - margin.bottom
​
var parseDate = d3.timeParse("%d-%b-%y")
​
console.log("updated")
var xScale = d3.scaleTime().range([0,width])    
var yScale = d3.scaleLinear().range([height,0])
​
var xAxis = d3.axisBottom().scale(xScale).ticks(6)
var yAxis = d3.axisRight().scale(yScale).ticks(5)
​
// Draw SVG (adding margins) and Group to hold parts (transforming by top and left margin)
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.bottom + margin.top)
    .style("background-color", "lightgrey")
    .attr("transform","translate(0,10)")
​
var g = svg.append("g").attr("transform",`translate(${margin.left},${margin.top})`)
​
//Ingest the data
d3.csv("twitterData2.csv", function(data){
    console.log(data)
  
})
    