[ Launch: nvd3 pie ] 80c60fbaad23ef9f91b2 by bill-kidwell
[ Launch: test ] 4653053 by enjalot
[ Launch: test ] 4652017 by enjalot
[ Launch: test ] 4582399 by enjalot
-
-
Save bill-kidwell/80c60fbaad23ef9f91b2 to your computer and use it in GitHub Desktop.
nvd3 pie
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"description":"nvd3 pie","endpoint":"","display":"svg","public":true,"require":[{"name":"nvd3","url":"https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"nvd3.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"nv.d3.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.7,"thumbnail":"http://i.imgur.com/Z4ghHZY.png","fullscreen":false,"ajax-caching":true} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Adapted from: | |
| // https://github.com/novus/nvd3/blob/master/examples/pieChart.html | |
| var testdata2 = [ | |
| {key: "One", y: 5}, | |
| {key: "Two", y: 2}, | |
| {key: "Three", y: 9}, | |
| {key: "Four", y: 7}, | |
| {key: "Five", y: 4}, | |
| {key: "Six", y: 3}, | |
| {key: "Seven", y: 0.5} | |
| ]; | |
| var height = 700; | |
| var width = 700; | |
| nv.addGraph(function() { | |
| var chart = nv.models.pieChart() | |
| .x(function(d) { return d.key }) | |
| .y(function(d) { return d.y }) | |
| .width(width) | |
| .height(height); | |
| d3.select("svg") | |
| .datum(testdata2) | |
| .transition().duration(1200) | |
| .attr('width', width) | |
| .attr('height', height) | |
| .call(chart); | |
| return chart; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /******************** | |
| Default CSS for an svg element nvd3 used | |
| */ | |
| svg.nvd3-svg { | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -ms-user-select: none; | |
| -moz-user-select: none; | |
| user-select: none; | |
| display: block; | |
| } | |
| /******************** | |
| Box shadow and border radius styling | |
| */ | |
| .nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip { | |
| -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); | |
| -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); | |
| box-shadow: 0 5px 10px rgba(0,0,0,.2); | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| border-radius: 5px; | |
| } | |
| /******************** | |
| * TOOLTIP CSS | |
| */ | |
| .nvtooltip { | |
| position: absolute; | |
| background-color: rgba(255,255,255,1.0); | |
| padding: 1px; | |
| border: 1px solid rgba(0,0,0,.2); | |
| z-index: 10000; | |
| font-family: Arial; | |
| font-size: 13px; | |
| text-align: left; | |
| pointer-events: none; | |
| white-space: nowrap; | |
| -webkit-touch-callout: none; | |
| -webkit-user-select: none; | |
| -khtml-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| /*Give tooltips that old fade in transition by | |
| putting a "with-transitions" class on the container div. | |
| */ | |
| .nvtooltip.with-transitions, .with-transitions .nvtooltip { | |
| transition: opacity 50ms linear; | |
| -moz-transition: opacity 50ms linear; | |
| -webkit-transition: opacity 50ms linear; | |
| transition-delay: 200ms; | |
| -moz-transition-delay: 200ms; | |
| -webkit-transition-delay: 200ms; | |
| } | |
| .nvtooltip.x-nvtooltip, | |
| .nvtooltip.y-nvtooltip { | |
| padding: 8px; | |
| } | |
| .nvtooltip h3 { | |
| margin: 0; | |
| padding: 4px 14px; | |
| line-height: 18px; | |
| font-weight: normal; | |
| background-color: rgba(247,247,247,0.75); | |
| text-align: center; | |
| border-bottom: 1px solid #ebebeb; | |
| -webkit-border-radius: 5px 5px 0 0; | |
| -moz-border-radius: 5px 5px 0 0; | |
| border-radius: 1px 5px 0 0; | |
| } | |
| .nvtooltip p { | |
| margin: 0; | |
| padding: 5px 14px; | |
| text-align: center; | |
| } | |
| .nvtooltip span { | |
| display: inline-block; | |
| margin: 2px 0; | |
| } | |
| .nvtooltip table { | |
| margin: 6px; | |
| border-spacing:0; | |
| } | |
| .nvtooltip table td { | |
| padding: 2px 9px 2px 0; | |
| vertical-align: middle; | |
| } | |
| .nvtooltip table td.key { | |
| font-weight:normal; | |
| } | |
| .nvtooltip table td.value { | |
| text-align: right; | |
| font-weight: bold; | |
| } | |
| .nvtooltip table tr.highlight td { | |
| padding: 1px 9px 1px 0; | |
| border-bottom-style: solid; | |
| border-bottom-width: 1px; | |
| border-top-style: solid; | |
| border-top-width: 1px; | |
| } | |
| .nvtooltip table td.legend-color-guide div { | |
| width: 8px; | |
| height: 8px; | |
| vertical-align: middle; | |
| } | |
| .nvtooltip .footer { | |
| padding: 3px; | |
| text-align: center; | |
| } | |
| .nvtooltip-pending-removal { | |
| position: absolute; | |
| pointer-events: none; | |
| } | |
| .nvd3 text { | |
| font: normal 12px Arial; | |
| } | |
| .nvd3 .nv-background { | |
| fill: white; | |
| fill-opacity: 0; | |
| } | |
| .nvd3.nv-noData { | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| /********** | |
| * Brush | |
| */ | |
| .nv-brush .extent { | |
| fill-opacity: .125; | |
| shape-rendering: crispEdges; | |
| } | |
| /********** | |
| * Legend | |
| */ | |
| .nvd3 .nv-legend .nv-series { | |
| cursor: pointer; | |
| } | |
| .nvd3 .nv-legend .nv-disabled circle { | |
| fill-opacity: 0; | |
| } | |
| /********** | |
| * Axes | |
| */ | |
| .axis { | |
| opacity: 1; | |
| } | |
| .axis.nv-disabled { | |
| opacity: 0; | |
| } | |
| .nvd3 .nv-axis { | |
| pointer-events:none; | |
| } | |
| .nvd3 .nv-axis path { | |
| fill: none; | |
| stroke: #000; | |
| stroke-opacity: .75; | |
| shape-rendering: crispEdges; | |
| } | |
| .nvd3 .nv-axis path.domain { | |
| stroke-opacity: .75; | |
| } | |
| .nvd3 .nv-axis.nv-x path.domain { | |
| stroke-opacity: 0; | |
| } | |
| .nvd3 .nv-axis line { | |
| fill: none; | |
| stroke: #e5e5e5; | |
| shape-rendering: crispEdges; | |
| } | |
| .nvd3 .nv-axis .zero line, | |
| /*this selector may not be necessary*/ .nvd3 .nv-axis line.zero { | |
| stroke-opacity: .75; | |
| } | |
| .nvd3 .nv-axis .nv-axisMaxMin text { | |
| font-weight: bold; | |
| } | |
| .nvd3 .x .nv-axis .nv-axisMaxMin text, | |
| .nvd3 .x2 .nv-axis .nv-axisMaxMin text, | |
| .nvd3 .x3 .nv-axis .nv-axisMaxMin text { | |
| text-anchor: middle | |
| } | |
| /********** | |
| * Brush | |
| */ | |
| .nv-brush .resize path { | |
| fill: #eee; | |
| stroke: #666; | |
| } | |
| /********** | |
| * Bars | |
| */ | |
| .nvd3 .nv-bars .negative rect { | |
| zfill: brown; | |
| } | |
| .nvd3 .nv-bars rect { | |
| zfill: steelblue; | |
| fill-opacity: .75; | |
| transition: fill-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear; | |
| } | |
| .nvd3 .nv-bars rect.hover { | |
| fill-opacity: 1; | |
| } | |
| .nvd3 .nv-bars .hover rect { | |
| fill: lightblue; | |
| } | |
| .nvd3 .nv-bars text { | |
| fill: rgba(0,0,0,0); | |
| } | |
| .nvd3 .nv-bars .hover text { | |
| fill: rgba(0,0,0,1); | |
| } | |
| /********** | |
| * Bars | |
| */ | |
| .nvd3 .nv-multibar .nv-groups rect, | |
| .nvd3 .nv-multibarHorizontal .nv-groups rect, | |
| .nvd3 .nv-discretebar .nv-groups rect { | |
| stroke-opacity: 0; | |
| transition: fill-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear; | |
| } | |
| .nvd3 .nv-multibar .nv-groups rect:hover, | |
| .nvd3 .nv-multibarHorizontal .nv-groups rect:hover, | |
| .nvd3 .nv-discretebar .nv-groups rect:hover { | |
| fill-opacity: 1; | |
| } | |
| .nvd3 .nv-discretebar .nv-groups text, | |
| .nvd3 .nv-multibarHorizontal .nv-groups text { | |
| font-weight: bold; | |
| fill: rgba(0,0,0,1); | |
| stroke: rgba(0,0,0,0); | |
| } | |
| /*********** | |
| * Pie Chart | |
| */ | |
| .nvd3.nv-pie path { | |
| stroke-opacity: 0; | |
| transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| } | |
| .nvd3.nv-pie .nv-pie-title { | |
| font-size: 24px; | |
| fill: rgba(19, 196, 249, 0.59); | |
| } | |
| .nvd3.nv-pie .nv-slice text { | |
| stroke: #000; | |
| stroke-width: 0; | |
| } | |
| .nvd3.nv-pie path { | |
| stroke: #fff; | |
| stroke-width: 1px; | |
| stroke-opacity: 1; | |
| } | |
| .nvd3.nv-pie .hover path { | |
| fill-opacity: .7; | |
| } | |
| .nvd3.nv-pie .nv-label { | |
| pointer-events: none; | |
| } | |
| .nvd3.nv-pie .nv-label rect { | |
| fill-opacity: 0; | |
| stroke-opacity: 0; | |
| } | |
| /********** | |
| * Lines | |
| */ | |
| .nvd3 .nv-groups path.nv-line { | |
| fill: none; | |
| stroke-width: 1.5px; | |
| } | |
| .nvd3 .nv-groups path.nv-line.nv-thin-line { | |
| stroke-width: 1px; | |
| } | |
| .nvd3 .nv-groups path.nv-area { | |
| stroke: none; | |
| } | |
| .nvd3 .nv-line.hover path { | |
| stroke-width: 6px; | |
| } | |
| .nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point { | |
| fill-opacity: 0; | |
| stroke-opacity: 0; | |
| } | |
| .nvd3.nv-scatter.nv-single-point .nv-groups .nv-point { | |
| fill-opacity: .5 !important; | |
| stroke-opacity: .5 !important; | |
| } | |
| .with-transitions .nvd3 .nv-groups .nv-point { | |
| transition: stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear; | |
| } | |
| .nvd3.nv-scatter .nv-groups .nv-point.hover, | |
| .nvd3 .nv-groups .nv-point.hover { | |
| stroke-width: 7px; | |
| fill-opacity: .95 !important; | |
| stroke-opacity: .95 !important; | |
| } | |
| .nvd3 .nv-point-paths path { | |
| stroke: #aaa; | |
| stroke-opacity: 0; | |
| fill: #eee; | |
| fill-opacity: 0; | |
| } | |
| .nvd3 .nv-indexLine { | |
| cursor: ew-resize; | |
| } | |
| /********** | |
| * Distribution | |
| */ | |
| .nvd3 .nv-distribution { | |
| pointer-events: none; | |
| } | |
| /********** | |
| * Scatter | |
| */ | |
| .nvd3 .nv-groups .nv-point.hover { | |
| stroke-width: 20px; | |
| stroke-opacity: .5; | |
| } | |
| .nvd3 .nv-scatter .nv-point.hover { | |
| fill-opacity: 1; | |
| } | |
| /********** | |
| * Stacked Area | |
| */ | |
| .nvd3.nv-stackedarea path.nv-area { | |
| fill-opacity: .7; | |
| stroke-opacity: 0; | |
| transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; | |
| -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; | |
| -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear; | |
| } | |
| .nvd3.nv-stackedarea path.nv-area.hover { | |
| fill-opacity: .9; | |
| } | |
| .nvd3.nv-stackedarea .nv-groups .nv-point { | |
| stroke-opacity: 0; | |
| fill-opacity: 0; | |
| } | |
| /********** | |
| * Line Plus Bar | |
| */ | |
| .nvd3.nv-linePlusBar .nv-bar rect { | |
| fill-opacity: .75; | |
| } | |
| .nvd3.nv-linePlusBar .nv-bar rect:hover { | |
| fill-opacity: 1; | |
| } | |
| /********** | |
| * Bullet | |
| */ | |
| .nvd3.nv-bullet { font: 10px sans-serif; } | |
| .nvd3.nv-bullet .nv-measure { fill-opacity: .8; } | |
| .nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; } | |
| .nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; } | |
| .nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; } | |
| .nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; } | |
| .nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; } | |
| .nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; } | |
| .nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; } | |
| .nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; } | |
| .nvd3.nv-bullet .nv-subtitle { fill: #999; } | |
| .nvd3.nv-bullet .nv-range { | |
| fill: #bababa; | |
| fill-opacity: .4; | |
| } | |
| .nvd3.nv-bullet .nv-range:hover { | |
| fill-opacity: .7; | |
| } | |
| /********** | |
| * Sparkline | |
| */ | |
| .nvd3.nv-sparkline path { | |
| fill: none; | |
| } | |
| .nvd3.nv-sparklineplus g.nv-hoverValue { | |
| pointer-events: none; | |
| } | |
| .nvd3.nv-sparklineplus .nv-hoverValue line { | |
| stroke: #333; | |
| stroke-width: 1.5px; | |
| } | |
| .nvd3.nv-sparklineplus, | |
| .nvd3.nv-sparklineplus g { | |
| pointer-events: all; | |
| } | |
| .nvd3 .nv-hoverArea { | |
| fill-opacity: 0; | |
| stroke-opacity: 0; | |
| } | |
| .nvd3.nv-sparklineplus .nv-xValue, | |
| .nvd3.nv-sparklineplus .nv-yValue { | |
| stroke-width: 0; | |
| font-size: .9em; | |
| font-weight: normal; | |
| } | |
| .nvd3.nv-sparklineplus .nv-yValue { | |
| stroke: #f66; | |
| } | |
| .nvd3.nv-sparklineplus .nv-maxValue { | |
| stroke: #2ca02c; | |
| fill: #2ca02c; | |
| } | |
| .nvd3.nv-sparklineplus .nv-minValue { | |
| stroke: #d62728; | |
| fill: #d62728; | |
| } | |
| .nvd3.nv-sparklineplus .nv-currentValue { | |
| font-weight: bold; | |
| font-size: 1.1em; | |
| } | |
| /********** | |
| * historical stock | |
| */ | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick { | |
| stroke-width: 1px; | |
| } | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover { | |
| stroke-width: 2px; | |
| } | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive { | |
| stroke: #2ca02c; | |
| } | |
| .nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative { | |
| stroke: #d62728; | |
| } | |
| .nvd3.nv-historicalStockChart .nv-axis .nv-axislabel { | |
| font-weight: bold; | |
| } | |
| .nvd3.nv-historicalStockChart .nv-dragTarget { | |
| fill-opacity: 0; | |
| stroke: none; | |
| cursor: move; | |
| } | |
| .nvd3 .nv-brush .extent { | |
| fill-opacity: 0 !important; | |
| } | |
| .nvd3 .nv-brushBackground rect { | |
| stroke: #000; | |
| stroke-width: .4; | |
| fill: #fff; | |
| fill-opacity: .7; | |
| } | |
| /********** | |
| * Parallel Coordinates | |
| */ | |
| .nvd3 .background path { | |
| fill: none; | |
| stroke: #EEE; | |
| stroke-opacity: .4; | |
| shape-rendering: crispEdges; | |
| } | |
| .nvd3 .foreground path { | |
| fill: none; | |
| stroke-opacity: .7; | |
| } | |
| .nvd3 .brush .extent { | |
| fill-opacity: .3; | |
| stroke: #fff; | |
| shape-rendering: crispEdges; | |
| } | |
| .nvd3 .axis line, .axis path { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .nvd3 .axis text { | |
| text-shadow: 0 1px 0 #fff; | |
| } | |
| /**** | |
| Interactive Layer | |
| */ | |
| .nvd3 .nv-interactiveGuideLine { | |
| pointer-events:none; | |
| } | |
| .nvd3 line.nv-guideline { | |
| stroke: #ccc; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment