vivianaaai@qq.com

不规则八边形边上绘制柱形图

This example draws an irregular octagon on an SVG canvas over a background image, then places a blue rotated rectangle at the midpoint of each edge to represent a bar chart. The rectangle’s rotation angle is computed from the edge’s slope using `Math.atan2`, and each rectangle is positioned via the `transform` attribute with `rotate`. The code uses D3 v6 to append SVG elements, including a polygon for the octagon and rects for the bars, with hardcoded vertex coordinates and a fixed rectangle width and height.

Nov 21, 2023

1120所有堆叠图（右转-过街）

This stacked bar chart visualizes traffic flow across 27 lanes at an intersection, showing counts of pedestrians, non-motorized vehicles, and motor vehicles. The SVG rendering uses `d3.stack()` to create stacked segments for each lane category, with `d3.scaleBand` positioning the bars and `d3.scaleOrdinal` assigning colors from `schemeSet3`. A tooltip appears on mouseover, displaying the percentage each category contributes to the lane’s total. The data is embedded directly in the code, and the visualization includes axis labels and a custom legend.

Nov 20, 2023

在八边形边上绘制柱形图

This example renders a red octagon centered in an SVG canvas and draws individual bar charts along each of its eight edges. The bars are positioned at the midpoint of every polygon side and rotated to align with the edge’s orientation. Using D3 v6, the code computes the octagon’s vertices with a custom polygonPoints function, derives side midpoints, and appends SVG rect elements for each bar. It also demonstrates stacked bars via d3.stack(), though the primary visible output uses a fixed array of heights. The bars are styled with red fills and rotated around their base points.

Nov 20, 2023

1117所有堆叠图

This stacked bar chart visualizes traffic counts across 28 lane segments, categorizing volumes into pedestrians, non-motorized vehicles, and motor vehicles by lane ID. Animated on page load, hovering over any bar segment reveals a tooltip displaying the exact count and percentage share of that category within the total for its lane. Built with React and D3 v6, it uses `d3.stack()` to generate the layered series, `d3.scaleBand()` and `d3.scaleLinear()` for positioning, and `d3.scaleOrdinal()` with `d3.schemeSet3` for color encoding. A custom HTML legend and SVG-rendered axes complete the visualization.

Nov 17, 2023

所有堆叠图

This stacked bar chart visualizes two lane categories, comparing counts of pedestrians, non-motorized vehicles, and motor vehicles. Built with D3 v6 and React, it uses `d3.stack()` to compute stacked series, `d3.scaleBand` with padding for the x-axis, and a linear scale for y-values. An HTML legend maps colors via `d3.schemeSet3`, while SVG rectangles render each segment, and axes are added through `d3.axisLeft` and `d3.axisBottom`.

Nov 17, 2023

1116西北crosswalk堆叠图

This visualization displays a stacked bar chart of traffic counts for a single crosswalk lane, breaking down volumes into pedestrians, non-motorized vehicles, and motor vehicles. The single bar shows 119 pedestrians, 17 non-motorized vehicles, and 0 motor vehicles, with stacked segments colored via d3.schemeSet3. Built with D3 v6 and rendered as SVG, the code uses d3.stack(), d3.scaleBand(), d3.scaleLinear(), and d3.axisLeft/axisBottom to construct the chart. A separate HTML legend is generated using D3 selections with colored swatches. The example appears to derive from a crosswalk traffic study dataset.

Nov 17, 2023

1116西南crosswalk堆叠图

This stacked bar chart displays the count of pedestrians, non-motorized vehicles, and motor vehicles at a single crosswalk location (ID 0), with each category represented by a colored segment in the bar. The visualization uses D3.js v6 within an SVG canvas, employing the `d3.stack` and `d3.scaleBand` APIs to compute and position the stacked segments, while a CSS-based legend, built with `d3.select` and `.enter()`, identifies the three categories. The data is hardcoded in the index.html file, and the chart renders with labeled axes and a fixed 1600x800 viewport.

1116东南crosswalk堆叠图

