Untitled

100%

✓ Published0🌍 Public

Last edited Jul 14, 2022

Created on Jul 14, 2022

This interactive chart shows Certificate of Entitlement (COE) prices in Singapore from 2010 to 2018, split by vehicle category and bidding exercise, using radio buttons to toggle between the two monthly bidding sessions. The visualization renders multi-series line charts with D3 v4, using `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for color mapping, while loading data from a CSV file.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This interactive line chart visualizes COE (Certificate of Entitlement) prices in Singapore from 2010 to 2018, distinguishing between two monthly bidding exercises via radio buttons that toggle between the two series. The chart displays premiums for five vehicle categories (A through E) across time, with each category assigned a distinct color from a categorical scale. The visualization uses D3 v4 to parse CSV data, render SVG axes with gridlines, and apply time-based scaling. A legend with colored markers helps identify each category, while the responsive design incorporates Bootstrap for layout.

Aashpradhan01123

94% match

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.

SSeanisgod1994

65% match

Loading thumbnail…

Untitled

A line chart shows the annual value of CO2 emissions from 1995 to 2014, with each year represented by a white circle with a teal outline. The circles change their stroke to black on hover, and a tooltip displays the exact value for each point. The visualization uses D3 v4 to read the CSV data, build a time-scale X axis and a linear Y axis, and draw a smoothed curve using `d3.line()` with `curveBasis`. The SVG output includes axes, circles, and the path, while the tooltip is appended as an HTML div in the page.

Llamiyaa

65% match

Loading thumbnail…

Untitled

This bar chart visualizes total car sales across different locations, with each location represented by a vertical bar scaled against a fixed y-axis range of 0 to 13. The chart uses D3.js v4 to fetch data from a CSV file hosted on GitHub, then renders the visualization as an SVG. The code employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Bars are drawn as SVG rectangles with a teal fill color, and x-axis labels are rotated 45 degrees for readability.

MManideeprenikindi

64% match

Loading thumbnail…

Animated Vehicle Consumption Scatterplot

This animated scatterplot visualizes vehicle fuel consumption and CO2 emissions from a 2014 dataset, plotting over 1,000 points with D3.js. Every 17 seconds, the x-axis transitions between CO2 emissions, engine size, and cylinder count, repositioning points via `selection.join` with staggered `transition` delays. The SVG chart uses `scaleLinear` domains, axis generators, and custom labels, with the y-axis fixed to combined MPG. Data loads from a CSV via `d3.csv`, and the reusable chart pattern updates axes and circles smoothly during each attribute swap.

TToly

64% match

Loading thumbnail…

Untitled

This example displays bar charts of pedestrian traffic counts in Seoul districts, with buttons to switch between views by day of the week, time period, and age group. The visualization uses d3.v3 with SVG rendering, loading CSV data via d3.csv and sorting bars by descending count. It applies d3.scale.linear for the x-axis and d3.scale.ordinal with rangeRoundBands for the categorical y-axis.

JJIN-wj

64% match

Loading thumbnail…

Untitled

A line chart displays annual total automotive sales in the United States, with the year on the x-axis and sales on the y-axis, titled "各種能源日用量比較." The visualization uses D3.js and C3.js, loading data from a CSV file via `d3.csv` and rendering the chart as an SVG. The axes are labeled "Year" and "Sales," with the sales line drawn in red. The D3 `scaleTime`, `scaleLinear`, and `line` generator construct the plot, while gridlines and tick marks are styled via CSS.

Yyuting89830@gmail.com

63% match

Loading thumbnail…

ICE-7

This animated scatter plot visualizes used car data, comparing selling price against various attributes including maximum power, mileage, and kilometers driven. The visualization cycles through different x-axis variables every two seconds, allowing viewers to explore correlations between car characteristics and market value. Built with D3.js, the chart uses a reusable scatter plot function with linear scales for both axes, implementing smooth transitions through a `setInterval` callback. The SVG rendering incorporates the Share Tech font and displays data points as circles, with axis labels updating dynamically to reflect the currently selected variable.

RRaajithaSabbineni

63% match