joelongstreet/data-forms

Create three dimensional sculptures from data

Data Forms

DataForms allows you to create physical manifestations of data. Data sets are drawn on a 2D plane and downloadable as a single SVG. Modify the downloaded file or send it straight to a laser cutter for processing.

Visit dataforms.joelongstreet.com to use the app.

Examples

Slugging Percentage - American Baseball

Monthly Weather - Kansas City, Missouri USA

Weekly S&P 500 closing price - 1950 to 2018

Customer value over time (C2FO) - 2014 to 2018

Kansas City Royals (Stolen Bases) - 1969 to 2016

Available Scripts

npm start

Runs the app in the development mode.

npm run deploy

Build the app for production and pushes to github pages. It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

data-forms's Issues

Bundle size is huge

the bundle size is pretty big, mostly due to ant's icon package (ant-design/ant-design#12011) and the scroll to package.

Find a way to reduce this

Rotate the square surround

The square surround renders as a diamond shape. Rotate it so it fits on the svg print document better.

Add warning messaging after download

After pressing the download button, add a warning / message letting the user know how they import the svg into another drawing program - switch to standard or metric units, ensure 72 is the selected dpi.

Add a 3d mode

Add a 3d mode where you can take your 2d svgs and stack them in 3d. https://github.com/drcmda/react-three-fiber

This could allow you to compose and download a 3d model - maybe something like a vase, or preview the stacked version of your 2d shapes.

Add a page layout preview

Add a view that allows a user to preview how a final cut sheet would look

Make a link preview

When sharing the dataforms url via a social platform (eg. slack), make the preview look good.

Setup dataforms subdomain

Make the subdomain dataforms.joelongstreet.com work. Update the readme, package.json and svgDocumentMeta. Also, allow data-forms.joelongstreet.com

Add a favicon

Add translations

Add a second download button on the footer

Add a permanently visible download cut file button in the footer

Add a download button

Allow the generated svg to be downloaded

Write a better readme

Selected radio buttons are illegible

Selected radio buttons appear white which is the same color as the text on top of them.

Make through hole track shape size

When the shape is resized, make the through hole stick to a position relative to the shape.

Make mobile work

Come up with some abbreviated version that works on mobile

S&P 500 Example

Add S&P 500 daily closing value as example. Group by Mondays, row by year. Show since beginning of S&P time.

Add a singleton feature

Add a feature that allows all the visual output of data rows to be visually stacked. A radial line with increasing value per row should look like a tree trunk's rings.

Download cut file has overlapping shapes

Sometimes the downloaded cut file has overlapping shapes. Might be a problem with this - https://github.com/joelongstreet/data-forms/blob/master/src/Tiles.js#L195

Better highlight the active cell

When highlighting a row in the text area, the preview currently scrolls to the active item. Highlight the active item a little more.

Highlight the active row in the text area when scrolling.

Old svg children are never cleared

Old svg g children are never cleared. Select a few different examples and then scroll. Old g children are still under svg and overlap with the desired example g children.

Add a way to "save" your work

Maybe this is just saves to local storage, but there should be some kind of way to save your current progress.

Get rid of faux-dom errors

Warning: Encountered two children with the same key, faux-dom-0. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Add pictures of examples

Add some pictures and a description for each of the provided examples

Mouse hover for popover is confusing

The mouse hover for popover stuff is too confusing. Always show the fork button and cycle the pictures.

Add an onboarding flow

Come up with a "first time" flow that explains what this tool is and how to use it. This might be a video or a "click here, next click here, next do this..."

Add a "relative to row" option

Data sets should be able to be drawn relative to the row or relative to the data set. This would allow the baseball card example to be shown relative to the player's stats instead of the overall stat set.

Data doesn't update when forking

When forking an example, the data text area does not show the relevant data.

Show an error

If an error occurs while entering data, say so - this might be a dangling comma or an extra line break or something like that.

Add help text

add help text for each setting. Also say why a setting might be disabled in a certain setting configuration.

Add a way to zoom-in

Sometimes these shapes can be quite small (jewelry), so add a way to "zoom in". Maybe this is a magnifying glass feature.

Scroll to, when changing data

When modifying data for a given row, scroll to that row's corresponding shape.