This example shows how traffic counts for pedestrians, bicycles, and motor vehicles at a single crosswalk are visualized as a stacked bar chart. A single bar represents the total count for one lane, with each stacked segment colored according to category using D3’s `scaleOrdinal` and `schemeSet3`. The chart uses `d3.stack()` to compute the stacked series, `scaleBand` for the x-axis, and `scaleLinear` for the y-axis. The legend is built with plain HTML divs, while axes are rendered via `d3.axisLeft` and `d3.axisBottom`.

1116东北crosswalk堆叠图

This example visualizes a stacked bar chart of traffic categories—pedestrians, non-motorized vehicles, and motor vehicles—across a single crosswalk lane. A stacked series shows each category’s count as a colored segment, with the total height representing the overall value. The visualization uses D3 v6’s `d3.stack()` to transform the data into stacked series, `d3.scaleBand()` for the categorical x-axis, and `d3.scaleLinear()` for the y-axis. It renders as an SVG, with a custom legend built from D3 selections and color mapping via `d3.scaleOrdinal()` with `d3.schemeSet3`.

1115北进口道堆叠图

This visualization uses a stacked bar chart to show counts of pedestrians, non-motorized vehicles, and motor vehicles across six lane IDs (0-5) at a northern entrance. The chart displays the data with each lane as a category on the x-axis and the stacked categories as colored segments, with a legend below. The implementation uses D3 v6 in a React framework, rendering SVG elements. The code employs `d3.stack` to create the stacked series, `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeSet3` for colors. Data is hardcoded in the `naiveData` array, and axes are drawn using `d3.axisLeft` and `d3.axisBottom`.

1115南进口道堆叠图

This visualization shows a stacked bar chart of traffic counts across six lane positions on a southbound approach, broken down by traveler type: pedestrians, non-motorized vehicles, and motor vehicles. The data is hardcoded in the script. It uses D3 v6’s `d3.stack()` and `d3.scaleBand()` to arrange the categorical lanes, with `d3.scaleLinear()` mapping the stacked heights. Color is assigned via `d3.scaleOrdinal()` with `d3.schemeSet3`, and the SVG renders the bars, axes, and a custom HTML legend.

1116东南基础设施堆叠图

This visualization presents a stacked bar chart of pedestrian, non-motorized vehicle, and motor vehicle counts for a single lane (laneid 0), using a naive dataset embedded in the code. The chart uses D3 v6 to stack the three categorical keys via `d3.stack`, scales them with `d3.scaleLinear` and `d3.scaleBand`, and colors each segment with `d3.schemeSet3`. An HTML legend is built with D3 selections, and axes are rendered with `d3.axisLeft` and `d3.axisBottom`. The SVG rendering includes margins and a main group for coordinate placement.

1116东北基础设施堆叠图

This visualization shows the composition of pedestrian, non-motorized vehicle, and motorized vehicle counts for a single road lane, with each category stacked as a colored segment. The chart uses D3 v6’s `d3.stack()` to generate stacked series, rendered as SVG rectangles via a data join. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while a categorical color scale from `d3.scaleOrdinal` with `d3.schemeSet3` distinguishes the three transport modes. The fixed SVG size and margins are set explicitly in the markup, and the data is hardcoded rather than loaded from an external file.

1115东进口道堆叠图

This stacked bar chart visualizes traffic composition across six lane IDs at an intersection, breaking down counts of pedestrians, non-motorized vehicles, and motor vehicles. The chart uses D3 v6’s `d3.stack()` with `stackOrderNone` to layer the three categories, while `d3.scaleBand` and `d3.scaleLinear` position bars and encode counts. Rendered as an SVG within a React framework, the visualization applies `d3.schemeSet3` for categorical colors and labels axes with `d3.axisLeft` and `d3.axisBottom`. Data includes lane 4 as the busiest, with mixed traffic, and lane 5 empty.

1115西进口道堆叠图

This stacked bar chart visualizes traffic volume at the west entrance of Road 1115, broken down by lane and user type (pedestrians, non-motorized vehicles, and motor vehicles). The SVG rendering uses d3.stack to create the layered segments, with d3.scaleBand for lane positioning, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with the schemeSet3 color palette. Each lane’s stacked segments show the proportional counts of three transportation modes, using d3.axisLeft and d3.axisBottom to display the scales.

1114东进口道机动车

