D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
patiencehaggin
Full window
Github gist
Unicorns by investor Try 3
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="jquery-3.2.1.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } .axis .domain { display: none; } </style> </head> <body> <select id="menu"> <!-- Dropdown goes here --> </select> <svg width="960" height="500"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script> var svg = d3.select("svg"), margin = {top: 20, right: 20, bottom: 30, left: 40}, 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 + ")"); d3.csv("unicorns.csv", function(error, data) { if (error) return error; data = d3.nest() .key(function(d) { return d.investorWriteInName }) .key(function(d) { return d.industrySegment }) .entries(data); var stack = d3.stack() .keys(['Aerospace and Defense', 'Biopharmaceuticals', 'Business Support Services', 'Construction and Civil Engineering', 'Consumer Information Services', 'Electronics and Computer Hardware', 'Financial Institutions and Services', 'Healthcare Services', 'Machinery and Industrial Goods', 'Media and Content', 'Medical Devices and Equipment', 'Medical Software and Information Services', 'Personal Goods', 'Renewable Energy', 'Retailers', 'Software', 'Travel and Leisure', 'Vehicles and Parts', 'Wholesale Trade and Shipping']) .value(function(d, key) { var sector = d.values.find(function(sector) { return sector.key === key }); if (!sector) return 0; return sector.values.length; }); var series = stack(data); console.log(series); var svg = d3.select('svg') .attr('width', 960).attr('height', 500); var sectors = svg.selectAll('g') .data(series, function(d) { debugger // console.log("We're here!" + d); // return d.key }); // exit sectors.exit().remove(); // enter + update sectors = sectors.enter().append('g') .classed('sector', true) .merge(sectors); // rectangles for each investor // tells it that that key on each investor is unique, so use that as an ID var investor = sectors.selectAll('g') .data(function(d) { return d }, function(investor) { return investor.data.key }); // in this instance, d.key is going to refer to the investor // exit investor.exit().remove(); var enter = investor.enter().append('g') enter.append('rect'); enter.append('text'); investor = enter.merge(investor); investor.select('rect') .attr('x', function(d, i) { return i * 25 }) .attr('y', function(d) { return 500 - d[1] * 10}) .attr('width', 20) .attr('height', function(d) {return (d[1]-d[0]) * 10}) .attr('fill', '#fff') .attr('stroke', '#000'); investor.append('text') .text(function(d) { return d.data.key}) .attr('x', function(investor, i) { return i * 25 }) .attr('y', function(investor) { return 500 - investor[1] * 100}) .attr('font-size', '12px'); }); // Sort the bars so they show up tallest to shortest // data.sort(function(a, b) { return b.total - a.total; }); /* // Set scales var xScale = d3.scaleBand() .rangeRound([0, width]) .paddingInner(0.05) .align(0.1); var yScale = d3.scaleLinear() .rangeRound([height, 0]); var colorScale = d3.scaleOrdinal() .range(["#e6194b", "#3cb44b", "#ffe119", "#0082c8", "#f58231", "#911eb4", "#46f0f0", "#f032e6", "#d2f53c", "#d2f53c", "#fabebe", "#008080", "#e6beff", "#aa6e28", "#fffac8", "#800000", "#aaffc3", "#808000", "#ffd8b1", "#808080", "#FFFFFF", "#000000" ]); xScale.domain(data.map(function(d) { return d.investorWriteInName; })); yScale.domain([0, d3.max(data, function(d) { return d.values.length; })]).nice(); colorScale.domain(keys); //Append things g.append("g") .selectAll("g") .data(d3.stack().keys(keys)(data)) .enter().append("g") .attr("fill", function(d) { return colorScale(d.key); }) .selectAll("rect") .data(function(d) { return d; }) .enter().append("rect") .attr("x", function(d) { return xScale(d.data.name); }) .attr("y", function(d) { return yScale(d[1]); }) .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); }) .attr("width", xScale.bandwidth()); g.append("g") .attr("class", "axis") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)); g.append("g") .attr("class", "axis") .call(d3.axisLeft(yScale).ticks(null, "s")) .append("text") .attr("x", 2) .attr("y", yScale(yScale.ticks().pop()) + 0.5) .attr("dy", "0.32em") .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "start") .text("Items"); var legend = g.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "end") .selectAll("g") .data(keys.slice().reverse()) .enter().append("g") .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); legend.append("rect") .attr("x", width - 19) .attr("width", 19) .attr("height", 19) .attr("fill", colorScale); legend.append("text") .attr("x", width - 24) .attr("y", 9.5) .attr("dy", "0.32em") .text(function(d) { return d; }); // update function update(data) { var item = d3.select("#menu").property("value"); var itemData = getItemData(data, item); console.log(itemData); } // main d3.select("#menu") .on("change", function(d) { update(data); }); */ </script> </body>
https://d3js.org/d3.v4.min.js