kristw

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"country": "China", "population": 131744}, 
      {"country": "India", "population": 104970},
      {"country": "US", "population": 29034}
    ]
  },

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(200, 200);
  };
  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

kristw

license: mit

kristw

license: mit

kristw

license: mit