This visualization displays traffic flow counts for motor vehicles at the eastern entrance of road 1114, using a horizontal bar chart where six lanes are plotted against their respective vehicle counts. The bars extend leftward from the right-aligned axis, with values scaled by a linear x-scale that reverses the typical range direction. The chart uses D3.js v6 to render SVG elements, with d3.axisRight and d3.axisBottom for the axes. The accompanying x-axis is labeled “车流量” (traffic flow).

1114

This example visualizes vehicle flow counts across six categories (labeled 0–5) using a horizontal bar chart, with bars right-aligned and colored green. The chart is rendered as an SVG via D3 v6 within a React framework, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Both axes are positioned on the right and bottom edges, with axis labels and tick text styled for readability. The data is hard-coded in the script, and the layout includes margins and a main group for organized rendering.

1114西进口道机动车

A horizontal bar chart displays the vehicle flow values for six time intervals (0 through 5) at the "1114西进口道机动车" intersection, using green bars with an opacity of 0.8. The SVG rendering is built with D3 v6, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisLeft`/`d3.axisBottom` to generate axes. The hardcoded dataset includes values from 18 to 80.

1115南进口道机动车

This example displays a bar chart of vehicle counts across six time intervals, labeled 0 through 5, for the "1115南进口道" (south entrance road). The green bars, rendered via D3’s `scaleBand` and `scaleLinear`, show counts ranging from 1 to 56. The chart uses D3 v6’s `axisBottom` and `axisLeft` to generate axes, with all tick labels enlarged to 2em. The SVG is created directly in HTML, with the main chart group offset by margins, and includes a text label for “车流量” (traffic flow).

1115北进口道机动车

This example shows traffic flow at the north entrance of road 1115, with six categories labeled 0 through 5 and their corresponding vehicle counts (ranging from 1 to 44). Green bars represent each value, with the chart oriented so bars extend rightward from the y-axis. The visualization uses D3 v6 with SVG rendering, employing `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `axisTop` and `axisRight` to display axes. Text labels are enlarged using D3 selections, and a custom "车流量" (traffic flow) title is added.

1114StackBarChart

This stacked bar chart displays four months of fruit production data, with apples, bananas, cherries, and dates layered from bottom to top. The visualization uses d3.stack() to transform the input dataset into stacked series, then renders each category as a colored SVG rectangle within a group using a data join. Axes are generated with d3.axisLeft and d3.axisBottom, with the x-axis formatted as month-day labels via d3.timeFormat. The chart uses a linear scale for the y-axis and a band scale for the x-axis, with a categorical color scale applying the d3.schemeSet3 palette to distinguish fruit types.

Nov 14, 2023

Line Chart

This line chart visualizes monthly shampoo sales over a one-year period, with the x-axis representing dates and the y-axis showing sales amounts. The data is loaded from a CSV file containing daily sales records. The visualization uses D3.js v6 within an HTML page rendered as SVG, employing d3.scaleTime and d3.scaleLinear for axis scaling, d3.line with curveLinear to draw the path, and d3.axisBottom and d3.axisLeft for the axes. A red line traces the sales trend across the time series.

Arc

This example visualizes the four possible arc paths defined by the SVG elliptical arc command, using D3.js v6 to generate paths from a fixed start point, specified radii, a rotation angle, and four combinations of the large-arc and sweep flags. Each path is rendered in a distinct color from `d3.schemeSet3` and styled with a thick stroke, without any fill. The arcs are drawn in an SVG container and offset via a transformation, demonstrating the geometric differences between the arc flag choices in a clean, minimal setup. The dataset `socfb-Caltech36.json` is referenced but not used in the rendering logic.

Ribbon

This visualization uses hand-coded angular paths to draw colored ribbons on an SVG canvas. Five semi-transparent ribbon shapes are defined with start and end angles for source and target arcs, then rendered using a custom `ribbon()` function. The paths are filled with distinct colors from `d3.schemeSet3` and positioned at the center of a 1600x800 viewport. While the code references a Caltech36 social network dataset, the current example displays stylized geometric arcs rather than actual network data, demonstrating the possible output of the `d3.ribbon()` API.

Force

