Skip to content

Instantly share code, notes, and snippets.

@freaktiful

freaktiful/bar-data.csv

Last active September 21, 2021 09:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save freaktiful/519a1c999d8a7c3c52acb4e834d65fdb to your computer and use it in GitHub Desktop.
Save freaktiful/519a1c999d8a7c3c52acb4e834d65fdb to your computer and use it in GitHub Desktop.
Download ZIP
Bar chart with bar selection opens linear chart with multiple interval selection
Raw
bar-data.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 13 should actually have 3 columns, instead of 2. in line 12.
"date","y",
"25/07/2018 8:00","250",
"25/07/2018 8:10","400",
"25/07/2018 8:20","120",
"25/07/2018 8:30","200",
"25/07/2018 8:40","120",
"25/07/2018 8:50","320",
"25/07/2018 9:00","390",
"25/07/2018 9:10","100",
"25/07/2018 9:20","100",
"25/07/2018 9:30","300",
"25/07/2018 9:40","400",
"25/07/2018 9:50","500"
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>Soroll window selection</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Custom styling -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Bootstrap grid setup -->
<div class="container">
<div class="row">
<div id="chart-area"></div>
</div>
<div class="row" id="line-chart-display" style="display:none">
<div id="line-area"></div>
<div class = "buttons" style="margin-left:100px">
<button onclick="addWindow()"> Añadir ventana </button>
<div id="windows" style="padding:20px;margin-top:15px;border:solid 2px grey"></div>
</div>
</div>
</div>
<!-- External JS libraries -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://unpkg.com/d3-v6-tip@1.0.6/build/d3-v6-tip.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/bumbeishvili/d3-tip-for-v6@4/d3-tip.min.css">
<script src="https://d3js.org/d3-dispatch.v3.min.js"></script>
<script src="https://d3js.org/d3-selection.v3.min.js"></script>
<script src="https://d3js.org/d3-drag.v3.min.js"></script>
<!-- Custom JS -->
<script src="main.js"></script>
</body>
</html>
Raw
line-data.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 601 should actually have 3 columns, instead of 2. in line 600.
"hour","measure",
"00:00","753",
"00:01","297",
"00:02","258",
"00:03","358",
"00:04","610",
"00:05","723",
"00:06","340",
"00:07","624",
"00:08","502",
"00:09","411",
"00:10","53",
"00:11","410",
"00:12","259",
"00:13","54",
"00:14","486",
"00:15","787",
"00:16","489",
"00:17","157",
"00:18","240",
"00:19","87",
"00:20","196",
"00:21","746",
"00:22","629",
"00:23","618",
"00:24","607",
"00:25","611",
"00:26","88",
"00:27","759",
"00:28","50",
"00:29","602",
"00:30","263",
"00:31","59",
"00:32","317",
"00:33","567",
"00:34","49",
"00:35","329",
"00:36","753",
"00:37","637",
"00:38","648",
"00:39","584",
"00:40","30",
"00:41","58",
"00:42","639",
"00:43","443",
"00:44","612",
"00:45","539",
"00:46","750",
"00:47","606",
"00:48","442",
"00:49","716",
"00:50","320",
"00:51","484",
"00:52","709",
"00:53","169",
"00:54","485",
"00:55","430",
"00:56","293",
"00:57","189",
"00:58","134",
"00:59","646",
"01:00","92",
"01:01","489",
"01:02","253",
"01:03","482",
"01:04","591",
"01:05","718",
"01:06","448",
"01:07","410",
"01:08","284",
"01:09","187",
"01:10","206",
"01:11","375",
"01:12","183",
"01:13","705",
"01:14","27",
"01:15","99",
"01:16","244",
"01:17","613",
"01:18","779",
"01:19","386",
"01:20","764",
"01:21","92",
"01:22","453",
"01:23","394",
"01:24","97",
"01:25","707",
"01:26","408",
"01:27","423",
"01:28","117",
"01:29","706",
"01:30","424",
"01:31","169",
"01:32","627",
"01:33","28",
"01:34","572",
"01:35","397",
"01:36","401",
"01:37","221",
"01:38","313",
"01:39","337",
"01:40","466",
"01:41","313",
"01:42","104",
"01:43","724",
"01:44","26",
"01:45","527",
"01:46","489",
"01:47","611",
"01:48","287",
"01:49","681",
"01:50","427",
"01:51","678",
"01:52","418",
"01:53","243",
"01:54","82",
"01:55","266",
"01:56","537",
"01:57","353",
"01:58","519",
"01:59","391",
"02:00","234",
"02:01","59",
"02:02","107",
"02:03","161",
"02:04","235",
"02:05","797",
"02:06","560",
"02:07","214",
"02:08","652",
"02:09","67",
"02:10","122",
"02:11","340",
"02:12","656",
"02:13","97",
"02:14","476",
"02:15","525",
"02:16","102",
"02:17","712",
"02:18","486",
"02:19","732",
"02:20","92",
"02:21","52",
"02:22","117",
"02:23","335",
"02:24","439",
"02:25","629",
"02:26","175",
"02:27","70",
"02:28","692",
"02:29","201",
"02:30","522",
"02:31","300",
"02:32","399",
"02:33","705",
"02:34","664",
"02:35","747",
"02:36","570",
"02:37","356",
"02:38","63",
"02:39","607",
"02:40","565",
"02:41","611",
"02:42","201",
"02:43","612",
"02:44","794",
"02:45","256",
"02:46","532",
"02:47","36",
"02:48","248",
"02:49","337",
"02:50","364",
"02:51","379",
"02:52","322",
"02:53","393",
"02:54","645",
"02:55","85",
"02:56","769",
"02:57","531",
"02:58","632",
"02:59","446",
"03:00","773",
"03:01","616",
"03:02","613",
"03:03","736",
"03:04","421",
"03:05","173",
"03:06","445",
"03:07","534",
"03:08","525",
"03:09","70",
"03:10","32",
"03:11","143",
"03:12","194",
"03:13","391",
"03:14","142",
"03:15","643",
"03:16","714",
"03:17","593",
"03:18","133",
"03:19","137",
"03:20","696",
"03:21","736",
"03:22","151",
"03:23","100",
"03:24","208",
"03:25","640",
"03:26","362",
"03:27","209",
"03:28","743",
"03:29","178",
"03:30","570",
"03:31","731",
"03:32","584",
"03:33","109",
"03:34","632",
"03:35","795",
"03:36","374",
"03:37","201",
"03:38","535",
"03:39","290",
"03:40","290",
"03:41","396",
"03:42","596",
"03:43","388",
"03:44","504",
"03:45","174",
"03:46","51",
"03:47","416",
"03:48","98",
"03:49","658",
"03:50","358",
"03:51","242",
"03:52","470",
"03:53","696",
"03:54","744",
"03:55","267",
"03:56","77",
"03:57","248",
"03:58","575",
"03:59","326",
"04:00","301",
"04:01","86",
"04:02","177",
"04:03","96",
"04:04","572",
"04:05","645",
"04:06","175",
"04:07","683",
"04:08","569",
"04:09","379",
"04:10","302",
"04:11","724",
"04:12","442",
"04:13","374",
"04:14","40",
"04:15","250",
"04:16","43",
"04:17","390",
"04:18","781",
"04:19","34",
"04:20","356",
"04:21","775",
"04:22","66",
"04:23","605",
"04:24","338",
"04:25","305",
"04:26","534",
"04:27","788",
"04:28","682",
"04:29","156",
"04:30","295",
"04:31","759",
"04:32","411",
"04:33","116",
"04:34","433",
"04:35","302",
"04:36","291",
"04:37","40",
"04:38","306",
"04:39","159",
"04:40","746",
"04:41","416",
"04:42","724",
"04:43","493",
"04:44","125",
"04:45","189",
"04:46","128",
"04:47","414",
"04:48","44",
"04:49","234",
"04:50","141",
"04:51","133",
"04:52","473",
"04:53","498",
"04:54","581",
"04:55","484",
"04:56","630",
"04:57","441",
"04:58","464",
"04:59","363",
"05:00","173",
"05:01","594",
"05:02","194",
"05:03","30",
"05:04","793",
"05:05","185",
"05:06","603",
"05:07","390",
"05:08","730",
"05:09","611",
"05:10","789",
"05:11","782",
"05:12","596",
"05:13","658",
"05:14","492",
"05:15","92",
"05:16","597",
"05:17","28",
"05:18","630",
"05:19","569",
"05:20","267",
"05:21","660",
"05:22","215",
"05:23","733",
"05:24","420",
"05:25","418",
"05:26","633",
"05:27","120",
"05:28","564",
"05:29","121",
"05:30","54",
"05:31","469",
"05:32","775",
"05:33","235",
"05:34","93",
"05:35","462",
"05:36","673",
"05:37","217",
"05:38","748",
"05:39","383",
"05:40","71",
"05:41","493",
"05:42","573",
"05:43","202",
"05:44","635",
"05:45","683",
"05:46","170",
"05:47","335",
"05:48","711",
"05:49","502",
"05:50","559",
"05:51","343",
"05:52","348",
"05:53","389",
"05:54","796",
"05:55","399",
"05:56","82",
"05:57","484",
"05:58","234",
"05:59","670",
"06:00","638",
"06:01","230",
"06:02","269",
"06:03","207",
"06:04","334",
"06:05","151",
"06:06","435",
"06:07","632",
"06:08","40",
"06:09","759",
"06:10","512",
"06:11","630",
"06:12","208",
"06:13","380",
"06:14","526",
"06:15","668",
"06:16","255",
"06:17","78",
"06:18","447",
"06:19","590",
"06:20","457",
"06:21","780",
"06:22","684",
"06:23","644",
"06:24","379",
"06:25","75",
"06:26","464",
"06:27","190",
"06:28","447",
"06:29","571",
"06:30","188",
"06:31","267",
"06:32","731",
"06:33","164",
"06:34","299",
"06:35","435",
"06:36","763",
"06:37","47",
"06:38","309",
"06:39","428",
"06:40","441",
"06:41","144",
"06:42","586",
"06:43","529",
"06:44","110",
"06:45","563",
"06:46","370",
"06:47","470",
"06:48","398",
"06:49","443",
"06:50","271",
"06:51","358",
"06:52","591",
"06:53","50",
"06:54","471",
"06:55","632",
"06:56","694",
"06:57","776",
"06:58","504",
"06:59","186",
"07:00","610",
"07:01","165",
"07:02","73",
"07:03","186",
"07:04","161",
"07:05","705",
"07:06","638",
"07:07","736",
"07:08","436",
"07:09","781",
"07:10","533",
"07:11","508",
"07:12","274",
"07:13","327",
"07:14","417",
"07:15","305",
"07:16","610",
"07:17","348",
"07:18","339",
"07:19","499",
"07:20","89",
"07:21","741",
"07:22","688",
"07:23","291",
"07:24","518",
"07:25","673",
"07:26","379",
"07:27","598",
"07:28","371",
"07:29","461",
"07:30","47",
"07:31","212",
"07:32","457",
"07:33","535",
"07:34","175",
"07:35","56",
"07:36","446",
"07:37","527",
"07:38","503",
"07:39","595",
"07:40","765",
"07:41","92",
"07:42","776",
"07:43","282",
"07:44","310",
"07:45","125",
"07:46","781",
"07:47","55",
"07:48","425",
"07:49","364",
"07:50","256",
"07:51","441",
"07:52","464",
"07:53","367",
"07:54","551",
"07:55","554",
"07:56","608",
"07:57","712",
"07:58","522",
"07:59","762",
"08:00","237",
"08:01","112",
"08:02","245",
"08:03","434",
"08:04","742",
"08:05","662",
"08:06","384",
"08:07","436",
"08:08","421",
"08:09","162",
"08:10","198",
"08:11","273",
"08:12","219",
"08:13","608",
"08:14","141",
"08:15","81",
"08:16","170",
"08:17","177",
"08:18","128",
"08:19","598",
"08:20","85",
"08:21","502",
"08:22","128",
"08:23","222",
"08:24","80",
"08:25","91",
"08:26","658",
"08:27","422",
"08:28","781",
"08:29","575",
"08:30","115",
"08:31","384",
"08:32","319",
"08:33","784",
"08:34","634",
"08:35","32",
"08:36","295",
"08:37","713",
"08:38","469",
"08:39","522",
"08:40","348",
"08:41","762",
"08:42","675",
"08:43","161",
"08:44","322",
"08:45","90",
"08:46","157",
"08:47","598",
"08:48","170",
"08:49","726",
"08:50","246",
"08:51","403",
"08:52","660",
"08:53","238",
"08:54","377",
"08:55","770",
"08:56","579",
"08:57","158",
"08:58","278",
"08:59","759",
"09:00","725",
"09:01","483",
"09:02","69",
"09:03","166",
"09:04","681",
"09:05","300",
"09:06","424",
"09:07","185",
"09:08","375",
"09:09","268",
"09:10","169",
"09:11","224",
"09:12","55",
"09:13","623",
"09:14","174",
"09:15","547",
"09:16","288",
"09:17","217",
"09:18","61",
"09:19","363",
"09:20","746",
"09:21","495",
"09:22","665",
"09:23","665",
"09:24","606",
"09:25","119",
"09:26","784",
"09:27","139",
"09:28","574",
"09:29","638",
"09:30","539",
"09:31","123",
"09:32","156",
"09:33","460",
"09:34","573",
"09:35","721",
"09:36","270",
"09:37","620",
"09:38","163",
"09:39","164",
"09:40","741",
"09:41","590",
"09:42","723",
"09:43","654",
"09:44","36",
"09:45","329",
"09:46","767",
"09:47","510",
"09:48","296",
"09:49","395",
"09:50","726",
"09:51","111",
"09:52","319",
"09:53","395",
"09:54","685",
"09:55","44",
"09:56","97",
"09:57","776",
"09:58","228",
"09:59","48"
Raw
main.js
/*
* main.js
* Mastering Data Visualization with D3.js
* 5.2 - Looping with intervals
*/
const MARGIN = { LEFT: 100, RIGHT: 10, TOP: 10, BOTTOM: 100 }
const WIDTH = 1200 - MARGIN.LEFT - MARGIN.RIGHT
const HEIGHT = 400 - MARGIN.TOP - MARGIN.BOTTOM
const MARGINHEIGHT = 400 - MARGIN.BOTTOM
const MARGINWIDTH = 900 - MARGIN.RIGHT
const svg = d3.select("#chart-area").append("svg")
.attr("width", WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
.attr("height", HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)
const svgline = d3.select("#line-area").append("svg")
.attr("width", WIDTH + MARGIN.LEFT + MARGIN.RIGHT)
.attr("height", HEIGHT + MARGIN.TOP + MARGIN.BOTTOM)
const g = svg.append("g")
.attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`)
const gline = svgline.append("g")
.attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`)
d3.csv("bar-data.csv").then(data => {
data.forEach(d => {
d.y = Number(d.y)
})
const x = d3.scaleBand()
.domain(data.map(d => d.date))
.range([0, WIDTH])
.paddingInner(0.3)
.paddingOuter(0.2)
const y = d3.scaleLinear()
//.domain([0, d3.max(data, d => d.y)])
.domain([0, 1000])
.range([HEIGHT, 0])
const xAxisCall = d3.axisBottom(x)
const xAxisGrid = d3.axisBottom(x).tickSize(-HEIGHT).tickFormat('').ticks(10);
svg.append('g')
.attr('class', 'x axis-grid')
.attr('id', 'dom-grid')
.attr("transform", `translate(${MARGIN.LEFT}, ${HEIGHT + MARGIN.TOP})`)
.call(xAxisGrid);
g.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${HEIGHT})`)
.call(xAxisCall)
.selectAll("text")
.attr("y", "10")
.attr("x", "-5")
.attr("text-anchor", "end")
.attr("transform", "rotate(-40)")
const yAxisCall = d3.axisLeft(y)
.ticks(4)
.tickFormat(d => d + "Hz")
const yAxisGrid = d3.axisLeft(y).tickSize(-WIDTH).tickFormat('').ticks(4);
svg.append('g')
.attr('class', 'y axis-grid')
.attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`)
.call(yAxisGrid);
g.append("g")
.attr("class", "y axis")
.call(yAxisCall)
var tip = d3.tip().attr('class', 'd3-tip')
.html((EVENT, d) => {
console.log(d)
return `<div style="background-color:white;padding:6px;border-radius:5px">
<div><b>${d.date}</b></div>
<hr>
<div>Mesura de soroll: ${d.y}Hz</div>
</div>`
})
g.call(tip)
const rects = g.selectAll("rect")
.data(data)
rects.enter().append("rect")
.attr("y", d => y(d.y))
.attr("x", (d) => x(d.date))
.attr("width", x.bandwidth)
.attr("height", d => HEIGHT - y(d.y))
.attr("fill", "grey")
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
.on("click", function (d) {
windows = []
document.getElementById("windows").innerHTML = addWindowText()
d3.selectAll('#rectwindow').remove()
d3.selectAll("rect")
.attr("fill", "grey")
d3.select(this)
.attr("fill", "#73EDFF");
var x = document.getElementById("line-chart-display");
if (x.style.display === "none") {
x.style.display="block"
}
})
})
var datum = null
var scale = null
d3.csv("line-data.csv").then(data => {
data.forEach(d => {
d.measure = Number(d.measure)
})
datum = data
const xline = d3.scaleBand()
.domain(data.map(d => d.hour))
.range([0, WIDTH])
.paddingInner(0.3)
.paddingOuter(0.2)
scale = xline
const yline = d3.scaleLinear()
//.domain([0, d3.max(data, d => d.y)])
.domain([0, 1000])
.range([HEIGHT, 0])
const xAxisCallLine = d3.axisBottom(xline).tickFormat((d, i) => {
if (i%10 == 0) {
return d
} else return ""
})
const xAxisGridLine = d3.axisBottom(xline).tickSize(-HEIGHT).tickFormat('').ticks(10);
svgline.append('g')
.attr('class', 'x axis-grid')
.attr('id', 'chart-grid')
.attr("transform", `translate(${MARGIN.LEFT}, ${HEIGHT + MARGIN.TOP})`)
.call(xAxisGridLine);
gline.append("g")
.attr("class", "x axis")
.attr("transform", `translate(0, ${HEIGHT})`)
.call(xAxisCallLine)
.selectAll("text")
.attr("y", "10")
.attr("x", "-5")
.attr("text-anchor", "end")
.attr("transform", "rotate(-40)")
const yAxisCallLine = d3.axisLeft(yline)
.ticks(5)
.tickFormat(d => d + "Hz")
const yAxisGridLine = d3.axisLeft(yline).tickSize(-WIDTH).tickFormat('').ticks(5);
svgline.append('g')
.attr('class', 'y axis-grid')
.attr("transform", `translate(${MARGIN.LEFT}, ${MARGIN.TOP})`)
.call(yAxisGridLine);
gline.append("g")
.attr("class", "y axis")
.attr("id", "y axis")
.call(yAxisCallLine)
gline.append('path')
.datum(data)
.attr('fill', 'none')
.attr('stroke', '#73EDFF')
.attr('stroke-width', 4)
.attr('d', d3.line()
.x(d => xline(d.hour))
.y(d => yline(d.measure))
)
})
function scaleBandInvert(scale) {
var domain = scale.domain();
//var domelement = document.getElementById('chart-grid').getBoundingClientRect();
//var paddingOuter = domelement.left// scale(domain[0]) + MARGIN.LEFT;
var eachBand = scale.step();
return function (value, offset) {
var index = Math.floor((value - offset) / eachBand);
return domain[Math.max(0,Math.min(index, domain.length-1))];
}
}
function paintTooltip(e) {
var val = scaleBandInvert(scale)(e.x, document.getElementById('chart-grid').getBoundingClientRect().left)
return `<div style="background-color:white;padding:6px;border-radius:5px">
<b>${val}</b>
</div>`
}
const colors = ["yellow", "green", "red", "blue", "purple", "orange"]
var windows = []
var tipline = d3.tip().attr('class', 'd3-tip')
.html(paintTooltip)
gline.call(tipline)
function addWindow(){
var i = windows.length
var classstart = 'rectstart_' + i
var classend = 'rectend_' + i
var color = colors[Math.floor(Math.random() * 6)]
windows.push({x0: scaleBandInvert(scale)(MARGIN.LEFT + (WIDTH / 2) - 10, MARGIN.LEFT),
x1: scaleBandInvert(scale)(MARGIN.LEFT + (WIDTH / 2) + 10, MARGIN.LEFT),
color: color})
document.getElementById("windows").innerHTML = addWindowText()
//Initial bar for the window
svgline.append("rect").attr("class", classstart).attr("id", "rectwindow")
.attr("width",1)
.attr("height", HEIGHT)
.attr("x", MARGIN.LEFT + (WIDTH / 2) - 10)
.attr("y", MARGIN.TOP)
.attr("fill",color)
.attr("cursor", "move")
.on('mouseover', tipline.show)
.on('mouseout', tipline.hide)
//Final bar for the window
svgline.append("rect").attr("class", classend).attr("id", "rectwindow")
.attr("width",1)
.attr("height", HEIGHT)
.attr("x", MARGIN.LEFT + (WIDTH / 2) + 10)
.attr("y", MARGIN.TOP)
.attr("fill",color)
.attr("cursor", "move")
.on('mouseover', tipline.show)
.on('mouseout', tipline.hide)
d3.selectAll("."+classstart).call(d3.drag().on("drag", function (e) {
if (e.x >= MARGIN.LEFT) {
d3.select(this).attr("x", e.x)
}
index = this.getAttribute("class").split('_')[1]
windows[index].x0 = scaleBandInvert(scale)(e.x, MARGIN.LEFT)
document.getElementById("windows").innerHTML = addWindowText()
}))
d3.selectAll("."+classend).call(d3.drag().on("drag", function (e) {
if (e.x <= MARGIN.LEFT + WIDTH) {
d3.select(this).attr("x", e.x)
}
index = this.getAttribute("class").split('_')[1]
windows[index].x1 = scaleBandInvert(scale)(e.x, MARGIN.LEFT)
document.getElementById("windows").innerHTML = addWindowText()
}))
}
function addWindowText() {
//console.log(scale)
//console.log(datum)
var string = ''
for (var i=0; i<windows.length; i++) {
string += "<span style='color:" + windows[i].color + "'><b>Nueva ventana: </b></span>" + windows[i].x0 + ', ' + windows[i].x1 + '<hr>'
}
return string
}
Raw
style.css
#chart-area svg {
margin-left: auto;
margin-right: auto;
display: block;
}
.axis-grid line {
stroke: lightgrey;
stroke-opacity: 0.7;
shape-rendering: crispEdges;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment