Skip to content

Commit

Permalink
Merge pull request #68 from jamesleesaunders/namespace
Browse files Browse the repository at this point in the history
Re-arranged Namespace
  • Loading branch information
jamesleesaunders authored Sep 23, 2017
2 parents ce5fbc4 + 7489e66 commit 9362cea
Show file tree
Hide file tree
Showing 54 changed files with 1,269 additions and 1,245 deletions.
2 changes: 2 additions & 0 deletions .npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
build/*.zip
test/
5 changes: 3 additions & 2 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
language: node_js
node_js:
- "stable"

script: make
script:
- npm test
- make
10 changes: 5 additions & 5 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
## D3 Easy Reusable Graphs, Charts and Components
# d3-ez
## Contributing Guidelines

**D3.EZ** is a library of reusable graphs and charts which use [D3](http://www.d3js.org/).

The d3.ez.js and d3.ez.min.js files are built from source files in the src directory.
Do not edit d3.ez.js directly. Instead, edit the source files, and then run make to build the generated files.
**d3-ez** is a library of reusable graphs and charts which use [D3](http://www.d3js.org/).

The d3-ez.js and d3-ez.min.js files are built from source files in the src directory.
Do not edit d3-ez.js directly. Instead, edit the source files, and then run 'make' to generate the build files.
74 changes: 38 additions & 36 deletions Makefile
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
# D3.EZ Makefile

JS_FILES := src/js/header.js \
src/js/base.js \
src/js/discreteBarChart.js \
src/js/groupedBarChart.js \
src/js/radialBarChart.js \
src/js/circularHeatChart.js \
src/js/tabularHeatChart.js \
src/js/donutChart.js \
src/js/punchCard.js \
src/js/multiSeriesLineChart.js \
src/js/htmlTable.js \
src/js/htmlList.js \
src/js/reusableComponents.js

CSS_FILES := src/css/global.css \
src/css/groupedBarChart.css \
src/css/radialBarChart.css \
src/css/circularHeatChart.css \
src/css/tabularHeatChart.css \
src/css/donutChart.css \
src/css/punchCard.css \
src/css/multiSeriesLineChart.css \
src/css/htmlList.css \
src/css/htmlTable.css

GENERATED_FILES := d3.ez.js \
d3.ez.min.js \
d3.ez.css \
JS_FILES := src/header.js \
src/chart.js \
src/component.js \
src/colors.js \
src/chart/discreteBar.js \
src/chart/groupedBar.js \
src/chart/radialBar.js \
src/chart/circularHeat.js \
src/chart/tabularHeat.js \
src/chart/donut.js \
src/chart/punchCard.js \
src/chart/multiSeriesLine.js \
src/html/table.js \
src/html/list.js


CSS_FILES := css/global.css \
css/chart/groupedBar.css \
css/chart/radialBar.css \
css/chart/circularHeat.css \
css/chart/tabularHeat.css \
css/chart/donut.css \
css/chart/punchCard.css \
css/chart/multiSeriesLine.css \
css/html/list.css \
css/html/table.css

GENERATED_FILES := build/d3-ez.js \
build/d3-ez.min.js \
build/d3-ez.css \
README.md \
LICENSE.md

Expand All @@ -36,20 +38,20 @@ all: js css min zip

js: $(JS_FILES)
@echo Concatinating JS Files...
@rm -f d3.ez.js
@uglifyjs $^ --beautify indent_level=4 --comments all > d3.ez.js
@rm -f build/d3-ez.js
@uglifyjs $^ --beautify indent_level=4 --comments all > build/d3-ez.js

css: $(CSS_FILES)
@echo Concatinating CSS Files...
@rm -f d3.ez.css
@for file in $^; do cat "$$file"; echo "\n"; done > d3.ez.css
@rm -f build/d3-ez.css
@for file in $^; do cat "$$file"; echo "\n"; done > build/d3-ez.css

min:
@echo Minifying...
@rm -f d3.ez.min.js
@uglifyjs d3.ez.js > d3.ez.min.js
@rm -f build/d3-ez.min.js
@uglifyjs build/d3-ez.js > build/d3-ez.min.js

zip: $(GENERATED_FILES)
@echo Zipping...
@rm -f d3.ez.zip
@zip -q d3.ez.zip $^
@rm -f build/d3-ez.zip
@zip -q build/d3-ez.zip $^
12 changes: 8 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
## D3 Easy Reusable Graphs, Charts and Components
# d3-ez
## D3 Easy Reusable Charts

**D3.EZ** is a library of reusable graphs and charts which use [D3](http://www.d3js.org/). Inspired by Mike Bostock's tutorial [Towards Reusable Charts](http://bost.ocks.org/mike/chart/), the aim of the library is to harness the power of D3, whilst simplifying the process of creating graphs and charts making D3. **D3.EZ** makes it easier for people who are still learning JavaScript or D3 to quickly produce data visualizations with minimal code.
**d3-ez** is a library of reusable charts which use [D3](http://www.d3js.org/). Inspired by Mike Bostock's tutorial [Towards Reusable Charts](http://bost.ocks.org/mike/chart/), the aim of the library is to harness the power of D3, whilst simplifying the process of creating charts and graph making with D3. **d3-ez** makes it easier for people who are still learning JavaScript or D3 to quickly produce data visualizations with minimal code.

Compatible with D3 v4.

Gist (bl.ocks) Examples:
* [Discrete Bar Chart](http://bl.ocks.org/jamesleesaunders/8ba1fb5657d6bc7286be)
Expand All @@ -13,9 +16,9 @@ Gist (bl.ocks) Examples:
* [Punchcard](http://bl.ocks.org/jamesleesaunders/0215cd9bc81e32fb0c9f)
* [HTML Table](http://bl.ocks.org/jamesleesaunders/cc4439445d228fc06358)
* [HTML Expanding List](http://bl.ocks.org/jamesleesaunders/9f73d0878f3ab9d8c958)
* [D3.EZ Showcase](http://bl.ocks.org/jamesleesaunders/1b42123c808ecea748be)
* [Showcase](http://bl.ocks.org/jamesleesaunders/1b42123c808ecea748be)

**D3.EZ** also aims to make it easier to create interactive visualizations and dashboards with graphs which are clickable and linkable, see the D3.EZ showcase above for examples.
**d3-ez** also aims to make it easier to create interactive visualizations and dashboards with graphs which are clickable and linkable, see the Showcase above for examples.

What type of chart is best for different types of data?
* Bar Charts are good for quantitive data.
Expand All @@ -32,3 +35,4 @@ For reference here are a few other alternative D3 chart libraries which also fol

Credits:
* Peter Cook http://animateddata.co.uk/ For giving permission to use his Radial Bar and Radial Heat Map charts.
* Virgin Media http://www.virginmedia.co.uk/ For support in development of the Tabular Heat Map.
59 changes: 32 additions & 27 deletions d3.ez.css → build/d3-ez.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
/*
- D3.EZ
- Author: James Saunders
- Copyright: Copyright (C) 2017 James Saunders
- License: GPL-3.0
*/
/**
* d3-ez
*
* @author James Saunders [[email protected]]
* @copyright Copyright (C) 2017 James Saunders
* @license GPLv3
*/

/* === Global Styles === */
.d3ez {
Expand Down Expand Up @@ -41,100 +42,104 @@


/* === Bar Chart (Discrete & Grouped) Styles === */
.discreteBarChart rect.bar, .groupedBarChart rect.bar {
.chartDiscreteBar rect.bar, .chartGroupedBar rect.bar {
stroke: #333333;
stroke-width: 1px;
}
.discreteBarChart rect.bar:hover {
.chartDiscreteBar rect.bar:hover {
opacity: 0.7;
}
.groupedBarChart g.barGroup:hover {
.chartDiscreteBar g.barGroup:hover {
opacity: 0.7;
}


/* === Radial Bar Chart Styles === */
.radialBarChart path {
.chartRadialBar path {
fill: none;
}
.radialBarChart path.segment {
.chartRadialBar path.segment {
fill: steelblue;
stroke-width: 1px;
stroke: #333333;
}
.radialBarChart path.segment:hover {
.chartRadialBar path.segment:hover {
opacity: 0.7;
}
.radialBarChart circle.outerCircle {
.chartRadialBar circle.outerCircle {
stroke: #aaa;
stroke-dasharray: 4, 4;
}
.radialBarChart .tickCircles circle {
.chartRadialBar .tickCircles circle {
stroke: #ddd;
stroke-dasharray: 2, 2;
}
.radialBarChart .spokes line {
.chartRadialBar .spokes line {
stroke: #666;
stroke-width: 0.2;
}
.radialBarChart .labels text {
.chartRadialBar .labels text {
fill: #333;
font-size: 10px;
font-weight: bold;
}


/* === Circular Heat Chart Styles === */
.circularHeatChart path.segment {
.chartCircularHeat path.segment {
stroke: #B6B6B6;
stroke-width: 0.5px;
}
.circularHeatChart .labels {
.chartCircularHeat .labels {
fill: #000000;
letter-spacing: -1px;
}
.circularHeatChart .segmentLabels text {
.chartCircularHeat .segmentLabels text {
font-size: 1.0em;
}
.circularHeatChart .radialLabels text {
.chartCircularHeat .radialLabels text {
font-size: 1.1em;
font-weight: bold;
}


/* === Tabular Heat Chart Styles === */
.tabularHeatChart rect.card {
.chartTabularHeat rect.card {
stroke: #b6b6b6;
stroke-width: 0.5px;
}
.tabularHeatChart rect.card:hover {
.chartTabularHeat rect.card:hover {
opacity: 0.7;
stroke: #b6b6b6;
cursor: pointer;
}


/* === Donut Chart Styles === */
.donutChart polyline.line {
.chartDonut polyline.line {
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
.donutChart path.slice {
.chartDonut path.slice {
stroke: #333333;
stroke-width: 1px;
}
.donutChart path.slice:hover {
.chartDonut path.slice:hover {
opacity: 0.7;
}


/* === Punch Card Styles === */
.punchCard text.punchValue {
.chartPunchCard text.punchValue {
font-size: 20px;
font-weight: bold;
}
.chartPunchCard text.label {
font-size: 12px;
font-weight: bold;
}


/* === Multi Series Line Chart Styles === */
Expand All @@ -146,7 +151,7 @@
transform: scale(1.5);
}
}
.multiSeriesLineChart circle:hover {
.chartMultiSeriesLine circle:hover {
animation-duration: 0.2s;
animation-name: circleTransition;
transform-origin: center center;
Expand Down
Loading

0 comments on commit 9362cea

Please sign in to comment.