This example visualizes a social network from the Caltech36 dataset, representing individuals as nodes and their connections as links in a force-directed graph. Node colors are assigned using a sequential rainbow scale based on index, and the layout is computed with d3.forceSimulation, incorporating many-body, center, and link forces. The SVG rendering updates positions on each tick, showing clusters and relationships within the network data loaded via d3.json.

Chord

This visualization uses a chord diagram to display the pairwise relationships in a 10x10 numeric matrix, with each node representing a class from a CSV file. The diagram shows ribbons connecting the nodes, where each ribbon’s color reflects the source or target node based on which has a higher value, and its opacity is fixed at 0.5. The code loads data with `d3.csv` and `d3.json`, then uses `d3.chord` to compute the chord layout, `d3.ribbon` for the connecting paths, and `d3.arc` for the outer arcs, all rendered as SVG within a React-compatible HTML page using D3 v6.

Arc

This visualization displays the character network from Les Misérables as nodes arranged along a horizontal line, with curved arcs connecting interacting characters. Node color distinguishes character groups, while link thickness and color encode interaction strength using a sequential color scale. The D3.js v6 code loads CSV data files for nodes and links, maps link endpoints to their corresponding node objects, and renders the network using SVG circles, paths, and text labels.

Tree

This example visualizes the hierarchical structure of Xinjiang’s administrative divisions and their populations using a vertical tree layout. Each node is a circle colored by its top-level prefecture, with links drawn via `d3.linkVertical` and text labels rotated vertically. The code uses `d3.hierarchy` and `d3.tree` to compute positions, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders output as SVG. Population data comes from the embedded `xinjiang.json` file.

SunBurst

This sunburst chart visualizes the population distribution of Xinjiang’s administrative regions, using nested arcs to show hierarchy from the province level down to districts and counties. The code relies on d3.arc for the ring segments, d3.partition with a size of [2*Math.PI, 500] to compute the layout, and d3.hierarchy to structure the JSON data. Each segment’s fill color is derived from the top-level region via a scaleOrdinal palette, and text labels are rotated and positioned to fit within the arcs.

LinkHorizontalVertical

The example distinguishes d3.linkHorizontal and d3.linkVertical, two D3 v6 shape generators for curved node-link paths. It draws four SVG paths connecting fixed source and target points: two horizontal and two vertical variants, with green and steelblue strokes marking each type. A legend with colored rectangles labels the two generators. The code renders to an SVG canvas using React, with path geometry computed from explicit coordinate objects.

Icicle

This icicle chart visualizes the population hierarchy of Xinjiang, China, using a d3.partition layout. The data is loaded from a JSON file and structured with d3.hierarchy, with node sizes proportional to population values. Each rectangle is colored by its top-level region using a d3.scaleOrdinal with the schemeCategory10 palette, while text labels appear on larger nodes. The visualization renders in SVG, with both rectangles and labels positioned according to the partition’s computed coordinates.

Force

This visualization shows a force-directed network graph of social connections from the Caltech36 Facebook dataset, rendered as SVG circles and lines. The simulation uses `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceCenter`, and `d3.forceLink` to position nodes colored with a rainbow sequential scale. The code loads node and link data from a local JSON file, then applies ticked updates to redraw node positions and link endpoints as the layout stabilizes.

StackBarChart

A stacked bar chart displays four months of fruit production data, with each bar segmented into stacked categories (apples, bananas, cherries, dates) and colored using the d3.schemeSet3 ordinal color scheme. The chart uses d3.stack() to compute cumulative values for the stacked segments, then renders the bars as SVG rectangles via a data join with g and rect elements. The x-axis uses a time scale formatted with d3.timeFormat, while the y-axis uses a linear scale with .nice() rounding. Axes are drawn with d3.axisLeft and d3.axisBottom, and the chart is set within a 1600x800 SVG element.

ThemeRiver

This visualization shows the average monthly player counts for several popular games on Steam from 2015 to 2021. The data is displayed as a stacked area chart called a ThemeRiver, using color-coded streams that flow over time to reveal trends and comparisons in player engagement. The visualization is rendered with SVG using D3 v6, leveraging `d3.stack`, `d3.area`, and `d3.curveCardinal` for smooth curves. The underlying data comes from the SteamCharts.csv file, with dates parsed using moment.js before being mapped to scales.

