謝

謝惠喻

@EvaYuu·4 public vizzes

Fork of D3 Starter

This example demonstrates a straightforward color legend using D3's ordinal scale, displaying three categories—blueberries, oranges, and apples—each assigned a color from the `d3.schemeCategory10` palette. The visualization renders swatches and labels via the `Swatches` function, which builds an HTML structure with inline styles for swatch dimensions and text formatting. The code imports `select` from D3 and applies the `swatches` helper to generate the legend, relying on D3 v7 loaded from a CDN. The page itself is minimal, centering the legend with a large font size, showcasing a simple starter template for D3-based data displays.

Oct 15, 2023

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career-related data across grouped categories, with each cell colored on a scale from 1 to 100 using the `d3.scaleSequential` interpolator `d3.interpolateInferno`. Rows and columns are defined by the `group` and `variable` fields from the CSV data, rendered as an SVG via D3 v4. Hovering a cell triggers a custom tooltip showing the exact value, while the chart includes axis labels, a title, and a subtitle. The code loads data from a remote GitHub CSV source.

Oct 8, 2023

Loading thumbnail…

Fork of HeatMap: Career Data

This heatmap visualizes career-related data across two categorical dimensions, with each cell’s color intensity mapped to a numeric value using a sequential Inferno color scale. The chart is built with D3 v4, rendering an SVG grid where row and column labels are derived from the dataset’s `group` and `variable` fields. Interactive tooltips display the exact cell value on hover, while the code relies on `d3.scaleBand` for axes, `d3.scaleSequential` for coloring, and `d3.interpolateInferno` for the palette, sourcing data from a raw GitHub CSV file.

Oct 8, 2023

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example uses SVG and CSS to draw a single static shape: a yellow circle with a black outline, centered within a 960 by 500 pixel canvas. The underlying JavaScript, built with d3.v7, leverages the `select` and `append` methods from the d3 library to programmatically create the circle. The circle’s radius is set to half the SVG’s height, and its horizontal and vertical positions are calculated from the SVG’s width and height attributes, which are read and converted using `parseFloat`. Styling is applied via the `attr` method for fill color and stroke, resulting in a simple geometric visualization.

Sep 18, 2023