All Projects → wereHamster → simple-square-packing

wereHamster / simple-square-packing

Licence: MIT License
werehamster.github.io/simple-square-packing/

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
Nix
1067 projects

Projects that are alternatives of or similar to simple-square-packing

topola
Topola – online genealogy visualization
Stars: ✭ 57 (+375%)
Mutual labels:  d3
proteic
Streaming and static data visualization for the modern web.
Stars: ✭ 37 (+208.33%)
Mutual labels:  d3
turkeyvisited
Mark the cities you have visited in Turkey and share the map!
Stars: ✭ 82 (+583.33%)
Mutual labels:  d3
silky-charts
A silky smooth D3/React library
Stars: ✭ 38 (+216.67%)
Mutual labels:  d3
align covid
Coronavirus time series aligned by number of cases, not date.
Stars: ✭ 22 (+83.33%)
Mutual labels:  d3
versor
a home for Mike Bostock's versor.js
Stars: ✭ 26 (+116.67%)
Mutual labels:  d3
d3-cv.js
Render your CV with some d3 goodies.
Stars: ✭ 12 (+0%)
Mutual labels:  d3
pybraincompare
brain image comparison and visualization methods for python!
Stars: ✭ 16 (+33.33%)
Mutual labels:  d3
a2d3
Flexible and extensible D3 directives for Angular 2
Stars: ✭ 22 (+83.33%)
Mutual labels:  d3
leaflet heatmap
简单的可视化湖州通话数据 假设数据量很大,没法用浏览器直接绘制热力图,把绘制热力图这一步骤放到线下计算分析。使用Apache Spark并行计算数据之后,再使用Apache Spark绘制热力图,然后用leafletjs加载OpenStreetMap图层和热力图图层,以达到良好的交互效果。现在使用Apache Spark实现绘制,可能是Apache Spark不擅长这方面的计算或者是我没有设计好算法,并行计算的速度比不上单机计算。Apache Spark绘制热力图和计算代码在这 https://github.com/yuanzhaokang/ParallelizeHeatmap.git .
Stars: ✭ 13 (+8.33%)
Mutual labels:  d3
course-17-18
🎓 Frontend 3 · 2017-2018 · Curriculum and Syllabus 📊
Stars: ✭ 39 (+225%)
Mutual labels:  d3
tree-chart
Flexible tree chart using Canvas and Svg, powered by D3.js; ✅Support Vue, Vue3 and React;
Stars: ✭ 265 (+2108.33%)
Mutual labels:  d3
d3-dotmatrix
Open Source Javascript library to render Dot Matrix Charts
Stars: ✭ 14 (+16.67%)
Mutual labels:  d3
d3-ng2-demo
Reusable visual power? A demo of using D3 version 4 with Angular 2+.
Stars: ✭ 53 (+341.67%)
Mutual labels:  d3
course-19-20
🎓 tech track · 2019-2020 · curriculum and syllabus 📊
Stars: ✭ 13 (+8.33%)
Mutual labels:  d3
react-d3-axis
React-based Axis component for D3
Stars: ✭ 26 (+116.67%)
Mutual labels:  d3
visa-chart-components
Visa Chart Components (VCC) is an accessibility focused, framework agnostic set of data experience design systems components for the web. VCC attempts to provide a toolset to enable developers to build equal data experiences for everyone, everywhere.
Stars: ✭ 81 (+575%)
Mutual labels:  d3
multi-verse
lit-element components for fast and modular multivariate analysis
Stars: ✭ 34 (+183.33%)
Mutual labels:  d3
billboard
🎤 Lyrics/associated NLP data for Billboard's Top 100, 1950-2015.
Stars: ✭ 53 (+341.67%)
Mutual labels:  d3
d3.geometer
[NOT MAINTAINED] A D3js library for drawing polytopes, angles, coordinates, geometries and more.
Stars: ✭ 18 (+50%)
Mutual labels:  d3

Simple Square Packing Algorithm

You can find an interactive example here: https://werehamster.github.io/simple-square-packing

Blog post explaining the algorithm: https://blog.interactivethings.com/simple-square-packing-algorithm-ddd3c2793711

import {packSquares} from './index';

// The values which you want to show.
const values = [4, 3, 1, 0.2];

// The sizes of the squares are relative to this value. You can use it if you
// want to render multiple figures which need to be sized relatively
// to each other.
const maxValue = 7;

const result = packSquares(values, maxValue);

Consult the source file to see which fields are available in the result.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].