Events

Five gray circles demonstrate different D3 event bindings: the first changes color on click, the second on mouseover, the third on mouseout, and the fifth on contextmenu. A fourth circle, given an id, moves via WASD key presses using d3.transition() with a duration of 1000ms. The circles render as SVG, sized 1600 by 800, with random colors from d3.interpolateRainbow. Event handlers use d3.select and event.currentTarget to update fill attributes.

InteractionBasic

This example shows a single SVG rectangle that changes color each time it is clicked. It demonstrates how to attach a basic interaction handler using D3’s `selection.on` method. The code loads D3 v6 from a CDN and renders the rectangle as inline SVG with a fixed size and position. Upon click, the rectangle’s fill is set to a random value from `d3.interpolateRainbow`, cycling through the color spectrum.

BeiJing

This example visualizes the administrative districts of Beijing using GeoJSON data loaded from `beijing.json`. It renders a map with the districts as white polygons outlined in black, and each district displays its name in a tooltip on mouseover. The visualization uses D3 v6 with a `d3.geoNaturalEarth1` projection fitted to the SVG canvas via `projection.fitSize`, and paths are generated with `d3.geoPath`. Tooltips are implemented with the `d3-tip` library, triggered by `mouseover` and `mouseout` events.

vol

This visualization displays a grid of 20 colorful rectangles arranged in a responsive layout, where each rectangle’s height and width are fixed but their positions depend on the window width. The SVG renders on a warm beige background, with each shape colored by cycling through a palette of six hues based on the rectangle’s index. The code uses D3 v6 to select the chart container, append an SVG element, and bind data via the `.join()` method. The number of columns is computed from the available width, creating a dynamic arrangement that adapts to the viewport.

Contour

A contour map visualizes temperature change across U.S. climate divisions, with colored contour bands overlaid on state boundaries. The visualization uses d3.geoVoronoi to assign grid points to climate divisions, d3.contourDensity to generate contours from weighted point data, and d3.geoPath with an AlbersUSA projection to render geographic features. Temperature values from a CSV file drive contour density, while a diverging color scale maps contour thresholds.

BeiJing

This example visualizes the administrative districts of Beijing using a GeoJSON dataset. It renders the district boundaries as SVG paths on a 1600x800 canvas, with each polygon outlined in black and left unfilled. The visualization uses D3.js v6, specifically leveraging `d3.geoNaturalEarth1()` for map projection, `d3.geoPath()` for converting geographic coordinates to SVG path data, and `d3.json()` for loading external data. The code also includes commented-out alternatives for other projections like Mercator and Mollweide, as well as a disabled label overlay.

Volcano

This visualization animates contour lines of volcano elevation data, smoothly interpolating between threshold boundaries to create a flowing, morphing effect over a geographic projection. The contours are generated using `d3.contours` from a grid of elevation values in `volcano.json`, projected with `d3.geoNaturalEarth1` and rendered as SVG paths via `d3.geoPath`. A sequential plasma color scale encodes elevation values, while an infinite loop transitions path shapes and fills every 200 milliseconds using `d3.transition`. The animation cycles through paired thresholds, creating continuous, fluid distortions of the terrain.

Pie Chart

This pie chart visualizes the population distribution across 14 cities in Liaoning Province, China, using data from a CSV file. The chart renders as an SVG with donut-style arcs, where each slice’s arc length corresponds to a city’s population value, and city names are placed outside the ring using `d3.arc` and centroid positioning. The code uses `d3.pie()` to compute arc angles, `d3.scaleOrdinal` with `d3.schemeSet2` and `d3.schemeSet3` for colors, and `d3.arc().innerRadius(60).outerRadius(260)` to generate the paths, with labels positioned via an outer radius of 280.

Untitled

This example animates the morphing of one SVG path into another using D3’s `transition.attrTween` and a custom path interpolation function. The path alternates between two cubic Bézier shapes in an infinite loop, with each transition lasting two seconds and using uniform distance sampling for smooth point-by-point interpolation. The code references `d3.select`, `d3.active`, and `getTotalLength`, while importing D3 v6 from a CDN. The included `province.csv` file contains COVID-19 statistics for Chinese provinces, though it is not loaded or visualized in the rendered output.

