Adding state labels and tooltip with value to D3 US Map - d3.js
Attached is a screen shot of what shows up with the following code. I am mapping the number of pizza restaurants each state has. I am having trouble adding the state labels and a tool tip that shows me the corresponding value for each state to the map. I would like to be able to hover on a state and then have a tool tip that tells me what state it is and the value for it. This is what I have done so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css">
/* Legend Font Style */
body {
font: 11px sans-serif;
background-color: #ffffff;
}
/* Legend Position Style */
.legend {
position:absolute;
left:20px;
top:30px;
}
.axis text {
font: 10px sans-serif;
}
.axis line, .axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height of map
var width = 960;
var height = 500;
var lowColor = '#f9f9f9'
var highColor = '#bc2a66'
// D3 Projection
var projection = d3.geoAlbersUsa()
.translate([width / 2, height / 2]) // translate to center of screen
.scale([1000]); // scale things down so see entire US
// Define path generator
var path = d3.geoPath() // path generator that will convert GeoJSON to SVG paths
.projection(projection); // tell path generator to use albersUsa projection
//Create SVG element and append map to the SVG
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// Load in my states data!
d3.csv("statesdata.csv", function(data) {
var dataArray = [];
for (var d = 0; d < data.length; d++) {
dataArray.push(parseFloat(data[d].value))
}
var minVal = d3.min(dataArray)
var maxVal = d3.max(dataArray)
var ramp = d3.scaleLinear().domain([minVal,maxVal]).range([lowColor,highColor])
// Load GeoJSON data and merge with states data
d3.json("us-states.json", function(json) {
// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
// Grab State Name
var dataState = data[i].state;
// Grab data value
var dataValue = data[i].value;
// Find the corresponding state inside the GeoJSON
for (var j = 0; j < json.features.length; j++) {
var jsonState = json.features[j].properties.name;
if (dataState == jsonState) {
// Copy the data value into the JSON
json.features[j].properties.value = dataValue;
// Stop looking through the JSON
break;
}
}
}
// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "#fff")
.style("stroke-width", "1")
.style("fill", function(d) { return ramp(d.properties.value) });
g.selectAll("text")
.data(json.features)
.enter()
.append("svg:text")
.text(function(d){
return d.properties.name;
})
.attr("x", function(d){
return path.centroid(d)[0];
})
.attr("y", function(d){
return path.centroid(d)[1];
})
.attr("text-anchor","middle")
.attr('font-size','6pt');
// add a legend
var w = 140, h = 300;
var key = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("class", "legend");
var legend = key.append("defs")
.append("svg:linearGradient")
.attr("id", "gradient")
.attr("x1", "100%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "100%")
.attr("spreadMethod", "pad");
legend.append("stop")
.attr("offset", "0%")
.attr("stop-color", highColor)
.attr("stop-opacity", 1);
legend.append("stop")
.attr("offset", "100%")
.attr("stop-color", lowColor)
.attr("stop-opacity", 1);
key.append("rect")
.attr("width", w - 100)
.attr("height", h)
.style("fill", "url(#gradient)")
.attr("transform", "translate(0,10)");
var y = d3.scaleLinear()
.range([h, 0])
.domain([minVal, maxVal]);
var yAxis = d3.axisRight(y);
key.append("g")
.attr("class", "y axis")
.attr("transform", "translate(41,10)")
.call(yAxis)
});
});
</script>
</body>
</html>
Thank you.
Related
Multiple line chart issue from json
Following is my code. I have been trying to plot humidity and dew point in basis of months in the axis. But I am getting an error of data undefined and also the month in the axis comes in number. <!DOCTYPE html> <meta charset="utf-8"> <html> <head> <title> Data Visualization - Binding Dataset to Shapes Using D3 </title> <script src="https://d3js.org/d3.v3.min.js"></script> </head> <style> /* set the CSS */ body { font: 12px Arial;} path { stroke: steelblue; stroke-width: 2; fill: none; } .axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; } .legend { font-size: 16px; font-weight: bold; text-anchor: middle; } </style> <body> <script> // Set the dimensions of the canvas / graph var margin = {top: 30, right: 20, bottom: 70, left: 50}, width = 600 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; // Parse the date / time var parseDate = d3.time.format("%b").parse; // Set the ranges var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); // Define the axes var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(5); // Define the line var priceline = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.dew); }); // Adds the svg canvas var svg = d3.select("body") .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 + ")"); // Get the data d3.json("weatherdata.json", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.history.date.mon); d.dew = +d.history.dailysummary[0].meandewptm; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain(d3.extent(data, function(d) { return d.dew; })); // Nest the entries by symbol var dataNest = d3.nest() .key(function(d) {return d.dew;}) .entries(data); var color = d3.scale.category10(); // set the colour scale legendSpace = width/dataNest.length; // spacing for legend // Loop through each symbol / key dataNest.forEach(function(d,i) { svg.append("path") .attr("class", "line") .style("stroke", function() { // Add the colours dynamically return d.color = color(d.key); }) .attr("d", priceline(d.values)); // Add the Legend svg.append("text") .attr("x", (legendSpace/2)+i*legendSpace) // spacing .attr("y", height + (margin.bottom/2)+ 5) .attr("class", "legend") // style the legend .style("fill", function() { // dynamic colours return d.color = color(d.key); }) .text(d.key); }); // Add the X Axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); // Add the Y Axis svg.append("g") .attr("class", "y axis") .call(yAxis); }); </script> </body> </html> I am not sure how will i solve it. Can anyone please help. I am sharing the data file with the current issue I am facing. I have attached the model data the way it should look like: Thanks in advance.
For your question on Date format for the X axis , sorry i put an answer because i can't comment (need more reputation). I think you need to do something like this chart.xAxis .tickFormat(function(d) { return d3.time.format('%b')(format(d)); }); That will display only the month.
D3.js How to hide/show line when click select options?
I tried to use D3.js to draw lines when you click on different checkbox. It will get data of that option. Here is an example I used D3 multi-series line chart with tooltips and legend. I have got the specific data object that is corresponding the checkbox I choose. Howevery, I don't know how to draw it on svg. Please help me and I will appreciate you so much. I also find a website "www.cotrino.com/starpaths/" that shows the final effect I want to implement. My D3 effect <!DOCTYPE html> <meta charset="utf-8"> <style> .axis--x path { display: none; } .line { fill: none; stroke: steelblue; stroke-width: 1.5px; } </style> <script src="http://d3js.org/d3.v4.js"></script> <body> <svg width="1000" height="500"></svg> <div id="disease_list"></div> </body> <script> var svg = d3.select("svg"), margin = {top: 20, right: 80, bottom: 30, left: 50}, width = svg.attr("width") - margin.left - margin.right, height = svg.attr("height") - margin.top - margin.bottom, g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //make a clip path for the graph var clip = svg.append("svg:clipPath") .attr("id", "clip") .append("svg:rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height); var parseTime = d3.timeParse("%Y-%m"); var x = d3.scaleTime().range([0, width]), y = d3.scaleLinear().range([height, 0]); var line = d3.line() .curve(d3.curveBasis) .x(function(d) { console.log(d.date); return x(d.date); }) .y(function(d) { console.log(d.date); return y(d.count); }); var color = d3.scaleOrdinal(d3.schemeCategory20); d3.csv("./top10highestNormalize.csv", type, function(error, data) { if (error) throw error; var diseases = data.columns.slice(1).map(function(id) { return { id: id, values: data.map(function(d) { return {date: d.date, count: d[id]}; }) }; }); console.log(diseases); x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([ d3.min(diseases, function(c) { return d3.min(c.values, function(d) { return d.count; }); }), d3.max(diseases, function(c) { return d3.max(c.values, function(d) { return d.count; }); }) ]); g.append("g") .attr("class", "axis axis--x") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)); g.append("g") .attr("class", "axis axis--y") .call(d3.axisLeft(y)) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("fill", "#000") .text("Count"); /* var disease = g.selectAll(".disease") .data(diseases) .enter().append("g") .attr("class", "disease"); */ // Create the shape selectors var selector = d3.select("#disease_list").append("select"); labels = selector.selectAll("option") .data(diseases) .enter() .append("option") .attr("value",function(d,i) {return i;}) .text(function(d) {return d.id;}); var menu = d3.select("#disease_list select") .on("change", redraw); // var series = menu.property("value"); //console.log(series); // all the meat goes in the redraw function function redraw() { console.log("redraw start"); // get value from menu selection // the option values are set in HTML and correspond //to the [type] value we used to nest the data var series = menu.property("value"); console.log(series); // only retrieve data from the selected series, using the nest we just created var adata = diseases[series]; console.log(adata); } }); function type(d, _, columns) { d.date = parseTime(d.date); for (var i = 1, n = columns.length, c; i < n; ++i) d[c = columns[i]] = +d[c]; return d; } </script> top10highestNormalize.csv date,disseminated sclerosis,sclerosis,gestural tics,venereal disease,bite,cot death,venereal disease,cardiovascular disease,diseases vascular,pruritis,pus,cystic fibrosis,fibroses 2010-04,0,0,0,0,0,0,0,0,0,0,0,0,0 2010-05,0,0,0.06898023,0.068783069,0.085790885,0.065761258,0.068783069,0,0,0.001204094,0.023051592,0,0 2010-06,0.076923077,0.076923077,0.190584554,0.199972867,0.201072386,0.171789373,0.199972867,0.071428571,0.071428571,0.004816376,0.031284303,0.2,0.2 2010-07,0.230769231,0.230769231,0.221590101,0.224664225,0.225201072,0.235167977,0.224664225,0.214285714,0.285714286,0.00602047,0.038419319,0,0 2010-08,0.538461538,0.538461538,0.174797326,0.182471849,0.174262735,0.192041935,0.182471849,0.071428571,0.071428571,0.003612282,0.023051592,0,0 2010-09,0.230769231,0.230769231,0.287725786,0.277845611,0.252010724,0.259471051,0.277845611,0,0,0.004214329,0.046652031,0,0 2010-10,0.076923077,0.076923077,0.295406059,0.299416633,0.285969616,0.265665952,0.299416633,0,0.071428571,0.007224564,0.03402854,0.066666667,0.066666667 2010-11,0.153846154,0.153846154,0.284027877,0.279337946,0.261840929,0.276149631,0.279337946,0,0,0.006622517,0.050493963,0,0 2010-12,0.153846154,0.153846154,0.271511876,0.237552571,0.213583557,0.237312366,0.237552571,0.142857143,0.142857143,0.004214329,0.035126235,0,0 2011-01,0.076923077,0.076923077,0.306642014,0.312440646,0.28150134,0.305694544,0.312440646,0.142857143,0.142857143,0.006622517,0.046103183,0,0.066666667 2011-02,0.076923077,0.076923077,0.288721377,0.262243929,0.219839142,0.25899452,0.262243929,0.142857143,0.142857143,0.007224564,0.038968167,0,0.066666667 2011-03,0.076923077,0.076923077,0.271654103,0.255324922,0.253798034,0.266857279,0.255324922,0.071428571,0.071428571,0.007224564,0.051591658,0,0 2011-04,0.461538462,0.461538462,0.291423695,0.252068919,0.235031278,0.284250655,0.252068919,0,0,0.009030704,0.045005488,0,0 2011-05,0.153846154,0.153846154,0.448158157,0.380681047,0.351206434,0.439123183,0.380681047,0,0,0.011438892,0.079582876,0.333333333,0.4 2011-06,0.153846154,0.153846154,0.498079932,0.437661104,0.391420912,0.424827258,0.437661104,0.142857143,0.142857143,0.009632751,0.063117453,0,0.066666667 2011-07,0,0,0.410467928,0.424094424,0.419124218,0.379080295,0.424094424,0,0.071428571,0.009030704,0.061470911,1,1 2011-08,0.076923077,0.076923077,0.268382876,0.262922263,0.238605898,0.267810341,0.262922263,0.214285714,0.214285714,0.002408188,0.038968167,0,0 2011-09,0.230769231,0.230769231,0.510027023,0.469949803,0.470956211,0.444841553,0.469949803,0,0,0.014449127,0.075740944,0.133333333,0.2 2011-10,0.076923077,0.076923077,0.462380885,0.434540768,0.431635389,0.417679295,0.434540768,0.142857143,0.142857143,0.006622517,0.073545554,0,0.066666667 2011-11,0.153846154,0.153846154,0.519698478,0.457061457,0.415549598,0.443888492,0.457061457,0.142857143,0.142857143,0.01384708,0.06805708,0.2,0.2 2011-12,1,1,0.382449154,0.35002035,0.319928508,0.315701692,0.35002035,0,0,0.002408188,0.060373216,0,0 2012-01,0.461538462,0.461538462,0.492390841,0.45312712,0.409294013,0.45389564,0.45312712,0.571428571,0.571428571,0.007224564,0.060373216,0,0 2012-02,0.076923077,0.076923077,0.382875836,0.375932709,0.350312779,0.369073147,0.375932709,0.071428571,0.071428571,0.003612282,0.049945115,0.066666667,0.066666667 2012-03,0.923076923,1,1,0.922127255,1,0.871098404,0.922127255,0.5,0.5,0.01384708,0.171789243,0,0.066666667 2012-04,0.230769231,0.307692308,0.699331532,0.676977344,0.63360143,0.645699309,0.676977344,0.142857143,0.142857143,0.012040939,0.092206367,0.133333333,0.133333333 2012-05,0.846153846,0.846153846,0.801735173,0.752408086,0.776586238,0.7436264,0.752408086,0.785714286,0.785714286,0.016857315,0.131723381,0.466666667,0.466666667 2012-06,0.384615385,0.461538462,0.730479306,0.732193732,0.625558534,0.657850846,0.732193732,0,0,0.011438892,0.118002195,0.6,0.666666667 2012-07,0.384615385,0.384615385,0.751386716,0.738434405,0.71849866,0.714081487,0.738434405,0.285714286,0.285714286,0.009030704,0.126783754,0.2,0.2 2012-08,0.384615385,0.461538462,0.700327123,0.643467643,0.619302949,0.646890636,0.643467643,0.285714286,0.285714286,0.012642986,0.150933041,0.2,0.266666667 2012-09,0.076923077,0.230769231,0.72137676,0.701804368,0.63538874,0.70455087,0.701804368,0.214285714,0.214285714,0.011438892,0.130076839,0.066666667,0.066666667 2012-10,0.230769231,0.230769231,0.846252311,0.863112196,0.796246649,0.825827972,0.863112196,0.071428571,0.071428571,0.036724865,0.127881449,0.333333333,0.333333333 2012-11,0.692307692,0.692307692,0.895605177,1,0.798927614,0.909935668,1,0.214285714,0.357142857,0.012642986,0.143798024,0,0.133333333 2012-12,0.923076923,1,0.795903854,0.803283137,0.683646113,0.827257565,0.803283137,0.142857143,0.142857143,0.008428657,0.104829857,0.6,0.6 2013-01,0.230769231,0.384615385,0.92106386,0.964862298,0.848078642,0.944007624,0.964862298,0.285714286,0.357142857,0.015653221,0.146542261,0.533333333,0.733333333 2013-02,0.153846154,0.307692308,0.830322856,0.872880206,0.798927614,0.755777937,0.872880206,0.142857143,0.142857143,0.010234798,0.110318332,0,0.066666667 2013-03,0.230769231,0.230769231,0.927037406,0.944105277,0.885612154,0.953061711,0.944105277,0.142857143,0.142857143,0.009632751,0.131174533,0,0.133333333 2013-04,0.384615385,0.384615385,0.796046082,0.775471442,0.671134942,0.715749345,0.775471442,0,0,0.012040939,0.12349067,0.133333333,0.133333333 2013-05,0.923076923,1,0.824633765,0.844254511,0.742627346,0.843697879,0.844254511,0.142857143,0.142857143,0.015653221,0.149286498,0,0 2013-06,0.307692308,0.307692308,0.884369222,0.949667616,0.865951743,1,0.949667616,0.071428571,0.071428571,0.020469597,0.135016465,0.466666667,0.466666667 2013-07,0.461538462,0.461538462,0.864172948,0.935829602,0.843610366,0.939480581,0.935829602,0.071428571,0.071428571,0.015051174,0.128979144,0.066666667,0.2 2013-08,0.153846154,0.153846154,0.670886076,0.738163071,0.753351206,0.821300929,0.738163071,0.071428571,0.214285714,0.012642986,0.098243688,0,0 2013-09,0.230769231,0.230769231,0.876262267,0.861484195,0.744414656,0.996426019,0.861484195,0,0,0.024081878,0.144895719,0.066666667,0.066666667 2013-10,0.615384615,0.615384615,0.917508178,0.885361552,0.806970509,0.841315225,0.885361552,0.642857143,0.642857143,0.030704395,0.115806806,0.2,0.4 2013-11,0,0.076923077,0.857061584,0.903540904,0.791778374,0.845127472,0.903540904,0.5,0.5,0.012642986,0.093852909,0,0 2013-12,0.230769231,0.230769231,0.704878396,0.719169719,0.584450402,0.81915654,0.719169719,0.285714286,0.5,0.015653221,0.108122942,0,0 2014-01,0.461538462,0.461538462,0.900014223,0.856328856,0.717605004,0.98903979,0.856328856,0.357142857,0.5,0.030102348,0.137211855,0,0.066666667 2014-02,0,0,0.707865169,0.703296703,0.63717605,0.796997856,0.703296703,1,1,0.012642986,0.097145993,0,0 2014-03,0.230769231,0.230769231,0.815531219,0.800434134,0.7256479,0.786275911,0.800434134,0.714285714,0.714285714,0.009632751,0.099341383,0.533333333,0.6 2014-04,0.153846154,0.153846154,0.756506898,0.790259124,0.615728329,0.778174887,0.790259124,0,0,0.011438892,0.12349067,0,0 2014-05,0.461538462,0.461538462,0.85990613,0.767331434,0.705987489,0.78008101,0.767331434,0.142857143,0.285714286,0.014449127,0.13611416,0.066666667,0.133333333 2014-06,0.076923077,0.153846154,0.670886076,0.713064713,0.615728329,0.735763641,0.713064713,0.285714286,0.285714286,0.010836845,0.102634468,0,0 2014-07,0.076923077,0.076923077,0.672592803,0.801655135,0.621090259,0.680009531,0.801655135,0.071428571,0.071428571,0.007224564,0.103183315,0,0 2014-08,0.384615385,0.461538462,0.487270659,0.58377425,0.486148347,0.575887539,0.58377425,0.071428571,0.071428571,0.005418423,0.079582876,0,0.133333333 2014-09,0,0.076923077,0.715545442,0.678062678,0.669347632,0.705980462,0.678062678,0,0,0.01384708,0.103183315,0,0.066666667 2014-10,0.230769231,0.307692308,0.742995306,0.723511057,0.630920465,0.679294734,0.723511057,0,0,0.016857315,0.1064764,0,0 2014-11,0,0,0.672735031,0.623388957,0.583556747,0.64927329,0.623388957,0,0,0.004816376,0.115806806,0.066666667,0.066666667 2014-12,0.307692308,0.384615385,0.591096572,0.55704789,0.478999106,0.491303312,0.55704789,0.285714286,0.428571429,0.003010235,0.074643249,0,0 2015-01,0.076923077,0.153846154,0.659223439,0.561117894,0.531724754,0.605432452,0.561117894,0.071428571,0.071428571,0.007224564,0.094401756,0.133333333,0.133333333 2015-02,0.230769231,0.307692308,0.61840421,0.564780898,0.512064343,0.585656421,0.564780898,0.071428571,0.071428571,0.007224564,0.096597146,0,0 2015-03,0,0,0.770302944,0.677927011,0.599642538,0.675482487,0.677927011,0.071428571,0.071428571,0.009632751,0.111964874,0.066666667,0.2 2015-04,0.076923077,0.076923077,0.706016214,0.61687695,0.731903485,0.563497736,0.61687695,0.071428571,0.071428571,0.008428657,0.097145993,0,0 2015-05,0,0.076923077,0.655383303,0.614027947,0.55406613,0.6154396,0.614027947,0.071428571,0.071428571,0.012642986,0.099341383,0,0 2015-06,0,0.076923077,0.564357844,0.540632207,0.527256479,0.598284489,0.540632207,0.142857143,0.142857143,0.00602047,0.091657519,0,0 2015-07,0.076923077,0.076923077,0.486417295,0.525301859,0.511170688,0.566356922,0.525301859,0,0,0.015653221,0.08726674,0.066666667,0.066666667 2015-08,0.230769231,0.230769231,0.408476746,0.386379053,0.320822163,0.465094115,0.386379053,0,0,0.003010235,0.056531284,0,0 2015-09,0.538461538,0.538461538,0.870999858,0.792701126,0.747095621,0.883964737,0.792701126,0,0,0.013245033,0.156421515,0,0 2015-10,0.153846154,0.153846154,0.469492249,0.435490435,0.320822163,0.51227067,0.435490435,0,0,0.174593618,0.221734358,0,0 2015-11,0.153846154,0.153846154,0.322998151,0.309455976,0.273458445,0.346676197,0.309455976,0,0,0.462974112,0.481888035,0.133333333,0.133333333 2015-12,0.076923077,0.076923077,0.342767743,0.309320309,0.27971403,0.384798666,0.309320309,0,0,0.464780253,0.482436883,0.066666667,0.066666667 2016-01,0.307692308,0.384615385,0.415872564,0.349477683,0.358355675,0.442458899,0.349477683,0,0,0.559903672,0.581229418,0.066666667,0.066666667 2016-02,0,0,0.445455838,0.403744404,0.316353887,0.457469621,0.403744404,0,0,0.54846478,0.568605928,0.066666667,0.066666667 2016-03,0,0,0.471198976,0.400352734,0.317247542,0.508220157,0.400352734,0.142857143,0.142857143,0.604455148,0.628430296,0,0 2016-04,0,0,0.582989617,0.570343237,0.575513852,0.603764594,0.570343237,0.214285714,0.214285714,1,1,0,0
You need to create your line variable: var myLine = svg.append("path"); And then, inside redraw(), changing it according to the option selected: myLine.datum(adata.values) .attr("d", line); Here is a demo plunker: https://plnkr.co/edit/YjGO9TLDBXj13JQuO5bm?p=preview PS: I changed your x-scale range: var x = d3.scaleTime().range([margin.left, width]); And also added a call to redraw() when the code runs for the first time.
d3 how to tween inner radius for pie chart
I need to animate pie chart into a donut chart (or ring chart). Here is my code: var arc = d3.svg.arc().outerRadius(radius-margin).innerRadius(0) var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(60) var path = pie_chart.selectAll('path') .data(pie(data)) .enter() .append('path') .attr('d', arc) .attr('fill', function(d, i) { return color_scale(d.data.device) }) .transition().attr('d', arc2) Some times it's working but sometimes it is not. I have tried to apply transition to arc but not working. var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(0).transition().innerRadius(60)
I would write my own arcTween function for this to take complete control of the transition: function arcTween(d) { var i = d3.interpolateNumber(0, radius-70); //<-- radius of 0 to donut return function(t) { var r = i(t), arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(r); //<-- create arc return arc(d); //<-- return arc path }; } Full code: <!DOCTYPE html> <meta charset="utf-8"> <style> .arc text { font: 10px sans-serif; text-anchor: middle; } .arc path { stroke: #fff; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var width = 500, height = 500, radius = Math.min(width, height) / 2; var color = d3.scale.category10(); var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var data = [10, 20, 30, 40]; var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .style("fill", function(d, i) { return color(i); }) .transition() .delay(100) .duration(5000) .attrTween("d", arcTween); function arcTween(d) { var i = d3.interpolateNumber(0, radius-70); return function(t) { var r = i(t), arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(r); return arc(d); }; } </script> </body> Or just give someone a headache: <!DOCTYPE html> <meta charset="utf-8"> <style> .arc text { font: 10px sans-serif; text-anchor: middle; } .arc path { stroke: #fff; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var width = 500, height = 500, radius = Math.min(width, height) / 2; var color = d3.scale.category10(); var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var data = [10, 20, 30, 40]; var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); var arcs = g.append("path") .attr("d", arc) .style("fill", function(d, i) { return color(i); }); (function repeat() { arcs.transition() .duration(500) .attrTween("d", arcTweenOut) .transition() .duration(500) .attrTween("d", arcTweenIn) .each('end', repeat) })(); function arcTweenOut(d) { var i = d3.interpolateNumber(0, radius-70); return function(t) { var r = i(t), arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(r); return arc(d); }; } function arcTweenIn(d) { var i = d3.interpolateNumber(radius-70, 0); return function(t) { var r = i(t), arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(r); return arc(d); }; } </script> </body>
D3 auto updates when array length change
I have simple code here from Interactive Data Visualization by Scott Murray with minor changes. What I changed is the initial data's length 5 is different from the dataset1's length 25 in the click function. However, every time I click and update, it does generate random new numbers but the length only shows 5 bars. What is the reason for this? And how could I modify to change it? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="../d3/d3.v3.js"></script> <title>D3 index01 </title> <style type="text/css"> div.bar{ display: inline-block; width: 20px; height: 75px; background-color: teal; margin-right: 2px; } </style> </head> <body> <p> click it </p> <script type = "text/javascript"> var w=600; var h = 250; var dataset = [5,10,13,14,15]; var xScale = d3.scale.ordinal() .domain(d3.range(dataset.length)).rangeRoundBands([0,w],0.05); var yScale = d3.scale.linear() .domain([0,d3.max(dataset)]).range([0,h]); var svg = d3.select("body") .append("svg") .attr("width",w) .attr("height",h); svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("x", function(d,i){ return xScale(i); }) .attr("y",function(d){return (h-yScale(d));}) .attr("width",xScale.rangeBand()) .attr("height",function(d){return yScale(d);}); svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d) { return d; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i)+xScale.rangeBand() / 2; }) .attr("y", function(d) { return h - yScale(d) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); d3.select("p") .on("click",function(){ var dataset1 = []; for(var i=0; i<25; i++){ var newNumber = Math.floor(Math.random()*25); dataset1.push(newNumber); } svg.selectAll("rect").data(dataset1) .transition() .delay(function(d,i){ return i*100; }) .duration(500) .attr("x",function(d,i){ return xScale(i); }) .attr("y",function(d){ return h-yScale(d); }) .attr("x", function(d,i){ return xScale(i); }) .attr("height",function(d){ return yScale(d); }) .attr("fill",function(d){ return "rgb(0,0, " + (d*10) + ")"; }); svg.selectAll("text").data(dataset1). text(function(d) { return d; }) .attr("x", function(d, i) { return xScale(i) + xScale.rangeBand() / 2; }) .attr("y", function(d) { return h - yScale(d) + 14; }); }); </script> </body> </html>
The issue, as I see it, is that when you update the rects with the new numbers using this statement svg.selectAll("rect").data(dataset1) the selectAll only selects the original 5 rects that were created based on dataset var dataset = [5,10,13,14,15]; You could either create them all from the start with an equally sized starting dataset or append new rect svgs at this point. Since you are doing a transition on the original rects I think it makes the most sense to just start with all 25. You could write a function to automatically generate this and put it where dataset is defined: var dataset = []; var numBars = 25; // This is the number of bars you want var maxHeight = 25; // Seems like this is independent and needed as a ceiling for(var i =0;i < N;i++){ var newNumber = Math.floor(Math.random()* maxHeight); dataset.push(newNumber); } You could then replace 25 with numBars within your onclick function as well.
D3.JS - how do I add gridlines to my pie chart
I have extended the pie-chart example at: with pies that vary in radius depending on a percentage. I would like to add gridlines (circles) every 20 percent, but I can't figure out how. here is the updated csv: age,population,percent <5,2704659,67 5-13,4499890,38 14-17,2159981,91 18-24,3853788,49 25-44,14106543,71 45-64,8819342,88 =65,612463,64 and here is the updated code with pie-parts of different radius: <!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 10px sans-serif; background: #333; } .arc path { stroke: #fff; stroke-width: 2px; } .arc grid { stroke: #fff; stroke-width: 1; stroke-dasharray: 5,5; } .arc text { fill:#fff; font-size:12px; font-weight:bold; } .arc line { stroke: #fff; } </style> <body> <script src="d3.js"></script> <script> var width = 960, height = 500, radius = Math.min(width, height) / 2 - 10; var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); var arc = d3.svg.arc() .outerRadius(function(d) { return 50 + (radius - 50) * d.data.percent / 100; }) .innerRadius(20); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.population; }); var grid = d3.svg.area.radial() .radius(150); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); d3.csv("data.csv", function(error, data) { data.forEach(function(d) { d.population = +d.population; d.percent = d.percent; }); var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data.age); }); g.append("text") .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .style("text-anchor", "middle") .text(function(d) { return d.data.age; }); }); </script>
First set the number of ticks: var numTicks = 5; // Each tick is 20% Then create the data to create the gridlines: var sdat = []; for (i=0; i<=numTicks; i++) { sdat[i] = (radius/numTicks) * i; } And then you can use a function to create the radial gridlines, and you can call it from within the d3.csv block: addCircleAxes = function() { var circleAxes, i; svg.selectAll('.circle-ticks').remove(); circleAxes = svg.selectAll('.circle-ticks') .data(sdat) .enter().append('svg:g') .attr("class", "circle-ticks"); // radial tick lines circleAxes.append("svg:circle") .attr("r", String) .attr("class", "circle") .style("stroke", "#CCC") .style("opacity", 0.5) .style("fill", "none"); // Labels for each circle circleAxes.append("svg:text") .attr("text-anchor", "center") .attr("dy", function(d) { return d - 5 }) .style("fill", "#fff") .text(function(d,i) { return i * (100/numTicks) }); }; An example is here: http://bl.ocks.org/3994129 (Borrowed from: http://kreese.net/blog/2012/08/26/d3-js-creating-a-polar-area-diagram-radial-bar-chart/)