Skip to main content
Log in
Y

yqinolive

@yqinolive·9 public vizzes

Loading thumbnail…

Choropleth Map of County Data

A choropleth map of U.S. counties visualizes poverty rates as filled paths, with a color legend and axis labeling the percentage scale. Built with d3.v5, it loads TopoJSON county boundaries and a CSV of poverty data, then uses d3.geoPath to render SVG shapes and d3.scaleThreshold with d3.schemeGreens for the color encoding. State borders are drawn as white mesh lines, and hover tooltips show each county’s exact rate.

Feb 19, 2019
Loading thumbnail…

Q3 Scatter Plot

A scatter plot encodes movies from a `movies.csv` dataset, with rating on the x-axis and awards wins plus nominations on the y-axis. Each point is colored red or blue according to a binary `IsGoodRating` field, with a legend rendered via a custom `colorLegend` function. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` to build the SVG chart, including grid lines and a square-root-scaled y-axis. Data types are coerced with unary plus operators before rendering.

Feb 16, 2019
Loading thumbnail…

Q3

This scatterplot displays the relationship between movie ratings and their wins-plus-nominations counts, using circles positioned by d3.scaleLinear scales for both axes. The visualization uses d3.csv to load the movie dataset from data.csv and d3.select to append SVG circles, with axes generated via d3.axisLeft and d3.axisBottom. The data originates from the UN’s movie database, and the chart encodes each film as a circle without additional encoding channels.

Feb 15, 2019
Loading thumbnail…

Q3

This bar chart displays the relationship between movie ratings and awards won or nominated, using data from the UN. The visualization plots each movie as a circle, with a linear scale for awards and a band scale for ratings. Built with D3 v5, the code uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart. The data is loaded from a CSV file, and the circle size reflects the band scale's bandwidth.

Feb 15, 2019
Loading thumbnail…

scatter plot v1

This scatter plot v1 example visualizes movie data from a CSV file, plotting each film’s budget against its gross earnings. The visualization uses D3 v5 with an SVG rendering approach, employing `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Bars are colored steelblue via CSS. The code loads data with `d3.csv`, converts population values, and renders axes using `axisLeft` and `axisBottom`. The dataset originates from a movie ratings source.

Feb 15, 2019
Loading thumbnail…

Hello VizHub

This example displays a single bold message, “Hello VizHub!”, centered on a dark background using a large Ubuntu font. The visualization is minimal, focusing on typography and color contrast rather than data. It demonstrates a basic D3.js setup where the `select` function from the D3 v5 library targets a div element and sets its text content to a value imported from a local ES6 module. The page structure is defined in HTML with CSS for styling, and the JavaScript logic is bundled into `bundle.js`.

Feb 15, 2019
Loading thumbnail…

Hello VizHub

This example displays the text “Hello VizHub!” in large, centered, light-gray lettering against a dark background using the Ubuntu font. The page renders a single static message by selecting a `div` element with D3 v5’s `select` function and setting its text content from an imported ES6 module. The styling is defined in an external CSS file, while the HTML structure loads D3 from a CDN and the custom JavaScript via `bundle.js`, demonstrating basic module imports and DOM manipulation.

Feb 15, 2019
Loading thumbnail…

Hello VizHub

This example displays a single line of text, “Hello VizHub!”, centered on a dark gray background in a large, light-colored Ubuntu font. The page is structured as a set of ES6 modules, with the message defined in a separate `myMessage.js` file and imported into the main `index.js` script. It uses the D3 library (version 5.7.0) loaded via a CDN to manage the DOM and styling, demonstrating a minimal setup for a data-visualization project.

Feb 15, 2019
Loading thumbnail…

Hello VizHub

This example displays a single bold message, “Hello VizHub!”, centered on a dark background using a large Ubuntu font. The visualization is minimal, focusing on typography and color contrast rather than data. It demonstrates a basic D3.js setup where the `select` function from the D3 v5 library targets a div element and sets its text content to a value imported from a local ES6 module. The page structure is defined in HTML with CSS for styling, and the JavaScript logic is bundled into `bundle.js`.

Feb 15, 2019