Line

This visualization displays the progression of COVID-19 cases across multiple Chinese provinces from January to February 2020. It animates line curves for each province, showing the count of existing confirmed cases over time, with provinces added sequentially. The code uses D3 v6 with a time-scale for the x-axis and a reversed linear scale for the y-axis, rendering SVG paths with cardinal spline curves. Data is loaded from a CSV file, and each province’s line is animated into place using d3 transitions over two seconds.

hello path

This example demonstrates two fundamental D3.js path generators: `d3.line` and `d3.arc`. A black polyline connects four data points, with commented-out curve options like `d3.curveCardinal` and `d3.curveBasis` showing alternative interpolation methods. Beside it, three arc segments rendered via `d3.arc` form a partial donut chart with varying inner radii, fill colors, and a pad angle, all drawn as SVG paths on a 1600x800 canvas.

D3Path

D3Path demonstrates two fundamental D3.js geometry primitives rendered as SVG paths. The left side plots a polyline through four explicit data points using `d3.line()`, with commented-out curve options (`d3.curveCardinal`, `d3.curveBasis`, etc.) illustrating alternative interpolation strategies. The right side draws three concentric arc segments using `d3.arc()` with varying radii (`innerRadius`, `outerRadius`), angles, and padding (`padAngle`) to produce multi-colored pie-like wedges. The example uses hardcoded JavaScript arrays for data and D3 v6 directly from the unpkg CDN, with an SVG canvas sized 1600x800, showcasing basic path construction without external styling.

D3 Curve Explorer

This interactive example shows how different D3 curve types interpolate the same set of draggable points, with buttons to toggle curve families and variants like `curveLinear`, `curveBasis`, `curveBundle`, and `curveCardinal` at various parameters. A sidebar displays a description of the active curve. Users can drag points, add new points via the plus icon, and remove them with the minus icon, all rendered as SVG elements. The code uses D3 v4’s shape API to generate the path data and event handlers for mouse interaction.

Ease

Ten colored circles bounce horizontally across an SVG canvas, each demonstrating a different D3 easing function: elastic, bounce, linear, sine, quadratic, cubic, poly, circle, exponential, and back. The animation repeats continuously, with each circle labeled by its easing type. The visualization uses D3 v6 transitions with the `.ease()` method and `d3.ease*` functions, rendered in an HTML page with JavaScript.

Scatter-Animation

A scatterplot animates the daily progression of COVID-19 cases across Hubei, China, with each circle representing a region’s cumulative confirmed cases versus new cases on a log scale. The visualization uses d3.v6 with SVG and transitions to move points between dates, while a legend identifies regions. Data comes from a CSV file tracking metrics like confirmed, cured, and dead counts. Axes, labels, and a date display update over time, driven by the `renderupdate` function and D3’s transition API.

Scatter-Animation

Assignment1

This bar chart displays global sales in millions for 29 gaming platforms, ranked by platform name. The visualization uses D3 v6 to load a CSV dataset, scale the data with `d3.scaleLinear` and `d3.scaleBand`, and render the bars as SVG rectangles. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with data joined via D3’s selection methods. The chart highlights platform sales variation, with PS2 leading at over 1.2 billion units.

BarChart!

This bar chart displays the values of 14 named members of the CSCG group, with each name on the y-axis and its corresponding numeric value extending horizontally on the x-axis. The visualization uses D3 v6 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and `d3.axisLeft` and `d3.axisBottom` to generate axes. Data is hard-coded as an array of objects, and each bar is drawn as a green rectangle with 0.8 opacity, while axis tick labels are enlarged via a D3 selection.

Nov 6, 2023

D3.js 教程

This example generates a colorful grid of rectangles using D3.js. The visualization displays twenty rectangles arranged in a responsive layout, with each rectangle's fill color cycling through a palette of six distinct colors. The code leverages the D3.js library (v6) to select the chart container, append an SVG element, and join data to SVG rectangles using the `selectAll`, `data`, and `join` methods. The SVG renders at half the window's width and full height, with a light cream background.

