g1 issueshttps://code.gramener.com/cto/g1/-/issues2019-02-02T15:52:14Zhttps://code.gramener.com/cto/g1/-/issues/67[Mapviewer] Feature request - timeline slider2019-02-02T15:52:14ZBhanu Kbhanu.kamapantula@gramener.com[Mapviewer] Feature request - timeline slider### Summary
Represent time varying geo-data on map. User can control the time unit (year/month/seconds etc.) via a slider control.
### Benefits
[Design reference](https://gramener.invisionapp.com/d/main#/console/13330074/304743583/pre...### Summary
Represent time varying geo-data on map. User can control the time unit (year/month/seconds etc.) via a slider control.
### Benefits
[Design reference](https://gramener.invisionapp.com/d/main#/console/13330074/304743583/preview)
![gender-map](/uploads/5266b849d642d86ab45835788dfdd3af/gender-map.png)
Time component is represented here as a dropdown option. We can consider integrating the below [[reference](https://openlab.citytech.cuny.edu/ganguli-math1372-fall2014/files/2014/11/gapminder.jpg)]
![timeliner](/uploads/202fadb41212a088254bf74bf012ed31/timeliner.png)
with options for
- auto-play
- user-control for slider. i.e., click, change the time unit which updates the map colors
- positioning: horizontal or vertical, optional
Project relevance: Gender project, BMGF. This will be rolled out in 3 phases. Development will begin this week.Bharat Rbharath.r@gramener.comBharat Rbharath.r@gramener.comhttps://code.gramener.com/cto/g1/-/issues/78Implement a formhandler Tree View2018-12-19T16:08:43ZTejeshImplement a formhandler Tree ViewReferences:
https://docs.webix.com/desktop__treetable.html
https://frappe.io/datatable - Tree View section
https://gramener.invisionapp.com/d/main#/console/13753225/303473425/preview - BMGF project design linkReferences:
https://docs.webix.com/desktop__treetable.html
https://frappe.io/datatable - Tree View section
https://gramener.invisionapp.com/d/main#/console/13753225/303473425/preview - BMGF project design linkhttps://code.gramener.com/cto/g1/-/issues/18Integrate Mapviewer component2018-08-15T14:22:58ZTejeshIntegrate Mapviewer componentMapviewer to have features:
* [x] Drilldown and reset of map view
* [x] Tooltip and hover
* [ ] Summary count
* [ ] filters and sliders
* [ ] overlay metrics - multiple (TBD)
* [x] custom markers and svg shapes for geo points
* [ ]...Mapviewer to have features:
* [x] Drilldown and reset of map view
* [x] Tooltip and hover
* [ ] Summary count
* [ ] filters and sliders
* [ ] overlay metrics - multiple (TBD)
* [x] custom markers and svg shapes for geo points
* [ ] cluster markers (TBD)
* [ ] legend on mapTejeshTejeshhttps://code.gramener.com/cto/g1/-/issues/10Implement a formhandler treemap2018-07-16T11:29:40ZS AnandImplement a formhandler treemaphttps://code.gramener.com/cto/g1/-/issues/11Implement a FormHandler sunburst2018-07-16T11:29:11ZS AnandImplement a FormHandler sunbursthttps://code.gramener.com/cto/g1/-/issues/12Implement a FormHandler Sankey2018-07-16T11:29:06ZS AnandImplement a FormHandler Sankeyhttps://code.gramener.com/cto/g1/-/issues/13Implement a FormHandler network chart2018-07-16T11:28:56ZS AnandImplement a FormHandler network charthttps://code.gramener.com/cto/g1/-/issues/14Add a type detection function for JavaScript Dataframes2018-05-24T16:16:25ZS AnandAdd a type detection function for JavaScript Dataframes- [x] Test cases and scaffolding @s.anand - by 5 Feb 2018
- [x] Basic implementation @abinesh.lal - by 7 Feb 2018
- [x] Testing & bug fixes @abinesh.lal - by 9 Feb 2018
- [x] Merge @s.anand - by 9 Feb 2018- [x] Test cases and scaffolding @s.anand - by 5 Feb 2018
- [x] Basic implementation @abinesh.lal - by 7 Feb 2018
- [x] Testing & bug fixes @abinesh.lal - by 9 Feb 2018
- [x] Merge @s.anand - by 9 Feb 20181.32Abinesh LalAbinesh Lalhttps://code.gramener.com/cto/g1/-/issues/7Create a sanddance component - Transitions2018-05-24T16:16:25ZS AnandCreate a sanddance component - TransitionsSanddance transitions
Samples:
- https://www.sanddance.ms/
- http://algorithms-tour.stitchfix.com/
- https://tcdata360.worldbank.org/stories/tech-entrepreneurship/
- https://gramener.com/playground/blog/posts?post=08-16-2017-elvis-pres...Sanddance transitions
Samples:
- https://www.sanddance.ms/
- http://algorithms-tour.stitchfix.com/
- https://tcdata360.worldbank.org/stories/tech-entrepreneurship/
- https://gramener.com/playground/blog/posts?post=08-16-2017-elvis-presley.md
- https://gramener.com/playground/blog/posts?post=08-04-2017-kishore-kumar.md
- https://gramener.com/playground/senate/similarity
- https://gramener.com/playground/senate/
- https://labs.spotify.com/2018/03/02/introducing-coordinator-a-new-open-source-project-made-at-spotify-to-inject-some-whimsy-into-data-visualizations/
Implementation notes:
- The component should define the positions of a set of *entities* (shapes) across *stages*
- When the stage transitions, the positions are smoothly animated to another
- The component should allow control over animation
- The component should accept layouts as input
- The component should trigger an event on stage transition
Other notes:
- sanddance is created as a component in the `g1` namespace as `g1.sanddance()`.
- d3 and lodash are the only dependencies for `g1`
- Browsers: Edge, Chrome, Firefox, Safari, Android browser, Safari iOS
### Specification
sanddance is a component that transitions elements between states
Each state is named, and has a set of state configuration information. In other words, it's a dict of dicts.
```json
"states": {
"treasure-trove": {
"name": "Treasure Trove",
"conf": {
}
},
"duets": {
"name": "The Duets",
"conf": {
}
}
}
```
A state should capture all transitionable attributes of each element. For example, position, color, size, etc. These attributes are best specified dynamically. For example:
```js
var collapse_to_point = g1.sanddance({
name: "collapse_to_point",
attrs: {
opacity: 0.7, // Set the opacity= of all elements to 0.7
cx: 450, // Set the cx= of all elements to 450
cy: 400, // Set the cy= of all elements to 400
fill: 'blue', // Set the fill= of all elements to blue
},
duration: 1000, // Collapse with a 1s duration
delay: 1000 // All items move after a delay of 1s
})
// Attributes can be different for each object
var explode_randomly = g1.sanddance({
name: "explode_randomly",
attrs: {
opacity: 0.9,
cx: function(d) { return Math.random() * 1000 },
cy: function(d) { return Math.random() * 500 },
fill: function(d) { return Math.random() < 0.5 ? 'red' : 'blue' },
},
duration: function(d) { return Math.random() * 1000 },
delay: 500
})
```
To apply a state, we can call sanddance as follows:
```js
var circles = d3.selectAll('circle')
.call(g1.sanddance.chain(
explode_randomly(), // Explode after 0.5s, up to a 1s duration
explode_randomly(), // Explode after 0.5s, up to a 1s duration
collapse_to_point() // Collapse after 1s with a 1s duration
))
```
The above animation happens in chain.
These also support the following events:
- `sanddance.start` is triggered when the animation starts
- `sanddance.end` is triggered when the animation of all the elements ends
For example:
```js
var circles = d3.selectAll('circle')
.call(g1.sanddance.chain(
explode_randomly()
.on('start', function () { console.log('started 1st explode_randomly') })
.on('end', function () { console.log('ended 1st explode_randomly') }),
explode_randomly()
.on('start', function () { console.log('started 2nd explode_randomly') })
.on('end', function () { console.log('ended 2nd explode_randomly') })
))
```
This will enable creating use-cases
Create a function `g1.sanddance.layout(options)` that behaves as follows:
```
function layout({
width: 500,
height: 300,
layout: 'grid', // or column, scatter, density, circle
layoutx: 'department', // x-layout for column, scatter, density
layouty: 'gender' // y-layout for scatter / density
group: 'facet', // or cluster
groupby: 'class', // categorical column to group by
grouplimit: 10, // maximum number of groups to show
// ...
})
var show_as_grid = g1.sanddance({
name: 'show_as_grid',
attrs: {
transform: g1.sanddance.layout({layout: 'grid', width: 300, height: 200}),
},
duration: 300,
});
```
1.33Elango BharathiElango Bharathihttps://code.gramener.com/cto/g1/-/issues/45create label and positional annotation component2018-04-29T05:12:57ZTejeshcreate label and positional annotation componentsample spec
```js
var chart = g1.createChart('scatterplot', data, options)
chart.annotate(position, text, styles)
chart.label(data, {
label: {
col_name: [...],
//example
Continent: ['Asia', 'Europe'],
ID: ['AND', 'ARB'...sample spec
```js
var chart = g1.createChart('scatterplot', data, options)
chart.annotate(position, text, styles)
chart.label(data, {
label: {
col_name: [...],
//example
Continent: ['Asia', 'Europe'],
ID: ['AND', 'ARB']
},
highlight: true,
auto: false
})
```
src: https://blog.datawrapper.de/weeklychart-biocapacity/
![image](/uploads/2cd992ce4538eb92ae519e8b45ca3ffe/image.png)https://code.gramener.com/cto/g1/-/issues/43Sanddance facets2018-04-25T12:38:46ZS AnandSanddance facets```js
var barchart = g1.sanddance({
layout: 'grid'
width: 100,
height: 100,
// Group by category, which is a number from 0 - 3
group: function(d) { return d.category },
facets: [
{x: 0, y: 0, width: 100, height: 20},
...```js
var barchart = g1.sanddance({
layout: 'grid'
width: 100,
height: 100,
// Group by category, which is a number from 0 - 3
group: function(d) { return d.category },
facets: [
{x: 0, y: 0, width: 100, height: 20},
{x: 0, y: 25, width: 100, height: 20},
{x: 0, y: 50, width: 100, height: 20},
{x: 0, y: 75, width: 100, height: 20},
],
data: data
})
d3.selectAll('circle')
.data(data)
.call(barchart)
```
... should create something like this:
![image](/uploads/9d579860345aa8e8b41ce444c3fb4125/image.png)Elango BharathiElango Bharathihttps://code.gramener.com/cto/g1/-/issues/15Add test cases to $().highlight()2018-04-16T09:25:21ZS AnandAdd test cases to $().highlight()https://code.gramener.com/cto/g1/-/issues/22MapViewer Component2018-03-06T08:14:12ZSundeep Reddy MalluMapViewer Component* [ ] overlay of other shapefiles like constituency
* [ ] ability to add multiple datasets for drill down
* [ ] logs must show if there is a data mismatch -(server side)
* [ ] integrate with formhandler
* [ ] Test cases* [ ] overlay of other shapefiles like constituency
* [ ] ability to add multiple datasets for drill down
* [ ] logs must show if there is a data mismatch -(server side)
* [ ] integrate with formhandler
* [ ] Test casesTejeshTejesh