Skip to content

Instantly share code, notes, and snippets.

Avatar

Krist Wongsuphasawat kristw

View GitHub Profile
@kristw
kristw / example-nivo.jsx
Created Jul 25, 2020
blog example: nivo
View example-nivo.jsx
<ResponsiveCalendar
data={[
{ "day": "2016-02-05", "value": 397 },
{ "day": "2015-09-17", "value": 283 },
...
]}
from="2015-03-01"
to="2016-07-12"
emptyColor="#eeeeee"
colors={[ '#61cdbb', '#97e3d5', '#e8c1a0', '#f47560' ]}
@kristw
kristw / example-deckgl.jsx
Last active Jul 29, 2020
blog example: deck.gl
View example-deckgl.jsx
<DeckGL layers={[
new HeatmapLayer({
data,
pickable: false,
getPosition: d => [d[0], d[1]],
getWeight: d => d[2],
radiusPixels,
intensity,
threshold
})
@kristw
kristw / example-echarts.js
Created Jul 24, 2020
blog example: echarts
View example-echarts.js
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
@kristw
kristw / example-vega-lite.json
Created Jul 24, 2020
blog example: vega-lite
View example-vega-lite.json
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [
{"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
{"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
{"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
]
},
@kristw
kristw / example-c3.js
Created Jul 24, 2020
blog example: C3
View example-c3.js
const zoom_example = new c3.Plot.Zoomable<number>({
data: zoom_example_data,
h: d3.scale.linear().domain([-10, 10]), // horizontal scale
v: d3.scale.linear().domain([-50, 80]), // vertical scale
x: (d) => d,
margins: { top: 10, right: 20 },
axes: [
new c3.Axis.X({ grid: true, tick_size: 10 }),
new c3.Axis.Y({ grid: true, path_size: 3 }),
],
@kristw
kristw / example-vx.jsx
Last active Jul 24, 2020
blog example: vx
View example-vx.jsx
function BarChart() {
const xScale = scaleBand({ rangeRound: [0, xMax], domain: data.map(d => d.letter) });
const yScale = scaleLinear({ rangeRound: [yMax, 0], domain: [0, Math.max(...data.map(d => d.frequency))] });
return (<svg width={width} height={height}>
{data.map(d => {
const barHeight = yMax - yScale(d.frequency);
return (<Bar
x={xScale(d.letter)}
y={yMax - barHeight}
@kristw
kristw / example-d3.js
Last active Jul 24, 2020
blog example: d3
View example-d3.js
const x = d3.scaleBand().rangeRound([0, width]);
const y = d3.scaleLinear().range([height, 0]);
const svg = d3.select("svg").attr("width", width).attr("height", height);
x.domain(data.map(d => d.date));
y.domain([0, d3.max(data, d => d.value)]);
svg.selectAll("bar")
.data(data)
.enter().append("rect")
.style("fill", "steelblue")
@kristw
kristw / example-recharts.jsx
Created Jul 24, 2020
blog example: recharts
View example-recharts.jsx
<LineChart width={500} height={300} data={data}>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
<Line type="monotone" dataKey="uv" stroke="#8884d8" />
<Line type="monotone" dataKey="pv" stroke="#82ca9d" />
</LineChart>
@kristw
kristw / example-p5js.js
Created Jul 24, 2020
blog example: p5.js
View example-p5js.js
import p5 from 'p5';
const p = new p5(function(sketch) {
sketch.setup = () => {
sketch.createCanvas(400, 400);
};
sketch.draw = () => {
sketch.background(0);
sketch.fill(255);
sketch.rect(100, 100, 50, 50);
View covid_th.json
{"help": "https://data.go.th/api/3/action/help_show?name=datastore_search", "success": true, "result": {"include_total": true, "resource_id": "93f74e67-6f76-4b25-8f5d-b485083100b6", "fields": [{"type": "int", "id": "_id"}, {"type": "numeric", "id": "no"}, {"type": "text", "id": "age"}, {"type": "text", "id": "sex"}, {"type": "text", "id": "nation"}, {"type": "text", "id": "occ_new"}, {"type": "text", "id": "Province"}, {"type": "text", "id": "Risk"}, {"type": "text", "id": "District"}, {"type": "timestamp", "id": "Notification date"}, {"type": "timestamp", "id": "Announce Date"}], "records_format": "objects", "records": [{"_id":1,"no":1,"age":"61.0","sex":"หญิง","nation":"จีน","occ_new":"นักท่องเที่ยว","Province":"กทม","Risk":"","District":"","Notification date":null,"Announce Date":"2020-01-12T00:00:00"},{"_id":2,"no":2,"age":"74.0","sex":"หญิง","nation":"จีน","occ_new":"นักท่องเที่ยว","Province":"กทม","Risk":"","District":"","Notification date":null,"Announce Date":"2020-01-17T00:00:00"},{"_id":3,"no":3,"ag
You can’t perform that action at this time.