Built with blockbuilder.org
Last active
December 10, 2019 13:08
-
-
Save Kashif1Naqvi/dbce3dc832aea54b0b6c12b6ec2efa32 to your computer and use it in GitHub Desktop.
line chart d3js v5
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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