D3.js loading local data file from file:///

The best solution would be to run a server on your computer to make it work. The simplest way to have a local web server, as explained here is to run this command in the directory where you have your source code: python -m SimpleHTTPServer 8888 & Then just load the page http://localhost:8888

Join existing elements of the DOM to data with d3.js

Remember that the key function will be invoked on each element of your data array (i.e. dt), as well as on each element in your selection (i.e. d3.selectAll(“.input”)). In both cases, the key function needs to return a valid value and those output values will used to make the association. To achieve your goal you … Read more

Major and minor ticks with V3 of D3?

The latest version doesn’t offer anything to draw minor ticks as explicitly as previous versions, but there’s no need to draw another axis to achieve what you want. You can use the scale to generate additional ticks and then use the familiar .data() pattern to draw lines for those for which no lines exist already. … Read more

How to make localization on months / days for D3js?

I just had the same issue, and I found the way to fix it without recompiling d3. https://github.com/mbostock/d3/wiki/Localization The documentation mentions the function d3.locale, this one builds the functions used for formatting numbers and dates. So if you call it with your own localization rules, you’re half way there. var myFormatters = d3.locale({ “decimal”: “.”, … Read more

Bar chart with negative values

OK, let’s say you have an array of numbers as your dataset, and this includes some positive and negative values: var data = [-15, -20, -22, -18, 2, 6, -26, -18]; You’ll want two scales to construct a bar chart. You need one quantitative scale (typically a linear scale) to compute the bar positions along … Read more

How to use d3.min and d3.max within a d3.json command

If your data is an array, your original code will work, if you get rid of the brackets around data: var data = [32710,20280,18002]; console.log(data); console.log(d3.min(data)); console.log(d3.max(data)); If you need to identify the array values with the keys “01”,”02″, “03”, create an array of objects, and operate on the values to get min/max: //data as … Read more

responsive D3 chart

You can make the chart resize using a combination of viewBox and preserveAspectRatio attributes on the SVG element. See this jsfiddle for the full example: http://jsfiddle.net/BTfmH/12/ var svg = d3.select(‘.chart-container’).append(“svg”) .attr(“width”, ‘100%’) .attr(“height”, ‘100%’) .attr(‘viewBox’,’0 0 ‘+Math.min(width,height)+’ ‘+Math.min(width,height)) .attr(‘preserveAspectRatio’,’xMinYMin’) .append(“g”) .attr(“transform”, “translate(” + Math.min(width,height) / 2 + “,” + Math.min(width,height) / 2 + “)”); You … Read more

Pre-projected geometry v getting the browser to do it (aka efficiency v flexibility)

If I use this D3 function, aren’t I still forcing the viewer’s browser to do a lot of data processing, which will worsen the performance? The point of pre-processing the data is to avoid this. Or am I overestimating the processing work involved in the d3.geoTransform() function above? Short Answer: You are overestimating the amount … Read more