A javascript library that extends D3.js to enable fast and beautiful visualizations.

Overview

d3plus

NPM Release Build Status Dependency Status Gitter

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

Installing

If you use NPM, npm install d3plus. Otherwise, download the latest release. 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

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.

React Usage

Comments
  • IE 9 Bugs

    IE 9 Bugs

    I've been testing my project through different browsers and it seems to work fine in Firefox and Chrome. However it has issues when it comes to IE, and specifically IE9. Do you have any plans on supporting IE9 at all? If you were to implement this I would gladly and actively help out with bug tracking.

    opened by danihodovic 24
  • Public Access to Mouse Events

    Public Access to Mouse Events

    D3 has the .on("click|hover|..") functionality that let's you define custom actions on click. In my particular case I need a ajax post to reload data or a async reload if d3plus supports it. (The request needs to be sent to the server which responds with new data, but I only need the click functionality to solve the rest).

    opened by danihodovic 23
  • Release textwrap as a standalone module

    Release textwrap as a standalone module

    Hey there,

    I have been searching for a text-wrapping utility to assist with wrapping text in my D3 project. Your text-wrapping functionality is perfect, but I don't need all of d3plus, just the text wrapping code.

    I can (and have) forked the code, but I thought I'd ask if you'd consider providing text-wrapping as a standalone module that could be included via bower etc without the need for d3plus.

    Thanks for the great utility!

    Helen

    opened by goodforenergy 12
  • Vertical/Horizontal Centering Wrapped Text

    Vertical/Horizontal Centering Wrapped Text

    See http://jsfiddle.net/zrzx5Lvu/3/ for examples of the result I'm looking for.

    It would be real nice to be able to set the alignment of wrapped text, especially being able to center the text in a rectangle, both horizontally and vertically. Maybe by setting class attribute in the HTML, or doing it by code like below for example.

    d3plus.textwrap() .container(d3.select("#rectWrap3")) .verticalAlign("middle") .draw();

    For horizontal centering, you can add "text-anchor: middle" to the style and set all tspan's x values to x value of the rect's x value and add half of the shapes's width: all tspan dx values = rect's x position + (rect's width / 2)

    Vertical centering seems more tricky, I'm not sure how to do it properly, but it seems to work ok by setting the dy value of the first tspan with the below formula: first tspan dy value = (rect's height / 2) - (sum of remaining tspan's dy values / 2)

    Combine both to have the text centered in the middle of the rectangle.

    The jsfiddle link above shows examples with the final result after applying text-anchor and tspan calculations.

    opened by mattias-palm 11
  • v1.9.5: Uncaught TypeError: Cannot read property 'constructor' of null

    v1.9.5: Uncaught TypeError: Cannot read property 'constructor' of null

    Got the latest 1.9.5 of d3plus and it gives me this error trying to render a simple line chart. It's coming from d3plus.full.js.

    //line 42943 if (d.constructor === Date) {

    opened by aaronucsd 10
  • topojson object for .coords

    topojson object for .coords

    I have a use case where I want to load a topojson file once from the server and then pass it to the .coords() method, perhaps multiple times given the user can select different visualization which use the same topojson file. Given it's the same underlying file, I want to load once and use multiple times, i.e. hold in memory as object.

    I have the following jquery code:

    us_json = (function () { var json = null; $.ajax({ 'async': false, 'global': false, 'url': "/maps/UStopo.json", 'dataType': "json", 'success': function (data) { json = data; } }); return json;

    The code above grabs the topojson file from my server and then assigns it to the us_topo variable. I then try and pass that variable to the d3plus .coords() method, like

    .coords({"value": us_topo})

    When I do so, I get following error...

    Uncaught TypeError: Cannot use 'in' operator to search for 'type' in false d3plus.full.min.js:18

    Does the .coords value have to be file location or can it be json object?

    opened by ltoole 10
  • Questions about font, tooltip, and legend sizes

    Questions about font, tooltip, and legend sizes

    I can't seem to get the defult font-size to change on treemap. I tried using .labels({font{size: 20}}) and .font({"size":"10"}) and nothing changes the default size. I also need to make the tooltip larger than it is. Also when displaying 3 treemaps, the legend disappears. I think there is a max height in px and does not allow my legend to show up.

    opened by mcarrizosa4 10
  • override specific level's mouse events

    override specific level's mouse events

    Hi,

    In grouped treemap, I need a click action at the deepest level. but somehow if I use mouse(), it overrides the existing click handling at parent level ( i.e, clicking on parent should give child which is by default happening in d3plus) and when the deepest level is encountered then, instead of redirecting back to the parent level, I need to have a custom click handling.

    Please let me know how I can work on that.

    Thanks !

    opened by heenamahour 9
  • Text doesn't wrap right in IE9

    Text doesn't wrap right in IE9

    The text wrapping feature doesn't seem to work quite right in IE9. The wrapping area goes outside the rectangle. When aligned on the top it also appears slightly above the recangle (this can be seen on your own example page with IE9).

    Chrome chrome

    vs. IE9 ie9 ie9b

    opened by mattias-palm 9
  • Treemap window resize

    Treemap window resize

    Hello, I´ve created a html which has radiobuttons to control the d3plus treemps, according to the selection it should show a graph, it works ok, the problem is when the size of the screen changes, when it happens the graphic which is not selected is not showed completely. Anyone could help me?. The code is the following:

    CSS: .cont{ margin: 0; bottom: 0; position: absolute; top: 0px; left: 0px; width: 100%; height: inherit; }

    html:



    JS: d3.csv("todos.csv", function(error, data) { data.forEach(function(d){ d.id = d.id; d.d2016 = +d.d2016; d.color = d.color; });

    sdata = data;
    new d3plus.Treemap()
    .data(sdata)
    .groupBy(["id"])
    .sum("d2016")
    .select("#viz")
    .render();
    
    new d3plus.Treemap()
    .data(sdata)
    .groupBy(["id"])
    .sum("d2015")
    .select("#viz1")
    .render();
    

    });

    function switchChart(cont){ containers = document.getElementsByClassName("cont"); for (i = 0; i < containers.length; i++) { containers[i].style.display = 'none'; }
    document.getElementById(cont).style.display = 'block'; };

    opened by ranucame 8
  • Treemap simple example not work

    Treemap simple example not work

    I've just dowloaded the last version of d3plus and try to run this example.

    My code cannot be simpler.

    <div id="viz"></div>
    <script src="./js/d3.js"></script>
    <script src="./js/d3plus.full.js"></script>
    <script>
      var data = [
        {id: "alpha", value: 29},
        {id: "beta",  value: 10}
      ];
    
      new d3plus.Treemap()
        .data(data)
        .groupBy("id")
        .select("#viz")
        .sum("value")
        .render();
    </script>
    

    Logs are showing no errors but nothing is showing up on the screen.

    I've tested with d3 v.5 v.4 v.3.

    d3bug.zip

    opened by ghost 8
  • is there a way to set the height and position of a region?

    is there a way to set the height and position of a region?

    been looking throughout the docs but can't seem to find and answer. My goal is to place several regions with the same start and stop but have them be 'stacked'

    opened by grimace 3
  • Bump normalize-url from 4.5.0 to 4.5.1

    Bump normalize-url from 4.5.0 to 4.5.1

    Bumps normalize-url from 4.5.0 to 4.5.1.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    opened by dependabot[bot] 0
  • Bump handlebars from 4.7.6 to 4.7.7

    Bump handlebars from 4.7.6 to 4.7.7

    Bumps handlebars from 4.7.6 to 4.7.7.

    Changelog

    Sourced from handlebars's changelog.

    v4.7.7 - February 15th, 2021

    • fix weird error in integration tests - eb860c0
    • fix: check prototype property access in strict-mode (#1736) - b6d3de7
    • fix: escape property names in compat mode (#1736) - f058970
    • refactor: In spec tests, use expectTemplate over equals and shouldThrow (#1683) - 77825f8
    • chore: start testing on Node.js 12 and 13 - 3789a30

    (POSSIBLY) BREAKING CHANGES:

    • the changes from version 4.6.0 now also apply in when using the compile-option "strict: true". Access to prototype properties is forbidden completely by default, specific properties or methods can be allowed via runtime-options. See #1633 for details. If you are using Handlebars as documented, you should not be accessing prototype properties from your template anyway, so the changes should not be a problem for you. Only the use of undocumented features can break your build.

    That is why we only bump the patch version despite mentioning breaking changes.

    Commits

    Commits
    • a9a8e40 v4.7.7
    • e66aed5 Update release notes
    • 7d4d170 disable IE in Saucelabs tests
    • eb860c0 fix weird error in integration tests
    • b6d3de7 fix: check prototype property access in strict-mode (#1736)
    • f058970 fix: escape property names in compat mode (#1736)
    • 77825f8 refator: In spec tests, use expectTemplate over equals and shouldThrow (#1683)
    • 3789a30 chore: start testing on Node.js 12 and 13
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    opened by dependabot[bot] 0
  • Bump lodash from 4.17.20 to 4.17.21

    Bump lodash from 4.17.20 to 4.17.21

    Bumps lodash from 4.17.20 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    opened by dependabot[bot] 0
  • X Axis labels - Area Chart

    X Axis labels - Area Chart

    Hello,

    I have a problem with a area chart (https://jsfiddle.net/ranucame/4sckzL29/10/). When the with of screen is too short the labels of the X Axis are overlapped with the chart. Is there some way to correct it?

    image

    Thanks

    opened by ranucame 5
Releases(v2.0.0)
  • v2.0.0(Feb 3, 2021)

    v2.0 of d3plus marks the first public release of all of the various modules that have been in development (and production) over the past few years. This update includes 3 substantial upgrades:

    1. better default visual styles
    2. updated all d3 packages to their latest version
    3. updated popper.js to latest version

    The following items have updated visual styles, so your designs may change if you are not already overriding the following items in your visualization configs:

    • larger fontSize for axis tick labels
    • lighter gridConfig:stroke color on axes
    • custom legendPosition and colorScalePosition based on width/height ratio ("right" in landscape, "bottom" in portrait)
    • automatic Bar labels in BarChart (inside Bar if space is available, outside if not)
    • legend in BarChart and Treemap is set to false if the items shown matches the items in the legend
    • default curve for Line and Area shapeConfig has been changed from "linear" to "monotoneX"
    • default colorDefaults.dark color changed from #444 to #555 (used for most text labels)
    • new default colors when assigning colors automatically
    • new default color scale
    • colorScale scale changed from "linear" to "jenks"
    • legend fontSize is smaller
    • legend width/height changed from 10 to 12
    • larger title font-size for tooltips
    • tooltip backgrounds changed from white to light gray
    • completely removes all controls methods (considering deprecating d3plus-form in favor of users defining their own controls)
    • sets axis title automatically if user used a String to define the axis and has not specified a title
    • adds a small buffer to numeric axes
    • hides repetitive tick labels in non-grouped BarCharts

    In addition to the style changes, the following updates to the underlying d3 libraries will effect anyone backpacking off of the d3plus dependencies in their projects:

    • mouse no longer exists in d3-selection. switch to use pointer, and provide it the current event as it's first argument
    • the global event object no longer exists, it is now passed along to the current function being run as a forth argument (d, i, x, e)
    • the latest d3 modules adopt some ES6 usage (most notably Set/Map). your code must be run through a transpiler to support older browsers.
    Source code(tar.gz)
    Source code(zip)
  • v1.9.8(Aug 21, 2016)

    • runs default mouse behavior if user-defined function returns true (closes #447) (b3326fc)
    • updates color scale when changing the ID solo (closes #509) (73156c8)
    • fixes “fixed” time axes (6bc523c)
    • updates devDependencies (5e1cb8f)
    • fixes missing container console message (closes #258) (85800b9)
    • fixes scrollbar require in tooltip (#528) (b517f5f)
    • make the Legend boxes sort order to be configurable based on application logic (#529) (924bf44)
    • adds domain override to .color( ) scale (closes #523) (3133e81)
    • updates es_ES translations (e5a1480)
    • fixes READEME splash image (ab12c25)
    • adds “none” stroke to legend container rectangles (d5bda90)
    • adds Slack badge to README.md (6d73a5a)
    • makes the Legend Tooltip (short mode) have a configurable title (#518) (0ee733a)
    • corrects issue caused by muting nodes that have edges between them. (#517) (258b962)
    • fixes line stroke-width behavior (61b9448)
    • fixes line stroke changing when mouse set to false (e9285bf)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1.00 MB)
  • v1.9.7(Jul 6, 2016)

    • adds specific "margin" property to .axes( ) (21b5e34)
    • fixes displaying custom agg functions in tooltips (closes #510) (fd87481)
    • adds mouse axis tooltip to discrete axis (closes #508) (570321e)
    • fixes manually overriding time axis ticks and labels (#508) (6cdabba)
    • fixes sorting of discrete string axis (closes #502) (004dd27)
    • fixes issue with single-entry discrete number axis (closes #485) (dd0b9c7)
    • fixes issue with flipping y-axis (4350a7b)
    • adds catch to only resize if values have changed (49dcfe0)
    • fixes width resizing on small charts (closes #503) (e0d48aa)
    • makes the tooltip (short mode) have a configurable max number of children (#488) (b780a17)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1021.08 KB)
  • v1.9.6(Jun 15, 2016)

  • v1.9.5(Jun 1, 2016)

    • fixes negative bar charts (closes #485) (fe3a94d)
    • clamps all axis scales (prevents bars outside of plane) (9d00a91)
    • fixes custom UI function methods (closes #452) (015aff4)
    • fixes tooltip going underneath scrollbar (3a3d2cd)
    • adds small buffer to axis tick label wrapping (794a279)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1019.77 KB)
  • v1.9.4(May 31, 2016)

    • fixes label backgrounds in rings and box (dd8cd6c)
    • updates gulp-connect dev dependency (a1e6f4e)
    • adds manual domain for size scale (closes #460) (5a6779f)
    • adds support for non-zero bar chart axes (closes #480) (9090844)
    • fixes multiple heatmaps overwriting eachother (closes #477 & #481) (120a0a2)
    • sorts axis tick numbers in numeric order (477fc81)
    • adds localizations for box plot (35b5185 & 29a4c8e)
    • adds German localization (0dcbb7c)
    • fixes line to scatter transition (closes #465) (679ad43)
    • adds a unique ID to each data group (closes #466) (7ab5715)
    • fixes custom textwrap split logic... again (#427) (54d8a61)
    • adds "data" boolean to .legend( ) (6417f75)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1019.28 KB)
  • v1.9.3(Apr 6, 2016)

    • reduces title height constraight to half-height (7c846b7)
    • fixes line charts with 0 values (closes #456) (8a8f807)
    • adds undefined/null/false check to number format (0e85912)
    • fixes another offsetWidth dep (#431 closes #457) (5215434)
    • adds strength value to Sankey tooltips (af544de)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1015.64 KB)
  • v1.9.2(Mar 24, 2016)

    • @bryanph: Fix require() bundling (#315) (a1457e8)
    • adds "output" key to format params for axis labels (a909703)
    • @bryanph: adds resize support for D3 selections (#433) (c4e5238)
    • fixes hide/isolate buttons (0603b18)
    • fixes tree map percentages and closes #218 (3a5a8bf)
    • removes period from default textwrap split (closes #442) (f72193d)
    • adds textwrap support for multiple spaces (8bc3e1e)
    • @iamakulov: Remove deprecated SVGElement.offsetHeight property (ddea7c4)
    • adds new "area" type (closes #284) (43a6020)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1015.45 KB)
  • v1.9.1(Feb 19, 2016)

    • fixes IP address textwrapping (closes #427) (814ee6a)
    • fixes edge label background in IE (#428) (f7a973a)
    • fixes back button position in IE (closes #428) (e62dee4)
    • removes y axis labels from box plot (closes #426) (b793c34)
    • adds text stroke catches for use with canvg (dea78a6)
    • Merge pull request #422 from bryanph/patch-2 (4e8a3d6)
    • change numeric to numeric.js (20cbfbf)
    • adds back button to rings and sankey (92fc754)
    • mouse pointer now only appears when clickable (c396cf3)
    • fixes rotated bar chart label positioning on redraw (0da2ebb)
    • redetects width/height when set to false (7c2c9af)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1014.78 KB)
  • v1.9.0(Feb 13, 2016)

    Long time no see. This release brings with it a few new visualization types and a plethora of bug fixes. Thanks to everyone for their patience with this release, as things have been a bit hectic for us the past few months.

    This release will also (probably) be the last major release before 2.0. We've started separating the different facets of the library into separate modules (check out the new text wrap module), and you can expect more news coming in the next few months outlining the roadmap.

    Highlights

    • new "radar" visualization type: live example
    • new "sankey" visualization type: live example
    • shapes can now be given a custom .class( ) for their DOM elements (#379)
    • a custom stroke width can now be given to individual lines in a line plot using the .size( ) method
    • text wrapping now supports manual line breaks using \n (#362)
    • if the .text( ) key is set, bar charts will use that text as a label directly inside the bar (#354)
    • adds share percentage to pie chart tooltips
    • adds proper .id( ) nesting to pie charts

    Axes Improvements

    • x/y charts now support a second axis with the new .x2( ) and .y2( ) methods
    • "ticks" of .x( ) and .y( ) now support being passed a custom array of values to be use for tick marks (#312)
    • axis tick labels can be set using an array of values or turned off completely by setting the "labels" of the advanced "ticks" object for .x( ) and .y( ) to false
    • adds a "ticks" boolean to .axes( ) which will toggle the small data ticks seen in scatter plots
    • adds a "spacing" (ie. css letter-spacing) option to the font styles of each axes "axis", "label", and "ticks"
    • the "size" and "position" of bars in a bar chart can now "persist" across each discrete bin

    Grab Bag

    • adds a "labels" boolean to .legend( ) to turn off text labels inside of legend squares
    • the "size" property of the .legend( ) "font" object now accepts an array of sizes for textwrap resizing
    • new "fullscreen" boolean in .tooltip( ) that allows large tooltips to be appended to the document body (instead of the container element)
    • new "stacked" boolean in .tooltip( ) that allows HTML content to always appear stacked underneath the data in large tooltips
    • large tooltips can now be closed by pressing ESC
    • smarter logic for label colors on dark backgrounds
    • the "key" to be used inside of a Topojson object can now be manually set in .coords( )
    • all D3 map projections are now supported in .coords( ), in addition to custom projection functions (#240)
    • d3plus.util.closest now supports string comparison
    • new cross-browser page scroll position detection with d3plus.client.scroll
    • adds Korean ("ko_KR") formatting and translations
    • switches ordering of yellow and blue in the default color scale

    Bug Fixes

    • fixes vertical alignment of text in circles (#412)
    • d3plus.string.title would capitalize the string after an apostrophe (was Reese'S but is now Reese's)
    • fixes some textwrapping issues with ampersands
    • fixes a Microsoft Edge textwrapping x positioning bug (#402)
    • fixes bubble sorting (#417)
    • .legend( ) now properly sorts by "id" (#369)
    • fixes problems where UI would break with a 0 number id
    • form elements now correctly inherit all parent styles and formatting
    • geo map labels now update correctly on redraw
    • "value" can now be passed as an advanced .coords( ) object property (#383)
    • a couple of small speed boosts to geo maps
    • a TON of bar chart discrete axis fixes
    • fixes right-to-left textwrapping
    • mouse tooltips now hide while panning or scrolling
    • "axis" in the .x( ) and .y( ) methods now refers to the correct axis (#403)
    • d3plus.client.ie now correctly detects IE11 and Edge
    • a handful of other IE and Firefox bugs

    As with all large releases, there's bound to be bugs we've missed. Keep those Issues coming in!

    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(1015.47 KB)
  • v1.8.0(Aug 15, 2015)

    This release warrants a nice version number bump, as it brings in the most requested feature: custom mouse events. As an example, to override the click event for all shapes you would write:

    .mouse({
        "click": function(d, viz) {
            console.log("clicked!");
        }
    })
    

    Or, to turn off ALL mouse events:

    .mouse(false)
    

    Full documentation can be found here.

    Full Highlights

    • All mouse events can now be toggled off or overridden with user-defined functions using the new .mouse( ) method (#140).
    • The width of the boxes in a Box Plot can now be manually set using .size( ) (#359).
    • Custom timeline height now works (#342).
    • Fixed issue with monthly timelines.
    • Chart axes now correctly draw after having no data (#352).
    • Fixed some bugs where certain solo and mute filters weren't working (#347, #351).
    • Added coffeeify transform to the browserify package configuration (#353 thanks @Id0rman).
    • Fixed some edge case edge bugs (heh).
    • Fixed an edge case coordinate filtering bug.
    • Drop down forms now correctly use custom formatting.
    • UI enter/update bug has been fixed (#356).
    • Status messages now respect the user-defined background color.
    • Updated dependencies.
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(969.77 KB)
  • v1.7.4(Jun 18, 2015)

    • Fixed issue with child nodes appearing in the wrong sub-group (#327).
    • New advanced option for the legend: by turning on "filters" the legend tooltips will have show/hide buttons for that color grouping (#261).
    • New advanced option for data tooltips: by setting the "sub" parameter, data tooltips can display a sub-title based on a key in the data (#340).
    • Fixed bug where tree map squares would not let you click to zoom when there was only 1 child element (#270).
    • Tooltip "including" values are now aggregated correctly and displayed in descending order.
    • Fixed a problem when parsing integer year values.
    • Fixed bug causing timelines with a lot of ticks and very little horizontal space to error out (#333).
    • Fixed bug with using custom time formatting.
    • d3plus.number.format now correctly handles very small numbers (#338).
    • d3plus.string.title is now much smarter and has better support for non-roman characters (#334).
    • Added Portuguese localization (thanks @flaviolpp!).
    • Added a "branding" parameter to .messages( ), which is off by default. This new behavior adds a small "powered by D3plus" logo underneath all large message displays. We've added this in an effort to help gain awareness of the platform, with the hope of growing the community even further. In one of the next major releases, we may have this on by default, but there will always be an option to disable it.
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(965.57 KB)
  • v1.7.3(May 15, 2015)

  • v1.7.2(May 7, 2015)

    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(950.72 KB)
  • v1.7.1(Apr 14, 2015)

  • v1.7.0(Apr 10, 2015)

    This update has been in the oven for a long time, and we're glad to finally get it out of the door. There aren't any standout new features with this update, but a lot of small bug fixes and improvements have been made. Here are the highlights:

    • Fixed a plethora of text wrapping bugs (including #251 #253).
    • Much better timelines. They reference the time axis if it exists in the visualization, and the display of larger timelines is much cleaner. Assitionally, there is now a play button by default (#122).
    • Box Plot IQR and Extent values are now put into tooltips by default. They can each be disabled using the .tooltip( ) method (#296).
    • Custom time formatting now works as expected (#259).
    • Fixed a bunch of axis/time bugs (#260, #267, #269).
    • Fixed some bugs with d3plus.string.title (thanks @Jabher #247 #248).
    • Tooltips can be disabled alltogether by passing false to .tooltip( ) (#263).
    • Fixed issue with Geo Map paths not updating their color with new data.
    • Fixed Geo Map labels persisting after switching to a different visualization type.
    • Fixed some issues with the .csv( ) method (thanks @jspeis #300 #301 #302).
    • d3plus.color.lighter now takes saturation into account when lightening colors.
    • Reversed the UI coloring in Forms.
    • Keyboard arrows now work in drop forms (#134).
    • Ordering is now fixed in visualizations.
    • Default visualization sorting is now descending.
    • Icons can now be toggled on/off in the legend.
    • .format( ) now accepts a lookup dictionary of affixes to be used before/after number formatting.
    • If using a custom number formatting function, you must now explicitly append "%" to any "share" number.
    • Tweaked precision in the default number formatter (share numbers in Tree Maps look better now!).
    • Speed and reliability improvements in regards to data nesting and the legend.
    • Fixed an issue with custom data aggregations.
    • Fixed various bugs with donut shapes and custom segment fills.
    • Titles and sub-titles now support being passed a function (#252).
    • Fixed an issue with the x position of visualization titles.
    • Status Message positioning can now be set manually.
    • Fixed issue where large tooltips would disappear on hover in Chrome for Windows.
    • Created d3plus.network.distance to calculate the distance between 2 points.
    • Updated dependencies.
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(938.50 KB)
  • v1.6.9(Jan 16, 2015)

    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(913.98 KB)
  • v1.6.8(Jan 6, 2015)

    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(913.30 KB)
  • v1.6.7(Dec 17, 2014)

  • v1.6.6(Dec 15, 2014)

    New Stuff

    • Removed d3plus.network.distances in favor of the new d3plus.network.smallestGap function, which uses a quadtree to return the distance between the two closest nodes in a network.
    • Created .config( ) method to allow passing a pre-constructed d3plus configuration Object.
    • Bar Chart padding is now based on the available screen space, and the value/percentage used can be changed by modifying the padding value for each axis independently (#217).
    • Bar Chart tooltips now follow mouse.
    • Implemented "min" and "max" overides for .size( ) scale.
    • Added "grouping" boolean to .id( ) that allows toggling data grouping while still maintaining nesting for tooltips.
    • The opacity of the background items when focusing on a specific portion of a Network or Geo Map is now accessible via the "curtain" opacity in .tooltip( ).
    • Chart grid lines can now be toggled on/off independently for .x( ) and .y( ) using the "grid" and "axis" keys.
    • Axis label text can now be overridden.
    • .x( ) axis text is now text-wrapped when appropriate (closes #182).
    • .order( ) now contains an "agg" key that determines the aggregation method when order groups of data on a discrete axis (Bar Charts).
    • Optional parameters in d3plus.font.sizes are now grouped into an optional dictionary, and include a new "mod" parameters.
    • .legend( ) and .labels( ) both now accept a "text" key that overrides the default .text( ) behavior (closes #221).
    • "opacity" of .edges( ) now accepts a number, a user-defined function that gets passed the edge data and expects an opacity in return, or a string key of the edges to run through a scale (closes #219).
    • Additional parameters for the size scaling of .edges( ) are now available.

    Bug Fixes

    • Discrete chart axes (like in Bar Charts) now support String values.
    • Greatly improved chart axis buffers, specifically with log scales.
    • Axis labels now correctly position themselves based on their font size.
    • Tooltips are no longer created in the .container( ) element, and are now only constrained by the edges of the window.
    • Fixed issues with .tooltip( ) positioning on scrolling pages and absolutely positioned .container( ) elements.
    • A ton of fixes related to label behavior of visualizations that zoom (Network, I'm looking at you).
    • Global .font( ) styles now correctly propagate down to any other method that supports them.
    • Removed pixel rounding from coordinate labels, which was causing incorrect text positioning.
    • Fixed bug where d3plus.geom.largestRect would crash if point intersection could not be found.
    • Line Plots now animate correctly (and are much faster to draw).
    • Improved behavior of the "including" list in tooltips.
    • Fixed bug with .active( ) pie fill styling.
    • Fixed custom .error( ) messages not being displayed in visualization initialization.
    • .ui( ) form data now maintains the order in which it was passed.
    • .ui( ) text labels now get run through the .format( ) function.
    • Multiple additional small .ui( ) bug fixes.
    • "Click to zoom" is now only available for data points that have more than 1 child element.
    • d3plus.number.format now correctly formats 4-digit numbers (ex. 5000 to 5k).
    • .icon( ) now defaults to false.
    • Charts with large amounts of data now will not display data ticks along each axis (they were illegible and slowed the draw time down, closes #218).
    • d3plus.util.uniques now correctly detects and removes null values.
    • The d3plus object (d3plus.viz, d3plus.form, etc) is now passed as a second variable to all method callback functions.
    • Small speed improvements across the entire library, including a rudimentary internal form of data caching/lookup.
    • Updated dependencies (now requires D3.js 3.5 or greater) and fixed some Bower issues.
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(910.62 KB)
  • v1.6.5(Nov 3, 2014)

  • v1.6.4(Oct 31, 2014)

    • .ui( ) elements now support providing custom methods, labels, and form types (live example).
    • Fixed nesting bug where duplicate number values where being discarded (fixes #209, thanks @nirajbothra!).
    • All charts now use the .time( ) variable for the discrete axis, if not specified (fixes #213).
    • Focused network/rings nodes now show a tooltip if the focus tooltip has been disabled (fixes #207).
    • Fixed an internal bug when parsing data key types if first encountered was null.
    • Small design fixes/tweaks.
    • Created an example page showing how .icon( ) works (here).
    • Updated dependencies (prod and dev).
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(887.61 KB)
  • v1.6.3(Oct 17, 2014)

    • Fixed broken search in drop down forms.
    • All "solo" and "mute" filters now have the ability to access a callback function (#200).
    • .format( ) now gets passed the data object when applicable (closes #199).
    • Added a "sort" boolean to .data( ) in forms.
    • Fixed some bower.json file issues (thanks @tkh44).
    • Updated dependencies (standard and dev, closes #198).
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(834.81 KB)
  • v1.6.2(Oct 10, 2014)

  • v1.6.1(Oct 7, 2014)

  • v1.6.0(Oct 3, 2014)

    New Stuff

    Refactored Code

    • Completely refactored all visualizations that use the X/Y plot (Scatter, Line Plot, Stacked, etc). Improved both speed and styling.
    • Deprecated the "chart" visualization type. Moving forward, please use the specific type you intend to use ("stacked", "line", etc).
    • Moved d3plus.util.offset to d3plus.geom.offset.
    • Moved d3plus.util.distances to d3plus.network.distances.
    • Moved d3plus.evt to d3plus.client.pointer.
    • Moved all of the General Utilities into d3plus.client, as these utilities are specific to the client browser's properties.
    • Removed localizations from the global namespace.
    • Renamed "continuous" axis to "discrete" axis, as it is a more appropriate name.
    • dev Full Browserify support, everything uses the module system internally.
    • dev Modularized gulpfile.js tasks into separate files.
    • dev Updated dev-dependencies, please run npm update in your local environment.

    Bug Fixes

    • Nodes in the Primary Connections list are now clickable (closes #99).
    • HTML content is now displayed in focus tooltips (closes #163).
    • External thresholds can now be defined as functions (closes #173, thanks @WoLpH).
    • Threshold formatting now correctly passes the key name (closes #174, thanks @WoLpH).
    • Fixed some bugs with discrete time axes (resulting in unconnected Line Plots).
    • Some cross-browser bug fixes (focusing on IE9 support, thanks @dani-h).
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(832.82 KB)
  • v1.5.1(Sep 10, 2014)

    • Fixed a bunch of bugs with the Bubbles visualization type (new example).
    • Networks now draw slightly faster.
    • A "strength" value can now be supplied for an edges list to help better automatically calculate node positions.
    • .size( ) now supports a static Number value, which will set all sizes to that value (thanks to @alexandersimoes).
    • Removed negative values from apps with positive-only grouping (thanks to @jspeis).
    • Addressed some issues when switching between Visualization Types.
    • Fixed some small bugs related to using the newly supported Date objects.
    • Updated default color heatmap and range to match new color scale.
    • Lines in Line Plot visualizations are now twice as thick.
    • Some small edge case fixes to the Legend.
    • Firefox console statement fix (#162)
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(780.25 KB)
  • v1.5.0(Aug 13, 2014)

    Version 1.5 of D3plus incorporates a couple of long-needed features, as well a bunch of stability improvements. Here's the full list of updates:

    • The .time( ) method now supports both Javascript Date Objects and values that can be parsed into Date Objects. We suggest using time formats specified in the first table on this page.
    • With the new time behavior, the Timeline will now smartly detect the grainularity and labels necessary to display your time data the best possible way. In addition, we've cleaned up the design of the Timeline and have made the handle "snap" to each time period.
    • We've created a new visualization type, Paths, which uses @dsmilkov's d3plus.network.shortestPath function to visualize the shortest path between 2 nodes in a network. Documentation and examples are forthcoming.
    • The .focus( ) method now uses an Array of focus values. You can still pass it a single value, but it will now return an Array of values. To change the maximum number of paths to display, the "limit" value in .edges( ) can be modified (defaults to 5).
    • Localization names now match the standard language_COUNTRY format (ie. "en_US" instead of "en").
    • Modified the default color scale to work better with small datasets.
    • Fixed an issue where data points with the same name but different parents would not be displayed.
    • Improved the stability of .text( ) behavior for different nesting levels.
    • Fixed an issue where d3plus.string.title was not capitalizing accented characters.
    • Fixed an issue where loading data from a URL wasn't parsing numbers from text files.
    • Fixed a lot of small bugs with the Tooltip and the Legend.
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(800.89 KB)
  • v1.4.5(Jul 28, 2014)

    • Fixed broken Line Charts (#150).
    • Fixed some issues with Firefox not finding .offsetHeight.
    • Created an example page showing Custom Text and Number Formatting.
    • Fixed a problem where tooltip values were not passing their "key" to the respective formatting functions.
    • Created an example page showing how to Add Nodes and Edges to a Network.
    • Fixed a bug where a visualization's zoom would not get reset when the Nodes List changed.
    • Resolved cross-browser inconsistencies with axis label font styles.
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(768.53 KB)
  • v1.4.4(Jul 25, 2014)

    • Fixed critical bug where Stacked Area Charts showing only 1 year would crash the browser (#146).
    • Fixed a bug where dragging a Geo Map or Network would sometimes trigger a click event (#143).
    • Fixed labels not appearing in Safari (#145).
    • Fixed circle text-wrapping in Firefox.
    • Fixed a problem when displaying visualizations with no data.
    • Fixed various small tooltip nesting display bugs.
    Source code(tar.gz)
    Source code(zip)
    d3plus.zip(767.83 KB)
Owner
D3plus
D3plus
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
Repo for various Tesla internal data visualizations

teslarender Repo for various Tesla internal data visualizations $ http-server -g -c0 -p8899 Access at: http://localhost:8899/?http://fn.lc/s/depthre

Tristan Rice 29 Dec 15, 2022
A platform for creating interactive data visualizations

owid-grapher This is the project we use at Our World in Data to create embeddable visualizations like this one (click for interactive): ⚠️ This projec

Our World in Data 1.1k Jan 4, 2023
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.

Babylon.js Getting started? Play directly with the Babylon.js API using our playground. It also contains a lot of samples to learn how to use it. Any

Babylon.js 19.1k Jan 4, 2023
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Create beautiful charts with one line of JavaScript

Chartkick.js Create beautiful charts with one line of JavaScript See it in action Supports Chart.js, Google Charts, and Highcharts Also available for

Andrew Kane 1.2k Jan 2, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
Create beautiful JavaScript charts with one line of Ruby

Chartkick Create beautiful JavaScript charts with one line of Ruby. No more fighting with charting libraries! See it in action Chartkick 4.0 was recen

Andrew Kane 6.1k Jan 8, 2023
Visualize your tech stack and database with a simple, beautiful, and interactive web app.

Stacify Visualize your tech stack and database with a simple, beautiful, and interactive web app. Why Stacify Why would you want to use Stacify? Well,

Isaiah Hamilton 1 Jan 20, 2022
Beautiful React SVG maps with d3-geo and topojson using a declarative api.

react-simple-maps Create beautiful SVG maps in react with d3-geo and topojson using a declarative api. Read the docs, or check out the examples. Why R

z creative labs 2.7k Dec 29, 2022
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 2, 2023
🍞📊 Beautiful chart for data visualization.

?? ?? Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. ?? Packages The functionality of TOAST U

NHN 5.2k Jan 6, 2023
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts https://valor-software.com/ng2-charts/ Installat

Valor Software 2.2k Jan 4, 2023
Java library for use with Chart.js javascript library

Chart.java Chart.java enables integration with the excellent Chart.js library from within a Java application. Usage example In Java: BarDataset datase

Marceau Dewilde 102 Dec 16, 2022
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
TChart.js - simple and configurable Bar and Line Chart library in Javascript

TChart.js Simple and configurable Bar and Line Chart library in Javascript Description TChart.js is a canvas-based simple Javascript Bar and Line Char

null 4 Mar 3, 2021