score:3
Accepted answer
here's a quick implementation which replicates your diagram. it essentially builds concentric donut charts based on weight and then colors the slices based on points:
<!doctype html>
<meta charset="utf-8">
<style>
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var testdata = {
maxpoints: 10,
color: '#bababa',
border: {
width: 1,
color: '#ffffff'
},
items: [{
name: 'looks',
color: '#2976dd',
weight: 0.37,
points: 8
}, {
name: 'charm',
color: '#87bd24',
weight: 0.03,
points: 5
}, {
name: 'honesty',
color: '#406900',
weight: 0.16,
points: 7
}, {
name: 'humour',
color: '#ffb200',
weight: 0.31,
points: 9
}, {
name: 'intelligence',
color: '#f78200',
weight: 0.12,
points: 0
}]
};
var width = 500,
height = 500;
color = d3.scale.category20();
// inner radius
var ir = 75,
// radius of each concentric arc
r = ((math.min(width, height) / 2) - ir) / testdata.maxpoints;
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.weight;
})
.padangle(.01);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var g = svg.selectall(".arc")
.data(pie(testdata.items))
.enter().append("g")
.attr("class", "arc");
// iterate our number of rings
d3.range(testdata.maxpoints)
.foreach(function(i){
// generate an arc
var arc = d3.svg.arc()
.outerradius(r * (i + 1) + ir)
.innerradius(r * i + ir);
// fill it, if appropriate
g.append("path")
.attr("d", arc)
.style("fill", function(d) {
if (i < d.data.points)
return color(d.data.name);
else
return "#eee"
});
});
</script>
Source: stackoverflow.com
Related Query
- d3js - Creating Asterplot-like Charts (example included)
- Convert flat JSON file to hierarchical json data like flare.json [d3 example file]
- D3js - Creating and easily updating a multi-line chart
- Is it possible to have zooming option in NVD3 charts as like in Highcharts?
- Data for sunburst charts with d3.hierarchy using D3js v4
- Is there a working implemenation to fit multiple d3 charts like line, bar, etc on one page?
- Make two pie charts with the same d3js code
- d3js v4: How can I apply force to nodes onclick and make it look like a tween?
- How to add an if condition in my d3js example
- D3 Reusable Chart Function Creating Multiple Charts
- TypeError: svg.append(...).attrs is not a function when creating charts using D3.js
- Creating a basic bar chart in d3js
- Using External json file for creating bubble chart using d3js
- Creating multi-scale, nested, ordinal bar charts with D3
- d3js - adding a speech-bubble like tooltip?
- Why does the NVD3.js line plus bar chart example render two charts instead of one?
- understanding dc.js charts interactivity better with fiddle example
- Doubts when creating a dashboard with D3.js charts
- d3js Text Transitioin - example code not working
- Charts D3js + Extjs panel
- D3JS nested insert. Example with SVG: text into group
- Include custom library like D3js in ESlint configuration?
- Is it possible to get D3js charts into xml?
- For loop creating concentric donut charts
- Issue creating overlapping multiple pie charts (circular progress bars)
- D3js - How to integrate mini libraries like d3-scale in Angular CLI?
- Link lines across small multiple charts d3js
- Create Multiple charts on dropdown with user inputs in d3js
- Creating stacked charts in dc js with panel dataset
- javascript: extensive use of 'this' in reusable d3js charts
More Query from same tag
- sync d3.js map and leaflet map
- How to import an excel file into a Webapp (javascript/d3/html)
- d3 second graph kills first one's force layout
- Data is not matching y-axis domain
- How do you set a default focus() on an element
- D3JS data load and update
- Get Extent of Complicated Data Structure in D3
- How to get projected path definition strings (not SVG elements) from a GeoJSON dataset with D3?
- Strange Axis Behavior
- How do I start d3.js tree in a collapsed position?
- d3.js tree - How to set Y depth of a specific level?
- how to nest selections in d3?
- Change the layout of a tree in D3JS
- dot (symbol) color on d3.js multiline chart
- Why is this tree layout giving me an infinite loop?
- D3js d.x is undefined
- D3 Force Layout - Text Wrapping and Node Overlaps
- Javascript not waiting for return value
- How to visualize the graph using d3Network in R
- D3 Zoom & Pan - How to enable zooming & panning anywhere on the chart and restrict showing circle within the range while panning & zooming
- D3.js: How to Deal with Null Values in Choropleth Map (Tooltip)
- How/Where do I get geoJSON data for states, provinces, and administrative regions of non-US countries?
- D3 General update pattern transition not working on pie chart
- d3.js Linechart in angular2 taking data from url(server) not Local data
- D3 iterating over selected JSON columns
- Assignement with parantheses in closure in d3 source code
- Javascript and D3 error: Cannot read property 'cloud' of undefined
- How to size the chart to always fill the space
- Converting from v3 to v5 in d3 doesn't update the visualization but adds another one
- Plot as many circles as histogram values under the histogram line