Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Freelancing – Open to exciting opportunities

Ashish Singh git-ashish

🏠
Freelancing – Open to exciting opportunities
View GitHub Profile
View README
Click on the x axis line and drag to change the scale of the graph.
@git-ashish
git-ashish / index.html
Last active Oct 18, 2017 — forked from bunkat/index.html
d3 - Swimlane zoomable
View index.html
<!--
The MIT License (MIT)
Copyright (c) 2013 bill@bunkat.com
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
View install-gdal
# Install subversion
sudo apt-get -y install subversion
# Install g++
sudo apt-get -y install g++
# Install Hierarchical Data Format library
# NOTE: This library is not necessarily needed, but was required
# in order for this to compile against a clean Ubuntu 12.04 LTS system.
# I didn't need it on a clean EC2 Ubuntu 12.10 instance, so
View dnd.js
// http://www.html5rocks.com/en/tutorials/file/dndfiles/
d3.select('svg')
.on('dragover', handleDragOver)
.on('drop', handleFileSelect)
;
function handleFileSelect() {
var event = d3.event
, files = event.dataTransfer.files // FileList object
, about = []
View README.md
View dnd.js
// http://www.html5rocks.com/en/tutorials/file/dndfiles/
d3.select('svg')
.on('dragover', handleDragOver)
.on('drop', handleFileSelect)
;
function handleFileSelect() {
var event = d3.event
, files = event.dataTransfer.files // FileList object
, about = []
View README.md

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

  • works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
  • interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
  • percentages are shown explicitly, to help overcome the distortion of the data that occurs wh
View README.md

Faux-3d SVG globe using d3.geo.orthographic and a few radial gradients. Labels offset or hidden based on radians from current map center to enhance the effect.

Uncomment svg.append("g").attr("class","countries") for hover-able country outlines.

View README.md

Building on this - experimenting with fake 3d svg arcs using two nested orthographic projections and cardinal line interpolation.

@git-ashish
git-ashish / dabblet.css
Created Mar 23, 2014 — forked from anonymous/dabblet.css
CSS Rating Stars
View dabblet.css
.wrapper:hover label{
background-position:left bottom;
}
label{
background:url('http://img833.imageshack.us/img833/5959/stard.png') no-repeat left bottom;
float:right;
line-height:20px;
padding-left:20px;
height:15px;
}