g1 issueshttps://code.gramener.com/cto/g1/-/issues2018-06-17T16:33:36Zhttps://code.gramener.com/cto/g1/-/issues/61Componentize ScrollyTelling2018-06-17T16:33:36ZTejeshComponentize ScrollyTellingconfig driven steps with G1 sanddance could be used to build a standard data story quickly.
*Benefits*:
Each project can start having its own data story if they find any insights through built dashboard
*Competitors*:
[ArcGIS](https:...config driven steps with G1 sanddance could be used to build a standard data story quickly.
*Benefits*:
Each project can start having its own data story if they find any insights through built dashboard
*Competitors*:
[ArcGIS](https://www.esri.com/arcgis-blog/products/story-maps/mapping/how-to-cascade/) has scrollytelling maps component completely driven via UI (no code).https://code.gramener.com/cto/g1/-/issues/58$.highlight example doesn't work2018-06-12T06:20:49ZKarmanya Aggarwal$.highlight example doesn't workFrom the readme.md, even fixing the broken tags in the example doesn't work.From the readme.md, even fixing the broken tags in the example doesn't work.https://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/30Detect type of value for column highlighting -- use metadata from server2018-04-16T10:27:39ZTejeshDetect type of value for column highlighting -- use metadata from serverhttps://code.gramener.com/cto/g1/-/issues/39Editor2018-04-16T05:58:17ZTejeshEditor### Summary
To build editor capability similar to [ui toast](http://ui.toast.com/)
### Benefits
Lets non-developers use g1 components and build charts### Summary
To build editor capability similar to [ui toast](http://ui.toast.com/)
### Benefits
Lets non-developers use g1 components and build chartshttps://code.gramener.com/cto/g1/-/issues/27Create an interactive areaplot comparison chart2018-03-22T05:24:34ZS AnandCreate an interactive areaplot comparison chartThis extension to area charts helps identify changes across any 2 time periods. This makes it easier to tell a story
![area-compare](/uploads/80845e5969c4e831e312b93b9da55bde/area-compare.gif)This extension to area charts helps identify changes across any 2 time periods. This makes it easier to tell a story
![area-compare](/uploads/80845e5969c4e831e312b93b9da55bde/area-compare.gif)https://code.gramener.com/cto/g1/-/issues/4$.template() can render multiple languages2018-02-05T04:32:12ZS Anand$.template() can render multiple languagesScripts with different types have different meanings
- `type="text/html"` renders as HTML in-place
- `type="text/plain"` renders as text, i.e. set the innerText, not innerHTML
- `type="text/markdown"` - Markdown
- `type="text/vega"` - [...Scripts with different types have different meanings
- `type="text/html"` renders as HTML in-place
- `type="text/plain"` renders as text, i.e. set the innerText, not innerHTML
- `type="text/markdown"` - Markdown
- `type="text/vega"` - [Vega](https://vega.github.io/vega/)
- `type="text/vega-lite"` - [Vega-lite](https://vega.github.io/vega-lite/)
- `type="text/plotly"` - [Plotly](https://ecomfe.github.io/)
- `type="text/echarts"` - [echarts](https://github.com/ecomfe/echarts)
- `type="text/mermaid"`- [mermaid graph](https://mermaidjs.github.io/)
- `type="text/flowchart"` - [flowchart](http://flowchart.js.org/)
- `type="text/js-sequence"` - [js-sequence](https://bramp.github.io/js-sequence-diagrams/)
- etc.
Implementation:
- Each works as a plugin that can be registered independently, and can be extended. text/html will use `_.template` for example.
- To allow use of `</script>` tags for code examples, the container can be `<template>` instead of `<script>`