the old website and guide for LayerCake. the website is now kept in the layercake repo itself
๐ฐ Visit the site: https://layercake.graphics ๐ฐ
npm install
npm run dev
npm run export
git commit -am 'publish'
git push
Website for Layer Cake
Home Page: https://layercake.graphics
License: MIT License
the old website and guide for LayerCake. the website is now kept in the layercake repo itself
npm install
npm run dev
npm run export
git commit -am 'publish'
git push
I think the map examples would be better if they didn't join any data to the geography files and instead relied on a lookup inside the map component. This would make these examples easier to build off of so you can more quickly use these topojson files with your own data without a join step.
Will push this version when LayerCake 5.0 publishes.
Apparently this is annoying for people.
So that you can see the shape of the input data and other helper functions
Hi @mhkeller,
I'm really struggling trying to incorporate the QuadTree tooltip into the stacked area or bar charts and would really appreciate guidance around how to approach this issue because I do not want to abandon using Layercake.
If I just copy/paste in the Html block from the Multiline example, I run into this issue:
The Layer component's xGetter is structured for the stack data structure, and I'm unsure how to modify the SharedTooltip's getter to act on the original non-stack structured data.
I.e. I think x={d => d.data[xKey]}
is used, d.data is undefined on the original data, and then addAll in QuadTree fails... but I don't know how to support two getters... also don't totally understand why y='x'
for the QuadTree getter.
Any pointers/guidance would be really really appreciated and I'd happily contribute back an example if I'm able to get the tooltip wired up with other examples.
I don't see an arrowhead in Safari 13.0.4 for the Annotated column example.
Thanks for the amazing library!
Need guidance to add functionality to control resize brush from top and bottom
Heyo random layercake.graphics thought: you might change "column" in the top example dropdown to "column with annotation" or something that mentions that there is an annotation. (personal user story: I remembered that there was an annotation example but couldn't find it until I googled...). Not sure this will happen to anyone else, ever, but...
Hi @mhkeller, this library is the real covfefe! Thanks for publishing it!
Question: is there an example that has axis title text in it, or something that describes this? I haven't seen it... Relatedly, I guess, is the theory here that if I want axis titles I should roll them myself? If that happens to be required, what would the "right" way be?
I've just started recently with Layer Cake, and love it so far! I noticed a tiny issue with downloaded Zip files, for example if you click the download button on https://layercake.graphics/example/Bar . When I use unzip
in MacOS Terminal, it asks me if I want to replace Bar.svelte
, AxisX.svelte
and AxisY.svelte
which (I think!) means that there are two files with each of these names in the zip.
To show the list of files that seem to be duplicated:
unzip -l layercake-Bar.zip | awk '{f=$4; if (seen[f]) print f; seen[f]=1}'
Again, this is a really minor issue that isn't causing me problems, and I hope it's not just down to some silly mistake on my part!
What is the best way to suggest a chart to the library?
I implemented a Sankey chart like so
<script>
import { getContext } from "svelte";
import * as Sankey from "d3-sankey";
const { data, width, height, padding, custom } = getContext("LayerCake");
$: sankey = Sankey.sankey()
.nodeAlign(Sankey.sankeyLeft)
.nodeWidth(5)
.nodePadding(10)
.size([$width, $height - $padding.top])
.linkSort(null);
$: sankeyData = sankey($data);
$: link = Sankey.sankeyLinkHorizontal();
$: colorLinks = $custom.colorLinks;
$: fontSize = $width <= 320 ? "8px" : "12px";
</script>
<style>
</style>
<g transform={`translate(0,${$padding.top})`}>
<g class="link-group">
{#each sankeyData.links as d}
<path
d={link(d)}
fill={'none'}
stroke={colorLinks(d)}
stroke-opacity={0.5}
stroke-width={d.width} />
{/each}
</g>
<g class="rect-group">
{#each sankeyData.nodes as d, i}
<rect
x={d.x0}
y={d.y0}
height={d.y1 - d.y0}
width={d.x1 - d.x0}
fill={'#09299490'} />
<text
x={d.x0 < $width / 4 ? d.x1 + 6 : d.x0 - 6}
y={(d.y1 + d.y0) / 2}
style={`fill: ${'#263238'};
alignment-baseline: "middle";
font-size: ${fontSize};
text-anchor: ${d.x0 < $width / 4 ? 'start' : 'end'};
pointer-events: "none";
user-select: "none";`}>
{d.name}
</text>
{/each}
</g>
</g>
Accessor functions can return arrays of values as well. This should be added in the docs.
const vals = calcExtents([{start: 0, end: 1}, {start: -10000, end: 0}], [
{ field: 'y', accessor: d => [d.start, d.end] }
]);
// [-10000, 1]
Now that layercake-template-ssr exists, the download button should use that as a template.
Hi all,
All the examples import CSV files using a Rollup plugin for d3-dsv, but this isn't advertised. I think it'd help new users if you called this out somewhere in the docs so that they have a better understanding of the expected format for the data for each of the chart types. Maybe this is table stakes for some people, but as someone who wasn't intimately familiar with D3 it took me a little bit just to figure out the structure of the data in the examples was instead of jumping right in and building stuff.
This is a slightly self-promoting issue, and I will completely understand if you don't think it's a good idea!
I have been working on a layout algorithm for beeswarm plots that aims to keep the points reasonably close to the y=0 line without jiggling the points horizontally. This is what I have come up with: https://github.com/jtrim-ons/accurate-beeswarm-plot . I've had a go at modifying your non-force-directed beeswarm example to use this: https://svelte.dev/repl/115fa52a16d34cd8992c829119266df0?version=3.35.0 .
I wondered if you might consider using this approach rather than the current one in the example on your website. No problem at all if you'd prefer to leave the beeswarm on the website as it is and close the issue!
I was wondering if the example components such as Bar.svelte
are released under an open-source license? Sorry if this information appears somewhere and I've missed it.
The main reason I'm wondering is just to double-check that it's okay for us to use the components freely in LayerCake charts on a government website. My second reason is that I was thinking about creating a public NPM package containing my personal collection of LayerCake components, but initially containing lots of your components. I'd call this something like "@jtrim-ons/layercake-components" and clearly label that it's my collection based largely on your components. Would this be a fair use of your code, and does it seem like a vaguely sensible idea to you?
Thanks again for all your work on LayerCake!
PRs welcome!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.