Skip to content

Instantly share code, notes, and snippets.

@finnqiao

finnqiao/data.csv

Last active January 31, 2019 00:40
Show Gist options
  • Save finnqiao/a6f1f46250f1db31fdd50a9231042cff to your computer and use it in GitHub Desktop.
Save finnqiao/a6f1f46250f1db31fdd50a9231042cff to your computer and use it in GitHub Desktop.
Download ZIP
d3_scatter_with_materialize
Raw
data.csv
date count
12/2018 233
11/2018 228
10/2018 262
09/2018 293
08/2018 350
07/2018 400
06/2018 225
05/2018 243
04/2018 221
03/2018 235
02/2018 235
01/2018 311
12/2017 500
11/2017 351
10/2017 482
09/2017 58
08/2017 374
07/2017 485
06/2017 392
05/2017 356
04/2017 401
03/2017 337
02/2017 415
01/2017 324
12/2016 347
11/2016 489
10/2016 481
09/2016 591
08/2016 550
07/2016 681
06/2016 427
05/2016 380
04/2016 384
03/2016 411
02/2016 433
01/2016 419
12/2015 436
11/2015 902
10/2015 653
09/2015 730
08/2015 627
07/2015 736
06/2015 488
05/2015 466
04/2015 454
03/2015 480
02/2015 344
01/2015 540
12/2014 526
11/2014 549
10/2014 795
09/2014 835
08/2014 928
07/2014 1103
06/2014 784
05/2014 656
04/2014 670
03/2014 519
02/2014 555
01/2014 718
12/2013 769
11/2013 809
10/2013 798
09/2013 796
08/2013 923
07/2013 986
06/2013 647
05/2013 537
04/2013 430
03/2013 400
02/2013 284
01/2013 401
12/2012 675
11/2012 782
10/2012 678
09/2012 778
08/2012 907
07/2012 944
06/2012 768
05/2012 522
04/2012 504
03/2012 538
02/2012 398
01/2012 588
12/2011 538
11/2011 450
10/2011 644
09/2011 561
08/2011 646
07/2011 771
06/2011 409
05/2011 321
04/2011 318
03/2011 336
02/2011 276
01/2011 330
12/2010 307
11/2010 366
10/2010 479
09/2010 453
08/2010 533
07/2010 852
06/2010 390
05/2010 333
04/2010 296
03/2010 262
02/2010 191
01/2010 294
12/2009 294
11/2009 324
10/2009 324
09/2009 601
08/2009 504
07/2009 617
06/2009 392
05/2009 360
04/2009 319
03/2009 341
02/2009 397
01/2009 499
12/2008 350
11/2008 459
10/2008 536
09/2008 386
08/2008 506
07/2008 577
06/2008 485
05/2008 347
04/2008 444
03/2008 341
02/2008 372
01/2008 476
12/2007 362
11/2007 375
10/2007 449
09/2007 451
08/2007 474
07/2007 467
06/2007 431
05/2007 319
04/2007 323
03/2007 364
02/2007 268
01/2007 441
12/2006 387
11/2006 413
10/2006 401
09/2006 330
08/2006 430
07/2006 431
06/2006 344
05/2006 302
04/2006 323
03/2006 307
02/2006 234
01/2006 254
12/2005 279
11/2005 467
10/2005 488
09/2005 532
08/2005 355
07/2005 459
06/2005 412
05/2005 303
04/2005 317
03/2005 359
02/2005 278
01/2005 261
12/2004 306
11/2004 331
10/2004 453
09/2004 413
08/2004 552
07/2004 439
06/2004 432
05/2004 391
04/2004 393
03/2004 416
02/2004 301
01/2004 305
12/2003 383
11/2003 472
10/2003 475
09/2003 510
08/2003 545
07/2003 453
06/2003 309
05/2003 252
04/2003 226
03/2003 192
02/2003 267
01/2003 328
12/2002 251
11/2002 295
10/2002 340
09/2002 378
08/2002 489
07/2002 434
06/2002 352
05/2002 251
04/2002 194
03/2002 197
02/2002 260
01/2002 239
12/2001 214
11/2001 280
10/2001 257
09/2001 351
08/2001 397
07/2001 410
06/2001 315
05/2001 255
04/2001 236
03/2001 291
02/2001 235
01/2001 284
12/2000 233
11/2000 232
10/2000 330
09/2000 299
08/2000 298
07/2000 366
06/2000 278
05/2000 189
04/2000 200
03/2000 225
02/2000 204
01/2000 231
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style type="text/css">
.axis line {
stroke-width:1px;
stroke: #ccc;
stroke-dasharray: 2px 2px;
}
.axis text {
font-size: 12px;
fill: #777;
}
.axis path {
display: none;
}
.circle-group text {
fill: #aaa; /*grey out text*/
font-size: 11px;
}
button {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
nav {
margin-bottom: 70px;
}
.brand-logo {
margin-left: 10px;
}
.right li {
margin-left: 5px;
margin-right: 5px;
}
.btn {
margin-top: 15px;
}
</style>
<body>
<nav id='navDiv'></nav>
</body>
<script>
// Declaration of variables
var radius = 10;
var parseTime = d3.timeParse('%m/%Y');
var transitionTime = 1000;
var margin = {top:50, bottom: 50, right: 50, left: 90}
var width = 960 - margin.right - margin.left;
var height = 600 - margin.top - margin.bottom;
// Create main svg image and g tag to house grouped elements
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// Define xScale and yScale
var xScale = d3.scaleTime().range([0,width]);
var yScale = d3.scaleLinear().range([height,0]);
// Define Axes
var xAxis = d3.axisBottom().tickSize(-height).tickPadding(30);
var yAxis = d3.axisLeft().tickSize(-width).tickPadding(30);
// Create groups for Axes
var xAxisGroup = svg.append('g')
.attr("class", "x axis")
.attr("transform", `translate(0,${height})`);
var yAxisGroup = svg.append('g')
.attr("class", "y axis")
// Main ready function
d3.csv("data.csv", ready)
function ready(error, data) {
if (error) return console.warn(error);
window.data = data;
data.forEach(d => {
d.count = +d.count;
d.month = d.date.split('/')[0];
d.date = parseTime(d.date);
d.year = d.date.getYear() + 1900;
});
// Get only start date info
var startData = data.filter(d => d.year == 2018)
// Define and call axes
xScale.domain(d3.extent(startData, d => d.date));
yScale.domain(d3.extent(startData, d=> d.count));
xAxis.scale(xScale);
yAxis.scale(yScale);
xAxisGroup.call(xAxis);
yAxisGroup.call(yAxis);
// Create buttons
var yearList = d3.set(data.map(d => d.year)).values();
d3.select('#navDiv')
.append('div')
.attr('class','nav-wrapper')
.append('a')
.attr('class','brand-logo')
.text('UFO Sightings in 2018')
d3.select('.nav-wrapper')
.append('ul')
.attr('class','right hide-on-med-and-down')
.selectAll('li')
.data(yearList)
.enter().append('li')
.attr('class','btn')
.text(d => d)
.on('click', d => dataSwap(d))
// Draw lines
var valueLine = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.count));
svg.append("path")
.data([data])
.attr("class", "line")
.attr("d", valueLine)
.attr("fill", "none")
.attr("stroke_width", 10)
.attr("stroke", "#aaa")
// Create UFO groups
var ufoGroup = svg.selectAll('ufoGroup')
.data(startData).enter().append('g')
.attr('class', 'ufoGroup')
.attr('transform', d => `translate(${xScale(d.date)},${yScale(d.count)})`)
.on('mouseenter', function(d) {
d3.select(this)
.select('text')
.transition()
.duration(0)
.style('opacity', 1)
d3.selectAll('circle')
.style('opacity', 0.5)
d3.select(this)
.select('circle')
.transition()
.ease(d3.easeElastic)
.duration(transitionTime)
.style('opacity', 1)
.attr('r', radius*2)
})
.on('mouseleave', function(d) {
d3.select(this)
.select('text')
.transition()
.style('opacity', 0)
d3.select(this)
.select('circle')
.transition()
.ease(d3.easeElastic)
.duration(transitionTime)
.attr('r', radius)
d3.selectAll('circle')
.style('opacity', 1)
});
// Append circles
ufoGroup.append('circle')
.attr('class','ufoCircle')
.style('fill','#51A49A')
.attr('r', radius);
// Append text
ufoGroup.append('text')
.attr('class', 'ufoText')
.attr('dx', radius * 1.5)
.attr('dy', -radius * 1.5)
.text(d => d.count)
.style('opacity', 0);
}
// Data swap function to update data
function dataSwap(year) {
var thisDataGroup = data.filter(d => d.year == year);
// Update scale
xScale.domain(d3.extent(thisDataGroup, d => d.date));
yScale.domain(d3.extent(thisDataGroup, d => d.count));
xAxis.scale(xScale);
yAxis.scale(yScale);
// Call and update axes
xAxisGroup.call(xAxis);
yAxisGroup.transition()
.duration(transitionTime)
.call(yAxis);
// Redraw line
var valueLine = d3.line()
.x(d => xScale(d.date))
.y(d => yScale(d.count));
svg.selectAll('.line')
.data([thisDataGroup])
.attr("class", "line")
.attr("d", valueLine)
.attr("fill", "none")
.attr("stroke_width", 10)
.attr("stroke", "#aaa")
// Update data for all groups
svg.selectAll('.ufoGroup')
.data(thisDataGroup)
.transition()
.ease(d3.easeElastic)
.duration(transitionTime)
.attr('transform', d => `translate(${xScale(d.date)},${yScale(d.count)})`);
// Update labels for all groups
svg.selectAll('.ufoText')
.data(thisDataGroup)
.text(d => d.count);
// Update title
d3.select('.brand-logo')
.text(`UFO Sightings in ${year}`)
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment