npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

d3.compose

v0.15.20

Published

Compose complex, data-driven visualizations from reusable charts and components with d3

Downloads

40

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

timhalltimhall

Keywords

d3.composed3d3.chartd3-chartcomposechart

Readme

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.

  • Advanced layout engine automatically positions and sizes charts and components, layers by z-index, and is responsive by default with automatic scaling
  • Standard library of charts and components for quickly creating beautiful charts
  • Chart and Component bases for creating composable and reusable charts and components
  • Includes helpers and mixins that cover a range of standard functionality
  • CSS class-based styling is extensible and easy to customize to match your site

npm version Code Climate

Getting Started

  1. Download the latest release

    • d3.compose-all Includes all charts, components, extensions, and mixins
    • d3.compose-mixins Use if you're creating your own charts/components and want to use d3.compose's mixins to help
    • d3.compose Use if you're using your own charts/components and don't need mixins, charts, or components provided by d3.compose

  2. Download the dependencies:

  3. Add d3.compose and dependencies to your html:

    <!doctype html>
<html>
  <head>
    <!-- ... -->

    <link rel="stylesheet" type="text/css" href="d3.compose.css">
  </head>
  <body>
    <!-- ... -->

    <script src="d3.js"></script>
    <script src="d3.chart.js"></script>

    <script src="d3.compose-all.js"></script>

    <!-- Your code -->
  </body>
</html>

  4. Create your first chart

    var chart = d3.select('#chart')
  .chart('Compose', function(data) {
    var scales = {
      x: {type: 'ordinal', data: data, key: 'x'},
      y: {data: data, key: 'y'}
    };

    var charts = [
      d3c.lines({
        data: data,
        xScale: scales.x,
        yScale: scales.y
      })
    ];

    var yAxis = d3c.axis({scale: scales.y});

    return [
      [yAxis, d3c.layered(charts)]
    ];
  })
  .width(600)
  .height(400);

chart.draw([{x: 0, y: 10}, {x: 10, y: 50}, {x: 20, y: 30}]);

Examples and Docs

See http://CSNW.github.io/d3.compose/ for live examples and docs.

Development

  1. Install modules npm install
  2. Test with npm test or npm run test:watch
  3. Build with npm run build

Note on testing: Requires Node 4+ (for latest jsdom) and d3.chart doesn't currently support running from within node and requires the following line be added inside the IIFE in node_modules/d3.chart.js: window = this; (before use strict). This will be resolved by a pending PR to fix this issue with d3.chart (also, the dependency on d3.chart is likely to be removed in a later version of d3.compose).

Release

(With all changes merged to master and on master branch)

  1. npm version {patch|minor|major|version}
  2. npm publish

Docs

  1. On master, run npm run docs
  2. Switch to gh-pages branch
  3. Navigate to _tasks directory (cd _tasks)
  4. (npm install _tasks, if necessary)
  5. Run docs task npm run docs
  6. Navigate back to root
  7. View site with bundle exec jekyll serve

Note: For faster iteration, create a separate clone, switch to gh-pages branch, set docs_path environment variable to original clone (e.g. Windows: SET docs_path=C:\...\d3.compose\_docs\), and then run steps 3-6.