Skip to content

Instantly share code, notes, and snippets.

View bsurnida's full-sized avatar

Bhasker Surnida bsurnida

  • Oracle Corporation
  • Redwood Shored, San Francisco, CA.
View GitHub Profile
@bsurnida
bsurnida / .block
Created February 20, 2020 03:48
Stacked bar chart with tooltips
license: mit
@bsurnida
bsurnida / README.md
Created February 20, 2020 03:11 — forked from mstanaland/README.md
Stacked bar chart with tooltips

A simple stacked coloumn graph built using d3's stack layout.

The SVG tooltip is based on this gist by Mike Bostock. In short, the tooltip's group, comprised of a rect and a text element, are created when the chart is first drawn and set to be hidden. Action is applied to the stacks' rects: on mouseover the group become visible; on mousemove the mouse's XY position is captured and used to transform/translate the group.

If you ajust the tooltip's XY offset, keep in mind that there can be no overlap between the group and the mouse's position or the group's visibility will remain hidden.

@bsurnida
bsurnida / test.csv
Last active February 19, 2020 22:33 — forked from ericd9799/test.csv
category yes no maybe
NF 126 0 0
DS 90 36 0
IN 85 3 2
INW 80 5 0
PS 70 20 0
RV 60 0 0
INR 55 5 0
@bsurnida
bsurnida / .block
Last active July 23, 2018 22:52
Sankey diagram using a csv file with v4
license: mit
@bsurnida
bsurnida / .block
Last active June 27, 2018 22:01
Date vs values plotted with data format
license: mit
@bsurnida
bsurnida / .block
Last active June 25, 2018 16:47
Bar Chart
license: mit
@bsurnida
bsurnida / .block
Last active February 5, 2018 17:22
Multi Line Highlight-vega
license: mit
@bsurnida
bsurnida / .block
Last active February 5, 2018 16:15
Histogram Chart
license: gpl-3.0
@bsurnida
bsurnida / .block
Created February 4, 2018 20:36
Histogram Chart - custom - 20180204
license: gpl-3.0
@bsurnida
bsurnida / index.html
Created June 10, 2017 03:28 — forked from d3noob/.block
Sankey diagram with horizontal and vertical node movement
<!DOCTYPE html>
<meta charset="utf-8">
<title>SANKEY Experiment</title>
<style>
.node rect {
cursor: move;
fill-opacity: .9;
shape-rendering: crispEdges;
}