Nov 6, 2023

Fork of Selecting a Year on a Line Chart

This visualization displays population trends over time for multiple world regions, using a line chart where each colored line represents a different region. Users can hover over the chart to select a specific year, which is marked by a vertical line and updates the visualization accordingly. The implementation uses D3 v5 with SVG rendering, employing scales like `scaleTime` and `scaleLinear`, the `line` generator with `curveBasis`, and a `nest` operation to group data by region. Data comes from UN population estimates and medium variant projections, processed with the `csv` loader.

Fork of Choropleth Map

This choropleth map colors world countries by economic classification using a spectral color scale, with a legend showing the ordinal categories. The map uses the Natural Earth dataset via TopoJSON and d3-geo's geoNaturalEarth1 projection. Users can zoom and pan through d3.zoom, and hovering highlights countries in red. The color legend is built with custom SVG components, while the map itself renders using the geoPath generator with tsv metadata joined to the geometry.

Fork of Melting Data for Multiple Lines

This chart displays population over time by region, with multiple colored lines showing changes from 1950 to 2100. A legend on the right identifies each region. The visualization uses d3.line with curveBasis for smooth paths, d3.scaleTime and d3.scaleLinear for axes, and d3.nest to group data by region. Data comes from UN population estimates and medium variant projections, processed through a custom melt function. The color legend is rendered using a custom colorLegend module.

Fork of Line Chart with Multiple Lines

This visualization shows one week of temperature data in cities around the world, plotted as multiple smoothed lines using temperature over time. Each city is assigned a distinct color, with a color legend on the right and axis labels for time and temperature. The code uses `d3.csv` to load data from the Data Canvas - Sense Your City dataset, then applies `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.nest`, and `d3.line` with `curveBasis` to generate the SVG paths. Custom functions handle the color legend and axis styling.

Fork of Circles on a Map

This visualization displays global population by country using circles sized with a square-root scale, projected onto a natural Earth map with pan and zoom. Hovering reveals country names and population values, while missing data appears in red. Built with D3 v5, it uses `geoPath`, `scaleSqrt`, and `geoNaturalEarth1` for map generation, and a custom size legend for circle scaling. Population data comes from a UN CSV file, joined with TopoJSON country geometries.

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes automobile data from the UCI Machine Learning Repository’s Auto MPG dataset. Users select which columns to map to the X and Y axes via dropdown menus built with a reusable `dropdownMenu` function. The visualization uses d3.v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for axes, and renders SVG circles with a 2-second animated transition that staggers each point’s appearance. Attribute mappings update dynamically when menu selections change, leveraging D3’s data joins and the `transition().delay()` method.

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic classifications with an interactive color legend that filters countries by category. Clicking a legend item highlights matching countries while dimming others, and clicking again removes the filter. The map uses D3 v5 with `geoNaturalEarth1` projection, `geoPath`, and zoom behavior, while the legend leverages `scaleOrdinal` with `schemeSpectral` colors. Data comes from the World Atlas TopoJSON and TSV files, rendered as SVG with hover tooltips showing country names and values.

Fork of Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend displays circles for apple, lemon, lime, and orange, while the size legend uses a square-root scale with five ticks. Both use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with `selection.merge` to update entries efficiently. The components are defined as JavaScript modules and called via `.call()`, with styling applied through CSS classes.

Color and Size Legends

This example demonstrates how to build interactive legends for ordinal color scales, displaying circles and labels for each category. It uses D3 v5’s `scaleOrdinal` to map fruit types to colors, with a custom `colorLegend` function that appends SVG groups, circles, and text elements. The legend positions items horizontally based on index and vertically centered, with the color scale domain defining the data categories. The code also includes a YouTube video link in the README for additional guidance.

Fork of World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and sub-region, as a horizontal tree diagram. The SVG rendering uses the D3.js library’s `tree` layout, `hierarchy`, and `linkHorizontal` components to position nodes and draw connecting paths. Country names appear as text labels, with font size decreasing at deeper levels, and an interactive `zoom` feature allows users to pan and scale the view. Data is loaded from a local `data.json` file, and the styling is applied via CSS, including a Playfair Display serif font.