Seanisgod1994

@Seanisgod1994·11 public vizzes

Untitled

This grouped bar chart displays monthly values for three categories (Orange, XPC, and ABC) from a local CSV file. The visualization uses `d3.scaleBand` for the categorical x-axis and subgroup positioning, with `d3.scaleOrdinal` assigning a distinct color to each series. A manual legend is drawn using SVG circles and text elements. The chart renders as an SVG via the `d3.csv` load, with axes generated by `d3.axisBottom` and `d3.axisLeft` on a fixed 20-unit y-domain.

Nov 18, 2020

Loading thumbnail…

Untitled

This example shows a grouped bar chart comparing three product categories—Orange, XPC, and ABC—across six months, with the data loaded from a CSV file. The visualization uses d3.csv to parse the dataset and d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal to map months, values, and category colors. Bars are rendered as SVG rectangles, grouped by month via nested selections. The chart includes axes generated with d3.axisBottom and d3.axisLeft, though the X-axis labels are missing because the code references a nonexistent `d.group` field rather than the actual `Month` column.

Nov 18, 2020

Loading thumbnail…

Untitled

This example shows tourism receipts and expenditure categories for a country across six years, from 2015 to 2020, with values in millions. The visualization uses a stacked bar chart built with CanvasJS, where each bar segment represents a spending category such as Accommodation, Shopping, or Sightseeing. The code loads the provided CSV data and renders it as stacked bars using CanvasJS’s `stackedBar` type, though the chart title and data points in the script do not match the CSV contents. The page also includes a D3.js script and CSS, but the primary chart is generated by CanvasJS.

Nov 2, 2020

Loading thumbnail…

Untitled

This example overlays a text block with the message "What a beautiful sunrise" on a full-screen background image of a Norway landscape. The page uses an HTML structure with a CSS container and absolute positioning to place the text at a specific offset from the bottom-right corner. The background is set via CSS with a fixed, cover-sized image URL, while the text is styled with a Times New Roman font at 30 pixels. The code uses standard HTML, CSS, and an external stylesheet, with no JavaScript libraries or interactive elements.

Oct 27, 2020

Loading thumbnail…

Untitled

This interactive visualization presents the results of Singapore’s 2020 general election, showing popular vote shares by party in a pie chart alongside constituency-level maps and tables. Users can switch between tabs for overall results, single-member constituencies (SMCs), group representation constituencies (GRCs), and party breakdowns. The code uses d3.pie and d3.arc to generate the animated pie chart, while d3.geoPath renders the geographic maps from TopoJSON data. Tooltips, implemented via d3-tip, display additional details on hover, and the CSV data is loaded and bound to the visual elements.

Oct 18, 2020

Loading thumbnail…

Untitled

An interactive interface displaying the results of Singapore’s 2020 General Election for Group Representation Constituencies (GRCs). Clicking a tab for a GRC reveals its total electors, votes cast, valid votes, and spoilt votes, alongside the winning and runner-up parties with their vote percentages. The code uses plain HTML tables and JavaScript functions to update the content dynamically. Party icons are shown via image sources, and styling is applied through a separate CSS file. The data is hardcoded within the JavaScript functions, not loaded from an external source.

Oct 12, 2020

Loading thumbnail…

D3.js Sortable & Responsive Table

This interactive table displays Singapore parliamentary election data from a CSV file, showing parties and alliances alongside their SMC and GRC seat counts. Clicking any column header sorts the table rows in ascending or descending order, with ascending and descending sort indicators indicated by arrow glyphs. The example uses d3.csv to load the data and D3’s selection, data binding, and sorting methods to build and reorder the table. CSS media queries and data-th attributes make the table responsive, transforming it from a standard grid into stacked rows on small screens.

Sep 30, 2020

Loading thumbnail…

Bar chart.js

This example visualizes the popular vote counts for political parties and alliances in Singapore's 2020 general election using a horizontal bar chart. Each bar represents a party's total votes, with hover interactions turning bars red and tooltips displaying the exact vote count. The chart is rendered as SVG using D3 v6, with data loaded from a CSV file. The code leverages `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to map votes to bar widths and party names to the y-axis, while removing default axis lines and ticks for a cleaner appearance.

Sep 30, 2020

Loading thumbnail…

Untitled

This example loads a CSV dataset of election popular votes and prepares a bar chart using D3.js within a React framework. The code imports `select`, `csv`, `scaleLinear`, `scaleBand`, and `max` from D3 v6, then parses the numeric vote values. An SVG container with fixed dimensions (960×500) is selected, and the data is logged before rendering, though the render function remains empty. The visualization does not yet display any marks or axes, as the rendering logic is incomplete.

Sep 29, 2020

Loading thumbnail…

Making bar charts

This example shows the results of Singapore’s 2020 parliamentary election as a bar chart, with each party’s popular vote displayed as a horizontal bar. The chart is built using D3.js v5, reading tabular data from a CSV file via `d3.csv` and mapping the values to bar lengths. The bars are rendered as SVG rectangles, with text labels for each party name and vote count. The data originates from the file `data.csv`, containing party names and their corresponding popular vote totals.

Sep 29, 2020

Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face using D3.js v6 in a React framework, rendered as SVG with animated elements. It draws a yellow circle for the head, black circles for eyes, and an arc-generated mouth using the `d3.arc()` API. Two rectangular eyebrows are added, with the left one animating upward via a `transition().duration(2000)` call. The code uses `select` and `arc` from D3, positioning elements relative to the SVG’s width and height attributes. The face is composed purely of geometric primitives, with no external data source.

Sep 28, 2020