shanLU999

@shanLU999·14 public vizzes

Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes the proportion of full versus not-full scores from a CSV dataset, displaying each category’s label on its slice and a percentage tooltip on hover. Built with D3 v5, it uses `pie()` and `arc()` to generate the chart, `scaleOrdinal` for colors, and `csv()` to load the data. Mouseover events trigger a tooltip showing the computed percentage, while hover effects increase slice opacity.

May 27, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This fork of a bar chart visualizes the population of ten countries using data from the United Nations’ 2017 World Population Prospects. The chart uses d3.scaleLinear and d3.scaleBand to map population values to horizontal bar lengths and country names to the vertical axis. Rendered as SVG, it applies axis functions from d3, and the data is loaded from a CSV file. The bars are styled with a steelblue fill.

May 27, 2021

Loading thumbnail…

Fork of Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The chart uses a linear scale for the population values and a band scale for the country labels, with bars rendered as SVG rectangles. The code employs d3.scaleLinear, d3.scaleBand, d3.axisLeft, d3.axisBottom, and d3.csv to load and process the dataset. The axes are styled by removing the domain and tick lines, and the chart includes a title annotation.

May 27, 2021

Loading thumbnail…

Fork of playing with json

This visualization displays cricket batting statistics from a T20 match between Sri Lanka and New Zealand. It uses D3.js v5 (including `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, `d3.axisBottom`, `d3.schemePiYG`, and `d3.scaleSequential`) to render an SVG. Horizontal bars represent each batsman's innings, positioned by their first ball faced and colored by strike rate. Circles mark the last ball faced. The chart includes axis labels and text annotations for player names, runs, and strike rate. Data is loaded from a CSV file.

May 27, 2021

Loading thumbnail…

Fork of Fork of Gender - Version 1.2

This sunburst chart visualizes the post-high-school pathways of male and female participants, showing the hierarchical flow from initial status through subsequent activities like military service, school, work, or unknown. A dropdown menu switches between the two separate JSON data files. Built with D3 v4, the visualization uses `d3.partition`, `d3.arc`, and `d3.hierarchy` to compute the ring layout, with interactive breadcrumb navigation and mouseover highlighting that displays percentages and raw counts for each path segment.

May 27, 2021

Loading thumbnail…

Fork of Gender - Version 1.2

This interactive sunburst chart visualizes post-high-school paths for males and females, showing the distribution of sequences through Military, School, Work, or NA categories. A dropdown menu switches between two JSON datasets, redrawing the chart with d3.partition and d3.arc. Hovering over a segment highlights its ancestors, updates a breadcrumb trail, and displays the percentage and raw count of participants. The visualization uses D3 v4, jQuery, and custom CSS for styling and layout.

May 27, 2021

Loading thumbnail…

Students Grades of Bar Chart

This horizontal bar chart displays student grades, with each student’s name on the y-axis and their corresponding numerical grade on the x-axis. The visualization uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG bars. Data is loaded from a CSV file, and interactive features include tooltips on mouseover and an alert on click, triggered via `select` and event listeners. Grid lines and axis labels are conditionally configured through a chart configuration object.

May 26, 2021

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart displays the proportion of three project statuses—Not started, Started but not completed, and Completed—using a color-coded SVG pie layout. Hovering over a slice highlights it and reveals a tooltip showing the exact percentage of that status. The visualization uses d3.pie and d3.arc to generate the donut geometry, with d3.scaleOrdinal mapping status names to colors. Data is loaded from a CSV file, and mouseover events update the tooltip’s position and computed percentage.

May 26, 2021

Loading thumbnail…

Fork of Customizing Axes

A horizontal bar chart displays the populations of the top ten most populous countries, using 2018 UN estimates, with each bar colored by a country-specific hex or named color. The visualization employs d3.csv to load the data, d3.scaleLinear for the population axis, d3.scaleBand for country categories, and d3.axisLeft/d3.axisBottom with tick formatting to abbreviate large numbers. SVG rectangles are appended and sized by the scales, with gridlines and a custom axis label, all styled via external CSS.

May 26, 2021

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

A React and D3 pie chart renders five categorical slices with a color scale interpolated from peach to deep red via `d3.interpolateRgb`. The chart uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG paths, with an inner radius creating a donut effect. An unused `Check` component demonstrates a separate linear gradient of rectangles, though it is commented out and not part of the final SVG output.

May 26, 2021

Loading thumbnail…

Fork of Fork of Episode 3: Sol LeWitt in Vanilla JavaScript version 2

This piece, presented in a web browser, shows two overlapping, colorful compositions of abstract vertical and horizontal stripes. The rendering is built with the vanilla JavaScript API for SVG, using programmatically created shapes. A white circle obscures the center of the vertical stripe pattern, while a separate set of horizontal stripes is clipped to a circular mask, creating the appearance of a layered, circular cutout. Each rectangle’s fill color is randomly generated, producing a dynamic, multicolored grid.

May 26, 2021

Loading thumbnail…

Fork of Smiley face part 1

A yellow circle follows the mouse cursor across an SVG canvas. The interface demonstrates basic pointer tracking using React state management, where `useState` stores the cursor’s `clientX` and `clientY` coordinates on each `mousemove` event. The `circle` element’s `cx` and `cy` attributes update dynamically from this state, while `circleRadius` remains fixed at 30 pixels. Rendered entirely with SVG within a React component, the example shows how declarative data binding enables smooth, responsive interactions without additional D3 utilities.

May 26, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example shows a minimal web page that fetches a CSV file containing CSS named colors and logs its raw text to the browser console. The code uses the native `fetch` API to request the CSV from a GitHub gist URL, then chains a `response.text()` promise to parse the response body as a string. The parsed data is displayed solely through `console.log`, with no further processing or visualization on the page. Styling is applied via inline CSS, setting a large font size for the otherwise empty body.

May 26, 2021

Loading thumbnail…

Making a bat chart

This example attempts to create a bat chart from a dataset of country populations. The code uses D3 version 6 to select an SVG element and read a CSV file containing population figures. It intends to append rectangles to the chart, but the render function is incomplete and contains erroneous code, leaving the visualization non-functional. The chart would have used a fixed width and height for each bar, with data loaded via the `csv` function from D3.

May 21, 2021