kristw

<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

<DeckGL layers={[
  new HeatmapLayer({
    data,
    pickable: false,
    getPosition: d => [d[0], d[1]],
    getWeight: d => d[2],
    radiusPixels,
    intensity,
    threshold
  })

kristw

option = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [{
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],

kristw

{
  "$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

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

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

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

<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

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);

kristw

{"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