Giter Club home page Giter Club logo

d3plus's Introduction

d3plus

D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations.

Installing

If using npm, npm install d3plus. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus";

d3plus can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus@2"></script>
<script>
  console.log(d3plus);
</script>

Resources

Examples and documentation are published in a Storybook here. Each example has controls that are able to modified on the fly, documentation for each method used, and an example code output for the d3plus-react configurations.

Modules

D3plus 2.0 is a collection of modules that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more.

Core Packages

React Usage

Examples and Documentation

d3plus's People

Contributors

alexandersimoes avatar bryanph avatar codecutteruk avatar danihodovic avatar davelandry avatar dsmilkov avatar ericjohnf avatar gwezerek avatar hkwi avatar iamakulov avatar jabher avatar jazzido avatar jspeis avatar peterdavehello avatar romind avatar tkh44 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

d3plus's Issues

Show node labels on hover

When hovering over a node in the network app, whether or not something is highlighted, the user should always see the name of the node overlaid on top of a colored in version of the node.

Create .highlight() method

The user should be able to pass an array of IDs to highlight in a visualization, setting them apart from the other elements being drawn.

Visualizartion Variables Doc

Guys,

should be nice to have a example for each variable.

For example, there is a filter param but is not possible to know how to use it.

Custom functions in the aggregation attribute

It would be great to be able to pass custom functions when calling
.aggs({"hotttnesss":"mean"})

Ideally this would also support being done inline like:
.aggs({"hotttnesss":"x/2"})

where x is the hotttness value

App title and sub-titles

All apps should have the ability to display a title, passed by the user, and a sub-title based off of the data that is being shown (similar to the old observatory tree maps).

White flash in altering dataset

IN instances of changing the value_var in the stacked graphs, mid animation the SVG flashes white. Generally this only happens when the scale of the values is changing dramatically -- i.e from 1.2 Trillion to 3.5k, but not while you're altering values in those range(s) respectively. Winter is coming / Who are Jon Snow's real parents?

Title causes misbehavior with Stacked graph and Treemap

Hi there,

I think I've found a small bug. Please check this http://jsfiddle.net/4MUdK/8/

When a title is included (js Line 15) the stacked graph does not add up to 100%, but less.
I think its a generalized problem related to the real size in use during painting.

This bug with the title property also affects the percentage label in treemaps in a different way(when active:
.style({
"labels": {
"align": "start"
}
})

Check this http://jsfiddle.net/4MUdK/9/ and look for the 'beta' label where the share is not shown with enough space to draw. Now delete the title (js line 15) and beta will get the share. The downside is that delta will lose the label.

When this is active and a title is defined, it happens sometimes that the percentage labels are not shown (perhaps drawn outside. I've seen cases where the label is drawn half at the lower part of the square ) even though there is enough space.

best,

Public variable to toggle active nodes

Because of the nature of the scatter plot (usually reference distance), the user should have the ability to hide "active" nodes, as they may not be of interest to them (only wanting to see the "missing" or "closest" nodes).

Create "callback" public variable

The geo_map, network, and rings apps should have the ability to trigger an outside function when zooming/clicking around.

For example, this would enable a user to zoom in on a specific node in the network app, have the app hit a callback function that could theoretically change the window URL, so that they could send the URL to someone else and it would initialize zoomed in on that node.

Share % calculation in Stacked

IF you are trying to display share % in stacked graphs the calculated tooltip value sums to aggregate values great than 1.
screen shot 2013-07-25 at 4 54 43 pm

Tree Map Nesting Toggle

Create ability to toggle nesting in the Tree Map. By turning off nesting, the squares should order by value.

Specify year increments for Stacked Graphs

A nice feature!! Would be able to specify the increments of the years in the stacked graphs. The interval is currently being determined by the area the graph is built in.

Coordinate path nesting in Geo Map

Have the ability to nest data by geography, and give the user the ability to click on bordering areas to view their contents (and hide the previous area's children). This would be similar to the "zooming" in a tree map.

Size Nodes in Rings

Hi,

What is the meaning of the size info for each node in Simple Rings? For example, the size value for delta is more than twice the size value for epsilon and yet they have approximately the same display size.

Thanks.

Create a Color Key

Develop a key that is used to display whatever the current color_var variable is.

Create a universal search for all Apps

This will probably be part of an overall UI overhaul, but the user should be able to search (while dynamically highlighting) for anything in any app. It would make finding nodes in Networks and Scatters much easier.

"color_var" in Tooltip

The "color_var" value should be automatically placed in the tooltip when the value is not a color.

Tick Mark on Gradient Key

When a gradient of color is used, such as a Geo Map Heat Map, a tick mark should appear on the gradient when highlighting a node.

Link Labels

Links should be able to have their own labels based on a user-defined key that exists in the label object. Example:

{
    "source": "id1",
    "target": "id2",
    "strength": 35
}

In this case, the number "35" should be displayed on the link somehow.

Create "pause" state

Could be nice to be able to call viz.pause(true/false) to disable all functionality and render the SVG element as a static element (either image or canvas).

Is node sorting working?

I thought at one point I saw some small nodes placed BEHIND bigger nodes. It should always sort and append nodes from biggest to smallest.

Maybe it's an issue where we have to re-sort the nodes on update when their size may change?

Create a new "Path" app

In line with the Network and Rings apps, it would be interesting to create an app showing the shortest path from one node to another. Similar to an old "tech tree" concept we had a while ago.

Live data streaming

Would be interesting to have D3plus work with live streaming data, similar to how google analytics pulls in real time data.

Nested Item Titles in Tooltip

When showing a tooltip for an object with items nested inside of it, show the names of the top 5 items inside of it, sorted by and showing their values.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.