Related
I'm not sure I understand how to use D3's interpolateSpectral to get my color scheme. When I attempt the following my colors work, the problem is I don't know how many potential colors I could need so I wanted to use interpolateSpectral to get as many as my dataset asks for.
When I do this
const color = d3.scaleOrdinal(d3.schemeCategory10);
g.selectAll('.chart-arc')
.data(pie(data))
.enter()
.append('path')
.attr('class', 'chart-arc')
.attr('d', arc)
.style('fill', d => console.log(color(d.data.label)))
.on('mouseover', this.mouseover.bind(this))
.on('mousemove', this.mousemove.bind(this))
.on('mouseout', this.mouseout.bind(this))
;
Those colors work as I can see them logged to my console.
When I do this...
const color = d3.scaleSequential(d3.interpolateSpectral);
g.selectAll('.chart-arc')
.data(pie(data))
.enter()
.append('path')
.attr('class', 'chart-arc')
.attr('d', arc)
.style('fill', d => console.log(color(d.data.label)))
.on('mouseover', this.mouseover.bind(this))
.on('mousemove', this.mousemove.bind(this))
.on('mouseout', this.mouseout.bind(this))
;
The the console logs all instances of color as undefined.
UPDATE
This is the full code for the vue.js/d3js page.
<template>
<div>
<div v-if="!loading" id="chart"></div>
<div v-if="loading">Loading...</div>
</div>
</template>
<script>
import * as d3 from 'd3';
import axios from "axios";
export default {
name: "piechart2",
data(){
this.loadData()
.then((theData) => (
this.data = theData,
this.createChart
))
.finally(() => (
this.loading = false,
this.loadChart()
));
return{
data: "",
element: 'body',
width: 600,
height: 400,
loading: true
}
},
methods: {
loadData: function(){
return axios.get('http://localhost:8080/mockdata/piemock.json')
.then(result => { return result; })
.catch(error => { console.error(error); throw error; });
},
loadChart: function () {
let newData = this.data.data.map(
obj => {
return {
value: obj.count,
label : obj.label
}
}
);
let newJson = {data: newData, width: this.width, height: this.height, element: this.element}
var {data, width, height, element} = newJson;
const svg = d3.select(element)
.append('svg')
.attr('class', 'chart-svg')
.attr('width', width)
.attr('height', height)
;
this.tooltip = d3.select(element)
.append('div')
.attr('class', 'tooltip')
.style('display', 'none')
;
// const color = d3.scaleOrdinal(d3.schemeCategory10)
// ;
// console.log(color(1))
console.log(data.length)
const color = d3.scaleSequential(d3.interpolateSpectral).domain([0, data.length]);//d3.scaleSequential(d3.interpolateSpectral);
// console.log(color2(1))
const r = Math.min(width, height) / 3;
const arc = d3.arc()
.innerRadius(0)
.outerRadius(r)
;
const pie = d3.pie()
.value(d => d.value)
;
const g = svg.append('g')
.attr('transform', `translate(${width / 2},${height / 2})`)
;
g.selectAll('.chart-arc')
.data(pie(data))
.enter()
.append('path')
.attr('class', 'chart-arc')
.attr('d', arc)
.style('fill', d => console.log(color(d.data.label)))
.on('mouseover', this.mouseover.bind(this))
.on('mousemove', this.mousemove.bind(this))
.on('mouseout', this.mouseout.bind(this))
;
const l = svg.append('g')
.attr('transform', `translate(0,${height - 20})`);
const xl = d3.scaleBand()
.range([0, width])
.padding(0.3)
.domain(data.map(d => d.label))
;
const legend = l.selectAll('.chart-legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'chart-legend')
.attr('transform', (d) => `translate(${xl(d)},0)`)
;
legend.append('rect')
.attr('width', 12)
.attr('height', 12)
.style('fill', color)
;
legend.append('text')
.attr('x', 20)
.attr('y', 10)
.text(d => d)
;
},
mouseover() {
this.tooltip
.style('display', 'inline-block')
.style('position', 'absolute')
;
},
mousemove() {
this.tooltip
.text([d3.event.pageX, d3.event.pageY].join(','))
.style('left', d3.event.pageX + 10 + "px")
.style('top', d3.event.pageY + 10 + "px")
;
},
mouseout() {
this.tooltip
.style('display', 'none')
;
},
render() {
// move rendering logic down here
}
}
}
</script>
<style>
.tooltip {
background-color: rgba(0,0,0,0.75);
padding: 15px;
border-radius: 2px;
font-family: sans-serif;
color: white;
pointer-events: none;
box-shadow: 0 0 5px #999999;
}
.chart-svg {
border: 1px solid #ddd;
}
.chart-legend {
font-family: 'Open Sans', sans-serif;
}
</style>
Here is the JSON
[{"label": "Assamese", "count": 13},
{"label": "Bengali", "count": 83},
{"label": "Bodo", "count": 1.4},
{"label": "Dogri", "count": 2.3},
{"label": "Gujarati", "count": 46},
{"label": "Hindi", "count": 300},
{"label": "Kannada", "count": 38},
{"label": "Kashmiri", "count": 5.5},
{"label": "Konkani", "count": 5},
{"label": "Maithili", "count": 20},
{"label": "Malayalam", "count": 33},
{"label": "Manipuri", "count": 1.5},
{"label": "Marathi", "count": 73},
{"label": "Nepali", "count": 2.9},
{"label": "Oriya", "count": 33},
{"label": "Punjabi", "count": 29},
{"label": "Sanskrit", "count": 0.01},
{"label": "Santhali", "count": 6.5},
{"label": "Sindhi", "count": 2.5},
{"label": "Tamil", "count": 61},
{"label": "Telugu", "count": 74},
{"label": "Urdu", "count": 52}]
Sequential scales do take exactly two numeric values as input domain (source).
This means that the input should be a number, and output a color.
It seems that in the question, an attempt is made to use text labels as input, this is causing the problem.
It is not recommended to use a sequential color scale to map unrelated value: The color scale denotes "proximity" between values, and will be used on labels which are not necessarily connected / similar.
In case the 12 colors categorical scale schemeSet3 from d3-scale-chromatic is not enough, a scale can be generated with a tool like iWantHue, optimizing the chances of having differentiable colors.
If it is decided to stay with the approach of slicing colors from d3.interpolateSpectral, then this notebook can be used as a reference. It illustrates how d3-scale-chromatic schemes can be used to map discrete values (switch the selection menu to Discrete(n) rather than Continuous to see the code in action).
The approach would be to map each label to a slice of the color scheme:
// assumption: an array called `labels` has been created, containing the unique label values
let n = labels.length
, colorbyValue = {}
for (let i = 0; i < n; ++i) {
colorbyValue[labels[i]] = d3.rgb(d3.interpolateSpectral(i / (n - 1))).hex();
}
// then use with colorByValue[d.data.label]
You are missing a domain, try the following:
const color = d3.scaleSequential(d3.interpolateSpectral).domain([0, data.length]);
I'm trying to show a vertical bar chart with x and y axes. I get the bar chart with y axis, however I'm struggling with the x-axis.
The x-axis text labels are equally distributed with the width of the bars, however: there are markers/vertical lines on the x-axis with varying width, particularly the first and last sections, even though I've specified the scaleBand and the domain.
My code:
<script src="https://d3js.org/d3.v5.min.js"></script>
<svg class="v5chart" width="960" height="500"></svg>
<style>
/*Rectangle bar class styling*/
.bar {
fill: #0080FF
}
.bar:hover {
fill: #003366
}
/*Text class styling*/
.text {
fill: white;
font-family: sans-serif
}
</style>
<script>
////VERTICAL BAR CHART WITH SVG AND NAMES
// Create data array of values to visualize
var dataArray = [{ "Player": "John Doe", "Points": 23 }, { "Player": "Jane Doe", "Points": 13 }, { "Player": "Mary Jane", "Points": 21 }, { "Player": "Debasis Das", "Points": 14 }, { "Player": "Nishant", "Points": 37 }, { "Player": "Mark", "Points": 15 }, { "Player": "Andrew", "Points": 18 }, { "Player": "Simon", "Points": 34 }, { "Player": "Lisa", "Points": 30 }, { "Player": "Marga", "Points": 20 }];
// Create variable for the SVG
var canvas = d3.select(".v5chart1").append("g").attr("transform", "translate(20,30)");
var canvasWidth = 500;
var maxValue = d3.max(dataArray, function (d) { return d.Points; });
var canvasHeight = maxValue*10;
var heightScale = d3.scaleLinear()
.domain([0, d3.max(dataArray, function (d) { return d.Points; })])
.range([canvasHeight, 0]); //use max value (37) * 10
var y_axis = d3.axisLeft()
.scale(heightScale);
var x = d3.scaleBand()
.rangeRound([0, canvasWidth], .1);
x.domain(dataArray.map(function (d) { return d.Player; }));
var x_Axis = d3.axisBottom(x);
// Select, append to SVG, and add attributes to rectangles for bar chart
canvas.selectAll("rect")
.data(dataArray)
.enter().append("rect")
.attr("class", "bar")
.attr("height", function (d, i) { return (d.Points * 10) })
.attr("width", canvasWidth/dataArray.length)
.attr("x", function (d, i) { return (i * (canvasWidth / dataArray.length)) })
.attr("y", function (d, i) { return canvasHeight - (d.Points * 10) });
// Select, append to SVG, and add attributes to text
canvas.selectAll("text")
.data(dataArray)
.enter().append("text")
.text(function (d) { return d.Points })
.attr("class", "text")
.attr("x", function (d, i) { return (i * (canvasWidth / dataArray.length)) + (canvasWidth / dataArray.length)/2 })
.attr("y", function (d, i) { return canvasHeight + 20 - (d.Points * 10) });
canvas.append("g")
.attr("transform", "translate(0,0)")
.call(y_axis);
canvas.append("g")
.attr("transform", "translate(0," + canvasHeight + ")")
.call(x_Axis)
.selectAll("text")
.attr("x",40)
.attr("transform", function (d) {
return "rotate(65)"
});
</script>
I already checked here: https://www.d3-graph-gallery.com/graph/custom_axis.html
You should have read properly the scaleBand example on the link that you provided:
scaleBand provides a convenient bandwidth() method to provide you with the width for each bar
the idea od axis in d3js is that you don't need to do calculations yourself, so in your case you can just pass the player name to the x function and it will do the coordinate calculations for you.
same applies to the y calculations, but I leave this for you to figure out, it should not be hard at all.
one more small thing about scaleBand, you were using rangeRound() method, which I am not familiar with, but if you use range() method combined with padding() as it is in the example you linked, then by adjusting the padding value you can control the width of the bar, without affecting the x axis. The higher value, the thinner will be the bar and more space would be between the bars.
////VERTICAL BAR CHART WITH SVG AND NAMES
// Create data array of values to visualize
var dataArray = [{ "Player": "John Doe", "Points": 23 }, { "Player": "Jane Doe", "Points": 13 }, { "Player": "Mary Jane", "Points": 21 }, { "Player": "Debasis Das", "Points": 14 }, { "Player": "Nishant", "Points": 37 }, { "Player": "Mark", "Points": 15 }, { "Player": "Andrew", "Points": 18 }, { "Player": "Simon", "Points": 34 }, { "Player": "Lisa", "Points": 30 }, { "Player": "Marga", "Points": 20 }];
// Create variable for the SVG
var canvas = d3.select(".v5chart").append("g").attr("transform", "translate(20,30)");
var canvasWidth = 500;
var maxValue = d3.max(dataArray, function (d) { return d.Points; });
var heightScale = d3.scaleLinear()
.domain([0, d3.max(dataArray, function (d) { return d.Points; })])
.range([maxValue * 10, 0]); //use max value (37) * 10
var y_axis = d3.axisLeft()
.scale(heightScale);
var x = d3.scaleBand()
.range([0, canvasWidth]).padding([0.1]);
x.domain(dataArray.map(function (d) { return d.Player; }));
var x_Axis = d3.axisBottom(x);
// Select, append to SVG, and add attributes to rectangles for bar chart
canvas.selectAll("rect")
.data(dataArray)
.enter().append("rect")
.attr("class", "bar")
.attr("height", function (d, i) { return (d.Points * 10) })
.attr("width", x.bandwidth())
.attr("x", function (d, i) { return x(d.Player); })
.attr("y", function (d, i) { return 370 - (d.Points * 10) });
// Select, append to SVG, and add attributes to text
canvas.selectAll("text")
.data(dataArray)
.enter().append("text")
.text(function (d) { return d.Points })
.attr("class", "text")
.attr("text-anchor", "middle")
.attr("x", function (d, i) { return x(d.Player)+x.bandwidth()/2; })
.attr("y", function (d, i) { return 390 - (d.Points * 10) });
canvas.append("g")
.attr("transform", "translate(0,0)")
.call(y_axis);
canvas.append("g")
.attr("transform", "translate(0,370)")
.call(x_Axis);
.bar {
fill: #0080FF
}
.bar:hover {
fill: #003366
}
/*Text class styling*/
.text {
fill: white;
font-family: sans-serif
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg class="v5chart" width="960" height="500"></svg>
I am following Horizontal stack bar
for populating data . how can add the values of each bar graph at the end of each bar . for example
The above screen shot is for normal horizontal bar chart . but i am expecting for stacked bar graph .Let me know where i can modify code to have this value at the end of each stacked horizontal bar in the code given of above link
Thanks
Prasad
In order to generate the total counts for each bar, you will need to do two steps:
Transform the data so that you get an array of objects containing both the date and the total sum. Referencing to the d3 example you have linked, we will want to sum the integers in the keys of disease, wounds, and other.
We pass this transformed data to insert <text> elements into your SVG, and position them correctly using the pre-existing scales.
Step 1: Data transformation
You can store our transformed data in a variable called totals:
var totals = d3.nest()
.key(function(d) {
return d.date;
})
.rollup(function(d) {
return d3.sum(d, function(g) {
return g.disease + g.wounds + g.other;
});
})
.entries(data);
An explanation of the code above: we basically want to perform a summary based on date, and in this case we can use the d3.nest() function. The key will be the date, and we use d3.nest().rollup() to perform a sum of the values in disease, wounds, and other keys.
This will create an array of objects in the following format: totals = [{key: <date>, value: <total>}, {...}]. Note that the dates are now stored in the key and the totals in value.
Step 2: Create labels
We bind totals to a newly created object, and create new <text> elements from it:
var totalLabels = svg.append('g').attr('class', 'totals');
totalLabels.selectAll('.total')
.data(totals)
.enter().append('text')
.attr('class', 'total')
.attr("y", function(d) {
// Retrieve the correct vertical coordinates based on the date (stored as d.key)
// Plus some pixel offset so that the text is centered vertically relative to bar
return yScale(parseDate(d.key)) + yScale.bandwidth() - 2;
})
.attr("x", function(d) {
// Retrieve the horizontal coordinates based on total (stored as d.value)
// Add 5px offset so the label does not 'stick' to end of stacked bar
return xScale(d.value) + 5;
})
.text(function(d) {
// Inject total as text content (stored as d.value)
return d.value;
});
An explanation to the code above:
We create a <g> wrapper to store all your text labels
We create text labels by binding totals to it using .data(totals). We enter the data, and append <text> labels
For positioning, we simply reuse the xScale and yScale that is already defined. You simply pass the totals into xScale, i.e. xScale(d.value) and the dates into yScale, i.e. yScale(parseDate(d.key)).
Inject text into the element using d3.text(), with the totals as the text content, i.e. d.value.
Example
With the following code, we can create a modification of the d3.js example you have linked, where you can append totals to the end of the stacked barchart:
See proof-of-concept example below:
var initStackedBarChart = {
draw: function(config) {
me = this,
domEle = config.element,
stackKey = config.key,
data = config.data,
margin = {
top: 20,
right: 20,
bottom: 30,
left: 50
},
parseDate = d3.timeParse("%m/%Y"),
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
xScale = d3.scaleLinear().rangeRound([0, width]),
yScale = d3.scaleBand().rangeRound([height, 0]).padding(0.1),
color = d3.scaleOrdinal(d3.schemeCategory20),
xAxis = d3.axisBottom(xScale),
yAxis = d3.axisLeft(yScale).tickFormat(d3.timeFormat("%b")),
svg = d3.select("#" + domEle).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var stack = d3.stack()
.keys(stackKey)
.offset(d3.stackOffsetNone);
var layers = stack(data);
data.sort(function(a, b) {
return b.total - a.total;
});
yScale.domain(data.map(function(d) {
return parseDate(d.date);
}));
xScale.domain([0, d3.max(layers[layers.length - 1], function(d) {
return d[0] + d[1];
})]).nice();
var layer = svg.selectAll(".layer")
.data(layers)
.enter().append("g")
.attr("class", "layer")
.style("fill", function(d, i) {
return color(i);
});
layer.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
.attr("y", function(d) {
return yScale(parseDate(d.data.date));
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("height", yScale.bandwidth())
.attr("width", function(d) {
return xScale(d[1]) - xScale(d[0])
});
var totals = d3.nest()
.key(function(d) {
return d.date;
})
.rollup(function(d) {
return d3.sum(d, function(g) {
return g.disease + g.wounds + g.other;
});
})
.entries(data);
var totalLabels = svg.append('g').attr('class', 'totals');
totalLabels.selectAll('.total')
.data(totals)
.enter().append('text')
.attr('class', 'total')
.attr("y", function(d) {
// Retrieve the correct vertical coordinates based on the date (stored as d.key)
// Plus some pixel offset so that the text is centered vertically relative to bar
return yScale(parseDate(d.key)) + yScale.bandwidth() - 2;
})
.attr("x", function(d) {
// Retrieve the horizontal coordinates based on total (stored as d.value)
// Add pixel offset so labels don't stick to end of stacked bars
return xScale(d.value) + 5;
})
.text(function(d) {
// Inject total as text content (stored as d.value)
return d.value;
});
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + (height + 5) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.attr("transform", "translate(0,0)")
.call(yAxis);
}
}
var data = [{
"date": "4/1854",
"total": 8571,
"disease": 1,
"wounds": 0,
"other": 5
}, {
"date": "5/1854",
"total": 23333,
"disease": 12,
"wounds": 0,
"other": 9
}, {
"date": "6/1854",
"total": 28333,
"disease": 11,
"wounds": 0,
"other": 6
}, {
"date": "7/1854",
"total": 28772,
"disease": 359,
"wounds": 0,
"other": 23
}, {
"date": "8/1854",
"total": 30246,
"disease": 828,
"wounds": 1,
"other": 30
}, {
"date": "9/1854",
"total": 30290,
"disease": 788,
"wounds": 81,
"other": 70
}, {
"date": "10/1854",
"total": 30643,
"disease": 503,
"wounds": 132,
"other": 128
}, {
"date": "11/1854",
"total": 29736,
"disease": 844,
"wounds": 287,
"other": 106
}, {
"date": "12/1854",
"total": 32779,
"disease": 1725,
"wounds": 114,
"other": 131
}, {
"date": "1/1855",
"total": 32393,
"disease": 2761,
"wounds": 83,
"other": 324
}, {
"date": "2/1855",
"total": 30919,
"disease": 2120,
"wounds": 42,
"other": 361
}, {
"date": "3/1855",
"total": 30107,
"disease": 1205,
"wounds": 32,
"other": 172
}, {
"date": "4/1855",
"total": 32252,
"disease": 477,
"wounds": 48,
"other": 57
}, {
"date": "5/1855",
"total": 35473,
"disease": 508,
"wounds": 49,
"other": 37
}, {
"date": "6/1855",
"total": 38863,
"disease": 802,
"wounds": 209,
"other": 31
}, {
"date": "7/1855",
"total": 42647,
"disease": 382,
"wounds": 134,
"other": 33
}, {
"date": "8/1855",
"total": 44614,
"disease": 483,
"wounds": 164,
"other": 25
}, {
"date": "9/1855",
"total": 47751,
"disease": 189,
"wounds": 276,
"other": 20
}, {
"date": "10/1855",
"total": 46852,
"disease": 128,
"wounds": 53,
"other": 18
}, {
"date": "11/1855",
"total": 37853,
"disease": 178,
"wounds": 33,
"other": 32
}, {
"date": "12/1855",
"total": 43217,
"disease": 91,
"wounds": 18,
"other": 28
}, {
"date": "1/1856",
"total": 44212,
"disease": 42,
"wounds": 2,
"other": 48
}, {
"date": "2/1856",
"total": 43485,
"disease": 24,
"wounds": 0,
"other": 19
}, {
"date": "3/1856",
"total": 46140,
"disease": 15,
"wounds": 0,
"other": 35
}];
var key = ["wounds", "other", "disease"];
initStackedBarChart.draw({
data: data,
key: key,
element: 'stacked-bar'
});
.axis text {
font: 10px sans-serif;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.path-line {
fill: none;
stroke: yellow;
stroke-width: 1.5px;
}
svg {
background: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<h2>Stacked Bar Chart - d3.v4 implementation</h2>
<div id='stacked-bar'></div>
You mean something like this?
Stackchart
See sample - fiddle
var data = [
{
"interest_rate":"< 4%",
"Default":60,
"Charge-off":20,
"Current":456,
"30 days":367.22,
"60 days":222,
"90 days":198,
"Default":60
},
{
"interest_rate":"4-7.99%",
"Charge-off":2,
"Default":30,
"Current":271,
"30 days":125,
"60 days":78,
"90 days":72
}
];
var margin = {
top: 20,
right: 20,
bottom: 40,
left: 60
},
width = 450 - margin.left - margin.right,
height = 315 - margin.top - margin.bottom,
that = this;
var x = d3.scale.ordinal().rangeRoundBands([0, width], .3);
var y = d3.scale.linear().rangeRound([height, 0]);
var color = d3.scale.category20();
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".0%"));
var svg = d3.select(".viz-portfolio-delinquent-status").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
color.domain(d3.keys(data[0]).filter(function (key) {
return key !== "interest_rate";
}));
data.forEach(function (d) {
var y0 = 0;
d.rates = color.domain().map(function (name) {
console.log();;
return {
name: name,
y0: y0,
y1: y0 += +d[name],
amount: d[name]
};
});
d.rates.forEach(function (d) {
d.y0 /= y0;
d.y1 /= y0;
});
console.log(data);
});
data.sort(function (a, b) {
return b.rates[0].y1 - a.rates[0].y1;
});
x.domain(data.map(function (d) {
return d.interest_rate;
}));
svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
svg.append("g").attr("class", "y axis").call(yAxis);
var interest_rate = svg.selectAll(".interest-rate").data(data).enter().append("g").attr("class", "interest-rate").attr("transform", function (d) {
return "translate(" + x(d.interest_rate) + ",0)";
});
interest_rate.selectAll("rect").data(function (d) {
return d.rates;
}).enter().append("rect").attr("width", x.rangeBand()).attr("y", function (d) {
return y(d.y1);
}).attr("height", function (d) {
return y(d.y0) - y(d.y1);
}).style("fill", function (d) {
return color(d.name);
}).on('mouseover', function (d) {
var total_amt;
total_amt = d.amount;
console.log('----');
d3.select(".chart-tip").style('opacity', '1').html('Amount: <strong>$' + that.numberWithCommas(total_amt.toFixed(2)) + '</strong>');
}).on('mouseout', function () {
d3.select(".chart-tip").style('opacity', '0');
});
var legend = svg.selectAll(".legend").data(color.domain().slice().reverse()).enter().append("g").attr("class", "legend").attr("transform", function (d, i) {
return "translate(" + i * -70 + ",283)";
});
legend.append("rect").attr("x", width + -53).attr("width", 10).attr("height", 10).style("fill", color);
legend.append("text").attr("x", width - 40).attr("y", 5).attr("width", 40).attr("dy", ".35em").style("text-anchor", "start").text(function (d) {
return d;
});
h1 {
font-family: helvetica, arial, sans-serif;
text-align:center;
margin-top: 80px;
}
.viz-portfolio-delinquent-status {
font-family: helvetica, arial, sans-serif;
margin: 0 auto;
font-size: 10px;
width: 450px;
height: 300px
}
path { fill: #83B0EA;}
.domain {
fill: none;
stroke: #000;
stroke-width: 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<h1>D3 Stacked Bar Chart Example</h1>
<div class="viz-portfolio-delinquent-status"></div>
I have this little issue : I'm not able to draw a curved line with json data.
Here's go my code
var diagonal = d3.svg.diagonal();
groupe.selectAll("path")
.data([data])
.enter()
.append("path")
.attr("d",diagonal
.source({x:250, y:500})
.target({x:400, y:300}))
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width","2");
Here I put some data, but when i try with
.source({'x':function(d) {return d.x},'y':function(d) {return d.x})
I habve an error in the console and I'm not able to draw the lines
Do you know where is my error ?
My data looks like this
var data = [
{"x":250,"y":500,"width": 100, "height": 100, "nx":400, "ny":300, "class":"brief", "name": "Prise de Brief"},
{"x":400,"y":300,"width": 150, "height": 150, "nx":600, "ny":450, "class":"conception", "name": "Conception"},
{"x":600,"y":450,"width": 150, "height": 150, "nx":900, "ny":500, "xI":600,"yI":450,"wI": 50, "hI": 50, "xlink": "img/hexagone_plein.svg", "class":"crea", "name": "Création graphique", "id": "crea"},
{"x":900,"y":500,"width": 150, "height": 150, "nx":1150, "ny":350, "class":"dev", "name": "Développements techniques"},
{"x":1150,"y":350,"width": 100, "height": 100, "nx":1300, "ny":500, "class":"recette", "name": "Recette"},
{"x":1300,"y":500,"width": 100, "height": 100, "nx":1500, "ny":650, "class":"mel", "name": "Mise en ligne"},
{"x":1500,"y":650,"width": 100, "height": 100, "nx":1500, "ny":650, "class":"garantie", "name": "Garantie"}
];
I think you have the syntax wrong for source functions, as well as the data already being an array, maybe this will work?
var diagonal = d3.svg.diagonal();
groupe.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d",diagonal
.source(function(d){ return {"x":d.x, "y":d.y};})
.target({x:400, y:300}))
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width","2");
Here is a link to the jsfiddle
http://jsfiddle.net/jaimem/RPGPL/2/
Now the graph shows red color for all the circles.Is dere a way to show random colors on the circles.
Here is the d3.js code
var data = [{ "count": "202", "year": "1590"},
{ "count": "215", "year": "1592"},
{ "count": "179", "year": "1593"},
{ "count": "199", "year": "1594"},
{ "count": "134", "year": "1595"},
{ "count": "176", "year": "1596"},
{ "count": "172", "year": "1597"},
{ "count": "161", "year": "1598"},
{ "count": "199", "year": "1599"},
{ "count": "181", "year": "1600"},
{ "count": "157", "year": "1602"},
{ "count": "179", "year": "1603"},
{ "count": "150", "year": "1606"},
{ "count": "187", "year": "1607"},
{ "count": "133", "year": "1608"},
{ "count": "190", "year": "1609"},
{ "count": "175", "year": "1610"},
{ "count": "91", "year": "1611"},
{ "count": "150", "year": "1612"} ];
function ShowGraph(data) {
d3.selectAll('.axis').remove();
var vis = d3.select("#visualisation").append('svg'),
WIDTH = 500,
HEIGHT = 500,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 30
},
xRange = d3.scale
.linear()
.domain([
d3.min(data, function(d){ return parseInt(d.year, 10);}),
d3.max(data, function(d){ return parseInt(d.year, 10);})
])
.range([MARGINS.left, WIDTH - MARGINS.right]),
yRange = d3.scale
.linear()
.domain([
d3.min(data, function(d){ return parseInt(d.count, 10);}),
d3.max(data, function(d){ return parseInt(d.count, 10);})
])
.range([HEIGHT - MARGINS.top, MARGINS.bottom]),
xAxis = d3.svg.axis() // generate an axis
.scale(xRange) // set the range of the axis
.tickSize(5) // height of the ticks
.tickSubdivide(true), // display ticks between text labels
yAxis = d3.svg.axis() // generate an axis
.scale(yRange) // set the range of the axis
.tickSize(5) // width of the ticks
.orient("left") // have the text labels on the left hand side
.tickSubdivide(true); // display ticks between text labels
var transition = vis.transition().duration(1000).ease("exp-in-out");
transition.select(".x.axis").call(xAxis);
transition.select(".y.axis").call(yAxis);
vis.append("svg:g") // add a container for the axis
.attr("class", "x axis") // add some classes so we can style it
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
.call(xAxis); // finally, add the axis to the visualisation
vis.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + (MARGINS.left) + ",0)")
.call(yAxis);
var circles = vis.selectAll("circle").data(data)
circles.enter()
.append("svg:circle")
.attr("cx", function (d) {
return xRange(d.year);
})
.attr("cy", function (d) {
return yRange(d.count);
})
.style("fill", "red")
circles.transition().duration(1000)
.attr("cx", function (d) {
return xRange(d.year);
})
.attr("cy", function (d) {
return yRange(d.count);
})
.attr("r", 10)
circles.exit()
.transition().duration(1000)
.attr("r", 10)
.remove();
}
you can also use d3.scale.category20(); to get some predefined random colors
Just define color scale as
var color = d3.scale.category20();
Add add fill attribute to the circles as
.attr("fill",function(d,i){return color(i);});
replace .style("fill","red") with
.style("fill",function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
})
doc for dynamic properties
For a quick-and-dirty approach to random colors:
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
.style('height',(data) => { return data+'px' })
.style('background-color',() => {
let color = '#'+Math.floor(Math.random() * Math.pow(2,32) ^ 0xffffff).toString(16).substr(-6);
console.log(color);
return color;
})
.bar {
width: 25px;
height: 100px;
display: inline-block;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>
May be the Chumliu answer is the first approach, but it has one fault: it will repeat colors and make a confusion for the when read the graphics.
Like this way you have different colors:
var colors = [];
var arr = [];
var j;
products.forEach(function(d)
{
do
{
j = Math.random();
}
while($.inArray(j,arr) != -1);
arr.push(j);
//this gives us different values
var value = parseFloat(d.category_id) + parseFloat(d.total);
eval('colors.cat'+d.category_id+' = "hsl('+ parseFloat('0.'+ value ) * 360 + ',100%,50%)"');
}
later you can use it in D3 like this:
g.append("path").style("fill", function(d)
{
var indexcolor = 'cat'+d.data.category_id; return colors[indexcolor];
});