• Stars
    star
    1,312
  • Rank 35,858 (Top 0.8 %)
  • Language Svelte
  • License
    MIT License
  • Created over 6 years ago
  • Updated 6 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

graphics framework for sveltejs

Layer Cake layercake-logo

a framework for mostly-reusable graphics with svelte

Tests badges npm version npm

🍰 See examples 🍰 Read the guide 🍰 API docs 🍰 View the Component Gallery 🍰 Try the starter template 🍰

Install

npm install --save layercake

Example

<script>
  // The library provides a main wrapper component
  // and a bunch empty layout components...
  import { LayerCake, Svg, Html, Canvas } from 'layercake';

  // ...that you fill with your own chart components,
  // that live inside your project and which you
  // can copy and paste from here as starting points.
  import AxisX from './components/AxisX.svelte';
  import AxisY from './components/AxisY.svelte';
  import Line from './components/Line.svelte';
  import Scatter from './components/Scatter.svelte';
  import Labels from './components/Labels.svelte';

  const data = [{ x: 0, y: 1 }, { x: 1, y: 2 }, { x: 2, y: 3 }];
</script>

<style>
  .chart-container {
    width: 100%;
    height: 500px;
  }
</style>

<div class="chart-container">
  <LayerCake
    x='x'
    y='y'
    {data}
  >
    <Svg>
      <AxisX/>
      <AxisY/>
      <Line color='#f0c'/>
    </Svg>

    <Canvas>
      <Scatter color='#0fc'/>
    </Canvas>

    <Html>
      <Labels/>
    </Html>
  </LayerCake>
</div>

License

MIT

More Repositories

1

indian-ocean

A library for reading in and writing out data (plus some useful filesystem functions) in Node.js.
JavaScript
63
star
2

joiner

A simple utility for SQL-like joins with Json, GeoJson or dbf data in Node, the browser and on the command line. Also creates join reports so you can know how successful a given join was. Try it in the browser -->
JavaScript
50
star
3

sublime-interview-syntax

A Sublime Text syntax definition and highlighter meant to help reporters take interview notes.
48
star
4

layercake-template

Starter template for Layer Cake graphics framework
Svelte
42
star
5

chartbuilder-electron

A desktop version of Quartz's Chartbuilder app
HTML
24
star
6

plot

A node library to display charts in popup windows and save them as pngs. Supports observablehq/plot, vega-lite and plotly out of the box.
JavaScript
23
star
7

cartodb-templates

Map templates with cartodb.js
20
star
8

turntable

Node.js scripts for pulling data from Google Docs and uploading them to S3 with data scrubbing and moderation.
JavaScript
19
star
9

d3-gantt-isotope

A sortable and filterable gantt chart using d3 and isotope.
17
star
10

tktk

The TK Toolkit. Utilities for working with data in Node.js.
JavaScript
16
star
11

svelte-double-range-slider

A double range slider for svelte
Svelte
14
star
12

nodebooks

Forthcoming. A data analysis paradigm for the JavaScript world.
JavaScript
14
star
13

floating-scroll

A jQuery plugin to bound a sticky div by another div on scroll.
JavaScript
14
star
14

spacegray-eighties-iterm

A Spacegray Eighties color profile for iTerm2.
13
star
15

sveltekit-electron

JavaScript
13
star
16

js-patterns

Common JavaScript techniques that I wish someone had taught me.
JavaScript
12
star
17

qcew

A NodeJs interface for Bureau of Labor Statistics Quarterly Census of Employment and Wages.
JavaScript
12
star
18

join.report

Join data in the browser. Supports csv, tsv, psv, *json and dbf.
JavaScript
12
star
19

histagram.me

A webapp for making interactive histograms of data in a Google Spreadsheet or a local file.
JavaScript
8
star
20

layercake.graphics

Website for Layer Cake
Svelte
8
star
21

privacy-resources

A collection of links to various articles and tools about privacy.
6
star
22

vega-lite-api-examples

A repository containing Vega-Lite-API implementations of all of the examples in the Vega-Lite gallery. Work in progress and contributors welcome!
JavaScript
6
star
23

cartodb-embeds

More flexible embeds for CartoDB.js
JavaScript
6
star
24

stepper

A (slightly modified) proper repo for the Jeff Larson's library for stepper graphics.
JavaScript
5
star
25

alphabits

A NodeJS scraper / json endpoint-reader with rate-limiting, write-to-csv and custom header support.
JavaScript
5
star
26

npm-things

Some information on how to use and debug npm projects.
JavaScript
4
star
27

heron

A simple interface for making locator maps with styled tiles and GeoJson.
JavaScript
3
star
28

pg-json-api

A thin json api around one or many postgres databases.
JavaScript
3
star
29

d3-gantt

A stab at a gantt chart template using d3.js
2
star
30

nyt-storyark

CSS
2
star
31

node-geocode

A geocoder for node.js
JavaScript
2
star
32

utils

JavaScript
2
star
33

sqf-symphony

An experimental visualization and sonification of a year's worth of stop, question, and frisks.
JavaScript
2
star
34

pan-zoom-test

http://www.billdwhite.com/wordpress/2013/11/26/d3-minimap-pan-and-zoom-demo/ this but with an image
JavaScript
2
star
35

tutorial-gdoc-miso-isotope

A barebones example of the Google Doc, Miso.dataset, and Isotope.js stack.
JavaScript
2
star
36

wget-links

A simple script to wget a bunch of links with a delay in between each request, skipping files that already exist.
JavaScript
2
star
37

interview-syntax-vscode

A VS Code language definition and syntax highlighter meant to help reporters take interview notes.
2
star
38

count-pdf-pages

JavaScript
2
star
39

pivoting

experiments with pivoting data
JavaScript
2
star
40

inquirer-list-input

List prompt plus arbitrary text input for inquirer.
JavaScript
2
star
41

interactive-nodejs

A demo showing how to use VS Code's debug view to analyze data in Node.js
JavaScript
2
star
42

scraper-starter

JavaScript
2
star
43

wsk-starter

JavaScript
1
star
44

underscore-template-pipe

An underscore mixin (can also be used separately) that allows templates to return json
JavaScript
1
star
45

electron-menus

Easily add menus to modules running in Electron.
JavaScript
1
star
46

latest-github-tag

Fetch the latest tag name from a GitHub repo (promise-based)
JavaScript
1
star
47

layercake-template-sveltekit-test

Svelte
1
star
48

toast-and-tea

JavaScript
1
star
49

cartodb-tutorial

An abbreviated version of github.com/csvsoundsystem/nicar-postgis-cartodb
1
star
50

bike-route

Simple bike route map with Mapbox GL
HTML
1
star
51

cartodb-point-polygon-template

A template for creating interactive leaflet maps with point and polygon hover-enable layers
JavaScript
1
star
52

config-tree

A reworking of init-package-json to make reusable prompt-based CLIs for making config.json files.
JavaScript
1
star
53

defaultDark-sublime-theme

The default Sublime Text 2 theme but with a dark sidebar.
JavaScript
1
star
54

svelte-animation-bug

Svelte
1
star
55

ipc-msg-mystery

Testing whether you can set up an ipc channel if you execute a script via an npm script
JavaScript
1
star
56

inquirer-input-up

The inquirer input prompt plus up-arrow fills in default value.
JavaScript
1
star
57

keygen-machinefile-example

JavaScript
1
star
58

exploding-firework-street-view-greeting-card

As the name says, this creates a greeting card that, when you click the button, creates exploding fireworks above the building / house of your choosing from Google Street View.
JavaScript
1
star
59

retro-db

experimental sql interface, for the desktop
HTML
1
star