Skip to content

Instantly share code, notes, and snippets.

@Kashif1Naqvi
Last active December 10, 2019 13:08
Show Gist options
  • Save Kashif1Naqvi/dbce3dc832aea54b0b6c12b6ec2efa32 to your computer and use it in GitHub Desktop.
Save Kashif1Naqvi/dbce3dc832aea54b0b6c12b6ec2efa32 to your computer and use it in GitHub Desktop.
line chart d3js v5
license: mit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Line Chart</title>
</head>
<body>
<style>
.line-path{
stroke: lightseagreen;
fill: none;
stroke-width: 5;
stroke-linejoin: round;
}
.circle-path{
stroke: rgb(104, 180, 243);
fill:rgb(107, 185, 181);
}
.tick line{
stroke:lightgrey;
opacity: .9;
}
text{
color:lightseagreen;
font-size: larger;
}
.text-data{
fill: lightseagreen;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 30px;
}
.tooltips{
position: absolute;
opacity: .9;
padding: 0px;
background-color: #e4e8f0;
color: lightseagreen;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serifs;
font-size: 19px;
}
.tooltips ::after{
content: "";
position: absolute;
top: 100%;
left: 20%;
margin-left:-15px;
border-width:10px;
border-style: solid;
border-color: #e4e8f0 transparent transparent transparent;
}
</style>
<div id="line"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="index.js" ></script>
</body>
</html>
function render(data){
let xValue = d => new Date(d.timestamp),
yValue = d => d.temperature,
width = window.innerWidth,
height= window.innerHeight,
margin= { top:100, right:70,left:50,bottom:10 },
innerWidth= width - margin.left - margin.right,
innerHeight= height - margin.top - margin.bottom;
let xScale = d3.scaleTime()
.domain(d3.extent(data,xValue))
.range([0,innerWidth]);
let tooltips = d3.select("#line").append("div").attr("class","tooltips")
let yScale = d3.scaleLinear()
.domain(d3.extent(data,yValue))
.range([0,innerHeight]);
let lineGenrator = d3.line()
.x(d=>xScale(xValue(d)))
.y(d=>yScale(yValue(d)))
.curve(d3.curveBasis);
let xAxis = d3.axisBottom(xScale)
let yAxis = d3.axisLeft(yScale).tickSize(-innerWidth)
let svg = d3.select("#line").append("svg").attr("viewBox",`0 0 ${width} ${height}`)
let g = svg.append("g").attr("transform",`translate(${margin.top},${margin.left})`)
let path = g.append("path")
.attr("d",lineGenrator(0))
.attr("class","line-path")
let circle = g.selectAll("circle").data(data).enter().append("circle")
.attr("cx",0)
.attr("cy",0)
.attr("r",6)
.attr("class","circle-path")
.on("mouseover",function(d,i){
let dt = new Date(d.timestamp)
tooltips.html(`<div><p>Temperature ${Math.round(d.temperature)}<b>F</b> <br><b>Month no:</b><i>${dt.getMonth()}</i></p> </div>`)
.style("top", (d3.event.pageY -114) + "px")
.style("left",(d3.event.pageX - 25)+ "px")
})
.on("mouseout",function(d,i){
tooltips.html("")
});
g.append("text").attr("x",innerWidth/2).attr("y",47).text("Time").attr("text-anchor","middle").attr("transform",`translate(0,${innerHeight})`).attr("font-size",28).attr("class","text-data")
g.append("text").attr("x",innerWidth/2 ).attr("y",-12).text("Temperature vs Time").attr("text-anchor","middle").attr("class","title")
.attr("font-size",28).attr("class","text-data")
g.append("text").attr("x",-innerHeight/2).attr("y",-50).text("Temperature").attr("font-size",28).attr("transform","rotate(-90)").attr("class","text-data")
path.transition()
.attr("d",lineGenrator(data))
.duration(2320)
.delay(910)
.ease(d3.easeLinear)
circle.transition()
.attr("cx",d=>xScale(xValue(d))).attr("cy",d=>yScale(yValue(d))).duration(2000);
let xGroup = g.append("g").attr("transform",`translate(0,${innerHeight})`).call(xAxis).attr("class","xAxis")
xGroup.select(".domain").remove()
let yGroup = g.append("g").call(yAxis).attr("class","yAxis")
yGroup.select(".domain ").remove()
}
d3.csv("san.csv").then(data=>{
data.forEach(d => {
d.maxTemperatureF = +d.temperature
d.Date = new Date(d.timestamp)
});
render(data)
})
timestamp temperature
2015-03-20T21:00:00.000Z 23.9516625615764
2015-03-20T22:00:00.000Z 23.0728888291688
2015-03-20T23:00:00.000Z 22.2708190476318
2015-03-21T00:00:00.000Z 21.3394373423804
2015-03-21T01:00:00.000Z 20.1010743049325
2015-03-21T02:00:00.000Z 18.4150717551479
2015-03-21T03:00:00.000Z 17.7483817583905
2015-03-21T04:00:00.000Z 17.6589726749868
2015-03-21T05:00:00.000Z 17.0922334804965
2015-03-21T06:00:00.000Z 17.9022626474071
2015-03-21T07:00:00.000Z 17.9134315019288
2015-03-21T08:00:00.000Z 17.9623415917395
2015-03-21T09:00:00.000Z 18.6299049947767
2015-03-21T10:00:00.000Z 18.7246461115231
2015-03-21T11:00:00.000Z 18.3452032121395
2015-03-21T12:00:00.000Z 17.9509405148159
2015-03-21T13:00:00.000Z 17.6459367384257
2015-03-21T14:00:00.000Z 18.0026108196051
2015-03-21T15:00:00.000Z 18.6413944821435
2015-03-21T16:00:00.000Z 19.3671431509997
2015-03-21T17:00:00.000Z 20.8082012083461
2015-03-21T18:00:00.000Z 22.5238576663828
2015-03-21T19:00:00.000Z 24.4214051463704
2015-03-21T20:00:00.000Z 26.2049693716955
2015-03-21T21:00:00.000Z 26.579802484894
2015-03-21T22:00:00.000Z 26.5525094442272
2015-03-21T23:00:00.000Z 23.9758724990251
2015-03-22T00:00:00.000Z 20.7705334007582
2015-03-22T01:00:00.000Z 19.5826361563267
2015-03-22T02:00:00.000Z 18.7265399946616
2015-03-22T03:00:00.000Z 18.2886029132647
2015-03-22T04:00:00.000Z 17.4904771411586
2015-03-22T05:00:00.000Z 17.1831430954037
2015-03-22T06:00:00.000Z 17.2898856656444
2015-03-22T07:00:00.000Z 17.8578100360021
2015-03-22T08:00:00.000Z 18.1992192220978
2015-03-22T09:00:00.000Z 18.13420905954
2015-03-22T10:00:00.000Z 18.5888149684944
2015-03-22T11:00:00.000Z 18.6733003026984
2015-03-22T12:00:00.000Z 19.1600833190036
2015-03-22T13:00:00.000Z 19.207095797011
2015-03-22T14:00:00.000Z 18.9847082241235
2015-03-22T15:00:00.000Z 19.4293802064908
2015-03-22T16:00:00.000Z 20.8493124700409
2015-03-22T17:00:00.000Z 21.5898145184046
2015-03-22T18:00:00.000Z 22.3397182467298
2015-03-22T19:00:00.000Z 22.7891858876349
2015-03-22T20:00:00.000Z 23.3412628564144
2015-03-22T21:00:00.000Z 23.4926420057589
2015-03-22T22:00:00.000Z 23.0962283240861
2015-03-22T23:00:00.000Z 22.2667502918227
2015-03-23T00:00:00.000Z 21.0266142557277
2015-03-23T01:00:00.000Z 20.0093349857605
2015-03-23T02:00:00.000Z 18.9851414732381
2015-03-23T03:00:00.000Z 18.5245615004214
2015-03-23T04:00:00.000Z 18.290694254732
2015-03-23T05:00:00.000Z 18.0595508666643
2015-03-23T06:00:00.000Z 18.4732789951039
2015-03-23T07:00:00.000Z 18.7258481532495
2015-03-23T08:00:00.000Z 18.5595128641976
2015-03-23T09:00:00.000Z 18.179674037842
2015-03-23T10:00:00.000Z 17.7681299392415
2015-03-23T11:00:00.000Z 17.443021321053
2015-03-23T12:00:00.000Z 17.3451205175492
2015-03-23T13:00:00.000Z 17.4374701133724
2015-03-23T14:00:00.000Z 17.8929191631296
2015-03-23T15:00:00.000Z 18.9122039984753
2015-03-23T16:00:00.000Z 19.6161969984469
2015-03-23T17:00:00.000Z 20.7299868156002
2015-03-23T18:00:00.000Z 21.7689130719553
2015-03-23T19:00:00.000Z 22.5533898355016
2015-03-23T20:00:00.000Z 22.8372668296634
2015-03-23T21:00:00.000Z 23.2014773800322
2015-03-23T22:00:00.000Z 22.5682062882985
2015-03-23T23:00:00.000Z 22.3205675513796
2015-03-24T00:00:00.000Z 20.8661118605035
2015-03-24T01:00:00.000Z 18.5360183512352
2015-03-24T02:00:00.000Z 17.5156724451801
2015-03-24T03:00:00.000Z 17.2066897483676
2015-03-24T04:00:00.000Z 17.1974604599623
2015-03-24T05:00:00.000Z 17.3377835934013
2015-03-24T06:00:00.000Z 17.28662295757
2015-03-24T07:00:00.000Z 17.4291104924263
2015-03-24T08:00:00.000Z 17.4228793012653
2015-03-24T09:00:00.000Z 17.4209561166271
2015-03-24T10:00:00.000Z 17.141757829703
2015-03-24T11:00:00.000Z 17.3048584589793
2015-03-24T12:00:00.000Z 17.337482794781
2015-03-24T13:00:00.000Z 17.7016509341158
2015-03-24T14:00:00.000Z 17.5637528905341
2015-03-24T15:00:00.000Z 18.8276163388499
2015-03-24T16:00:00.000Z 19.4404648699534
2015-03-24T17:00:00.000Z 20.5646049670802
2015-03-24T18:00:00.000Z 21.9525507884113
2015-03-24T19:00:00.000Z 21.9040221846194
2015-03-24T20:00:00.000Z 22.8197541616282
2015-03-24T21:00:00.000Z 22.2390831913042
2015-03-24T22:00:00.000Z 22.4688244906963
2015-03-24T23:00:00.000Z 21.9461828791739
2015-03-25T00:00:00.000Z 21.3218883084538
2015-03-25T01:00:00.000Z 19.9688738415096
2015-03-25T02:00:00.000Z 18.9409031033049
2015-03-25T03:00:00.000Z 18.1829931467353
2015-03-25T04:00:00.000Z 17.6071132686007
2015-03-25T05:00:00.000Z 17.4155712472229
2015-03-25T06:00:00.000Z 17.8112238813252
2015-03-25T07:00:00.000Z 18.0118371454174
2015-03-25T08:00:00.000Z 17.9925110740977
2015-03-25T09:00:00.000Z 17.9146107460869
2015-03-25T10:00:00.000Z 17.6354297651737
2015-03-25T11:00:00.000Z 17.2990959392658
2015-03-25T12:00:00.000Z 16.8942534144482
2015-03-25T13:00:00.000Z 17.0215911252788
2015-03-25T14:00:00.000Z 17.5370547200027
2015-03-25T15:00:00.000Z 19.6239569219906
2015-03-25T16:00:00.000Z 21.4284862546897
2015-03-25T17:00:00.000Z 22.5971622932944
2015-03-25T18:00:00.000Z 24.4516364021043
2015-03-25T19:00:00.000Z 26.314179825294
2015-03-25T20:00:00.000Z 27.2966725797272
2015-03-25T21:00:00.000Z 27.8594008881709
2015-03-25T22:00:00.000Z 26.98771523591
2015-03-25T23:00:00.000Z 26.1419652896808
2015-03-26T00:00:00.000Z 24.2967135065912
2015-03-26T01:00:00.000Z 21.2627783997077
2015-03-26T02:00:00.000Z 19.6223366524463
2015-03-26T03:00:00.000Z 18.9702936572059
2015-03-26T04:00:00.000Z 18.64173108115
2015-03-26T05:00:00.000Z 18.5430028446263
2015-03-26T06:00:00.000Z 18.2597209484404
2015-03-26T07:00:00.000Z 17.8251835175158
2015-03-26T08:00:00.000Z 17.4726877440558
2015-03-26T09:00:00.000Z 17.651946077925
2015-03-26T10:00:00.000Z 17.7491791888976
2015-03-26T11:00:00.000Z 17.5917881825657
2015-03-26T12:00:00.000Z 17.5239416379086
2015-03-26T13:00:00.000Z 17.5307201091079
2015-03-26T14:00:00.000Z 18.2489964460844
2015-03-26T15:00:00.000Z 20.2797517883074
2015-03-26T16:00:00.000Z 21.888709612845
2015-03-26T17:00:00.000Z 23.8693783046019
2015-03-26T18:00:00.000Z 25.6434924437705
2015-03-26T19:00:00.000Z 27.3338701714523
2015-03-26T20:00:00.000Z 30.235307632747
2015-03-26T21:00:00.000Z 31.6784014189275
2015-03-26T22:00:00.000Z 32.4243323492878
2015-03-26T23:00:00.000Z 33.1688980688728
2015-03-27T00:00:00.000Z 30.8713221141196
2015-03-27T01:00:00.000Z 26.8944097638179
2015-03-27T02:00:00.000Z 24.6128150483182
2015-03-27T03:00:00.000Z 22.889746429207
2015-03-27T04:00:00.000Z 21.7148736202902
2015-03-27T05:00:00.000Z 20.8438711038614
2015-03-27T06:00:00.000Z 19.2559699722154
2015-03-27T07:00:00.000Z 18.337368653838
2015-03-27T08:00:00.000Z 17.6177708093268
2015-03-27T09:00:00.000Z 17.1977444392481
2015-03-27T10:00:00.000Z 16.7043132969425
2015-03-27T11:00:00.000Z 16.2471811295094
2015-03-27T12:00:00.000Z 16.087861898997
2015-03-27T13:00:00.000Z 15.6362635324538
2015-03-27T14:00:00.000Z 15.692528763157
2015-03-27T15:00:00.000Z 16.1186855064984
2015-03-27T16:00:00.000Z 17.3886258325874
2015-03-27T17:00:00.000Z 18.2540910121364
2015-03-27T18:00:00.000Z 19.5148327389508
2015-03-27T19:00:00.000Z 20.6023266315466
2015-03-27T20:00:00.000Z 21.3854066767194
2015-03-27T21:00:00.000Z 21.9084983994613
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment