{"id":13481134,"url":"https://github.com/jamesleesaunders/d3-ez","last_synced_at":"2025-03-16T14:30:55.062Z","repository":{"id":34761102,"uuid":"38742558","full_name":"jamesleesaunders/d3-ez","owner":"jamesleesaunders","description":"D3-EZ Easy Reusable Charts","archived":false,"fork":false,"pushed_at":"2023-11-28T14:05:57.000Z","size":8727,"stargazers_count":49,"open_issues_count":18,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2023-12-06T03:01:14.673Z","etag":null,"topics":["chart","d3","data","dataviz","graph","svg","visualization"],"latest_commit_sha":null,"homepage":"http://jamesleesaunders.github.io/d3-ez/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamesleesaunders.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-07-08T08:44:55.000Z","updated_at":"2024-05-02T16:00:49.049Z","dependencies_parsed_at":"2023-12-20T15:31:42.815Z","dependency_job_id":"64dc2d8c-77fd-4983-8ded-58a81d87d076","html_url":"https://github.com/jamesleesaunders/d3-ez","commit_stats":{"total_commits":614,"total_committers":9,"mean_commits":68.22222222222223,"dds":0.1596091205211726,"last_synced_commit":"719a2ab4144a585cb3de3feb3f0f0b7457012d4d"},"previous_names":[],"tags_count":68,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-ez","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-ez/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-ez/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesleesaunders%2Fd3-ez/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesleesaunders","download_url":"https://codeload.github.com/jamesleesaunders/d3-ez/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243882281,"owners_count":20363114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","d3","data","dataviz","graph","svg","visualization"],"created_at":"2024-07-31T17:00:49.005Z","updated_at":"2025-03-16T14:30:54.561Z","avatar_url":"https://github.com/jamesleesaunders.png","language":"JavaScript","funding_links":[],"categories":["Charts"],"sub_categories":[],"readme":"# d3-ez\n\n## D3 Easy Reusable Charts Library\n\n[![npm version](https://badge.fury.io/js/d3-ez.svg)](https://badge.fury.io/js/d3-ez)\n[![Known Vulnerabilities](https://snyk.io/test/github/jamesleesaunders/d3-ez/badge.svg?targetFile=package.json)](https://snyk.io/test/github/jamesleesaunders/d3-ez?targetFile=package.json)\n\n**d3-ez** is a library of reusable charts which use [D3.js](http://www.d3js.org/). Inspired by Mike Bostock's\ntutorial [Towards Reusable Charts](http://bost.ocks.org/mike/chart/), the aim of the library is to harness the power of\nD3, whilst simplifying the process of creating charts and graph making with D3. **d3-ez** makes it easier for people who\nare still learning JavaScript or D3 to quickly produce data visualisations with minimal code.\n\n* [Examples](#examples)\n* [Getting Started](#getting-started)\n* [API Reference](https://jamesleesaunders.github.io/d3-ez/)\n* [Charts Types](#chart-types)\n* [Data Structures](#data-structures)\n* [Download from GitHub](https://github.com/jamesleesaunders/d3-ez)\n* [Download from NPM](https://www.npmjs.com/package/d3-ez)\n\n### Examples\n\nHere are a few Observable examples demonstrating some of the d3-ez charts. One of the aims of d3-ez to make it\neasier to create visualizations with graphs which are clickable interact with each other, this is done though the use of\nD3's dispatch, please see the 'Showcase' link below for example:\n\n* [Bar Chart (Vertical)](https://observablehq.com/@jamesleesaunders/d3-ez)\n* [Heat Map (Tabular)](https://observablehq.com/@jamesleesaunders/bishop-currys-royal-wedding-speech-analysis-with-d3-ez)\n* [Line Chart](https://observablehq.com/@jamesleesaunders/npm-downloads-counts-with-d3-ez)\n* [Rose Chart](https://observablehq.com/@jamesleesaunders/nightingales-rose-chart-with-d3-ez)\n* [Legend Component](https://observablehq.com/@jamesleesaunders/what-a-legend-with-d3-ez)\n* [Bubble Chart](https://observablehq.com/@jamesleesaunders/hans-rosling-poverty-bubble-chart-with-d3-ez)\n\n### Getting Started\n\nInclude d3.js and d3-ez.js and css files in the `\u003chead\u003e` section of your page:\n\n```html\n\n\u003chead\u003e\n\t \u003cscript src=\"https://d3js.org/d3.v7.min.js\"\u003e\u003c/script\u003e\n\t \u003cscript src=\"https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.min.js\"\u003e\u003c/script\u003e\n\t \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.css\"/\u003e\n\u003c/head\u003e\n```\n\nAdd a chartholder `\u003cdiv\u003e` and `\u003cscript\u003e` tags to your page `\u003cbody\u003e`:\n\n```html\n\n\u003cbody\u003e\n\t \u003cdiv id=\"chartholder\"\u003e\u003c/div\u003e\n\t \u003cscript\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\nPlace the following code between the `\u003cscript\u003e\u003c/script\u003e` tags:\n\nSelect chartholder:\n\n```javascript\nvar chartHolder = d3.select(\"#chartholder\");\n```\n\nGenerate some [data](#data-structure):\n\n```javascript\nvar myData = [\n\t{\n\t\t\"key\": \"Fruit\",\n\t\t\"values\": [\n\t\t\t{ key: \"Apples\", value: 9 },\n\t\t\t{ key: \"Oranges\", value: 3 },\n\t\t\t{ key: \"Pears\", value: 5 },\n\t\t\t{ key: \"Bananas\", value: 7 }\n\t\t]\n\t}\n];\n```\n\nCreate chart component:\n\n```javascript\nvar myChart = d3.ez.chart.barChartVertical()\n\t.width(750)\n\t.height(400)\n\t.colors([\"#00C41d\", \"#FFA500\", \"#800080\", \"#FFE714\"]);\n```\n\nAttach chart and data to the chartholder:\n\n```javascript\nchartHolder\n\t.datum(myData)\n\t.call(myChart);\n```\n\nThat's all there is to it! View the page in your browser, and you should see a basic bar chart.\n\n#### Install from NPM\n\nIf your project is using ES6 modules you can also import d3-ez, for\nexample [from NPM](https://www.npmjs.com/package/d3-ez):\n\n```bash\nnpm install --save d3-ez\n```\n\nThen in your project:\n\n```javascript\nlet d3Ez = require(\"d3-ez\");\n```\n\n#### Chart Types\n\nThe following charts are currently supported:\n\n- barChartCircular()\n- barChartHorizontal()\n- barChartVertical()\n- bubbleChart()\n- candlestickChart()\n- donutChart()\n- heatMap()\n- heatMapRadial()\n- lineChart()\n- polarAreaChart()\n- punchCard()\n- radarChart()\n- roseChart()\n\nFor more information see the [API Reference](https://jamesleesaunders.github.io/d3-ez/).\n\n### Data Structures\n\nAt its most basic description, the format of the d3-ez data is a series of key / value pairs. Depending on whether the\nchart is a single series or multi series chart the data structure differs slightly.\n\nThe data structure is an object with the following structure:\n\n* `key` {string} - The series name\n* `values` {array} - An array of objects containing:\n\t\t* `key` {string} - The value name\n\t\t* `value` {number} - The value\n\t\t* `x` {number} - X axis value\\*\n\t\t* `y` {number} - Y axis value\\*\n\n_\\*optional, `x` \u0026 `y` values are used for cartesian coordinate type graphs such as the bubble chart._\n\n```javascript\nvar myData = [\n\t{\n\t\tkey: \"UK\",\n\t\tvalues: [\n\t\t\t{ key: \"Apples\", value: 2 },\n\t\t\t/* ... */\n\t\t\t{ key: \"Bananas\", value: 3 }\n\t\t]\n\t},\n\t/* ... */\n\t{\n\t\tkey: \"France\",\n\t\tvalues: [\n\t\t\t{ key: \"Apples\", value: 5 },\n\t\t\t/* ... */\n\t\t\t{ key: \"Bananas\", value: 9 }\n\t\t]\n\t}\n];\n```\n\n### What type of chart should I use?\n\nWhat type of chart is best for different types of data?\n\n- Bar charts are good for quantitative data.\n- Pie charts for good to represent parts of a whole.\n- Histograms are good for showing distribution.\n- Line charts are good for showing time series data.\n- Circular heatmap is good for cyclic data (rolling hours, days, years).\n- Radar charts are used to compare two or more items or group features or characteristics.\n\nFor more information on which charts are good for different types of data see\nthe [Data Viz Project](http://datavizproject.com/) or [Data Viz Catalogue](https://datavizcatalogue.com/index.html)\n\n### Alternatives\n\nFor reference, here are a few other alternative D3 chart libraries which also follow the D3 reusable components pattern:\n\n- [Britecharts](https://britecharts.github.io/britecharts/)\n- [NVD3](http://nvd3.org)\n- [C3](http://c3js.org)\n- [D3 Plus](http://d3plus.org)\n- [ReD3](https://github.com/bugzin/reD3)\n- [Miso d3.chart](https://github.com/misoproject/d3.chart)\n- [d3fc](https://d3fc.io)\n\n### Credits\n\n* Peter Cook \u003chttp://animateddata.co.uk/\u003e For giving permission to use his Radial Bar and Radial Heat Map charts.\n* Virgin Media \u003chttp://www.virginmedia.co.uk/\u003e For support in development of the Tabular Heat Map.\n* Data Viz Project \u003chttp://datavizproject.com/\u003e For helping me while deciding on naming of chart types.\n* Dip Parmar \u003chttps://github.com/DipParmar\u003e For contributing to zooming, radar and horizontal bar charts.\n* You may also be interested in the sister project [d3-x3d](https://github.com/jamesleesaunders/d3-x3d) D3 X3D\n\tData Visualisation Library.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesleesaunders%2Fd3-ez","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesleesaunders%2Fd3-ez","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesleesaunders%2Fd3-ez/lists"}