Install the CLI tool globally:
npm install canvas-sketch-cli -g
Create a new folder and move into it:
import React, { useState, useEffect } from 'react' | |
import styled from 'styled-components' | |
import { useCanvas } from 'utils/hooks' | |
import debounce from 'lodash/debounce' | |
export default function Glow() { | |
const [ref, setRef] = useState<HTMLCanvasElement | null>(null) | |
const [boxes, setBoxes] = useState<Box[]>([]) | |
const [ctx, width, height] = useCanvas(ref) | |
const moving = useMouseMoving() |
entidad | municipio | confirmados | defunciones | activos | ambulatorios | ambulatorios_fallecidos | hospitalizados | hospitalizados_fallecidos | intubados | intubados_fallecidos | |
---|---|---|---|---|---|---|---|---|---|---|---|
Aguascalientes | Aguascalientes | 32906 | 2613 | 722 | 27150 | 181 | 5756 | 2432 | 716 | 569 | |
Aguascalientes | Asientos | 606 | 48 | 4 | 478 | 6 | 128 | 42 | 20 | 10 | |
Aguascalientes | Calvillo | 1252 | 34 | 7 | 1107 | 2 | 145 | 32 | 18 | 13 | |
Aguascalientes | Cosío | 149 | 14 | 0 | 108 | 0 | 41 | 14 | 10 | 7 | |
Aguascalientes | El Llano | 129 | 22 | 2 | 85 | 0 | 44 | 22 | 14 | 12 | |
Aguascalientes | Jesús María | 1236 | 86 | 48 | 1011 | 12 | 225 | 74 | 38 | 24 | |
Aguascalientes | No Especificado | 2 | 0 | 0 | 2 | 0 | 0 | 0 | 0 | 0 | |
Aguascalientes | Pabellón de Arteaga | 1081 | 76 | 6 | 905 | 5 | 176 | 71 | 37 | 29 | |
Aguascalientes | Rincón de Romos | 1003 | 74 | 4 | 771 | 3 | 232 | 71 | 39 | 28 |
Clearly ES6 is a huge improvement over ES5, and tools like [6to5][] allow us to use these cool features now. I was reading [Replace CoffeeScript with ES6][replace coffeescript] by [Blake Williams][] and thought it was a great summary of how ES6 solves many of the same problems that CoffeeScript solves; however I'd like to comment on a few of Blake's points and talk about why I'll be sticking with CoffeeScript.
Classes in ES6 (like many of the syntax changes in ES6) are very similar to the CoffeeScript equivalent. To support browsers that are not fully ES5 compliant (e.g. IE8-), however, we still can't really use getters/setters, so ignoring these the comparison is:
function string_to_slug (str) { | |
str = str.replace(/^\s+|\s+$/g, ''); // trim | |
str = str.toLowerCase(); | |
// remove accents, swap ñ for n, etc | |
var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; | |
var to = "aaaaeeeeiiiioooouuuunc------"; | |
for (var i=0, l=from.length ; i<l ; i++) { | |
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); | |
} |
function jqmSimpleMessage(message) { | |
$("<div class='ui-loader ui-overlay-shadow ui-body-b ui-corner-all'><h1>" + message + "</h1></div>") | |
.css({ | |
display: "block", | |
opacity: 0.96, | |
top: window.pageYOffset+100 | |
}) | |
.appendTo("body").delay(800) | |
.fadeOut(400, function(){ | |
$(this).remove(); |