Skip to main content
Log in
Y

yuva24

@yuva24·8 public vizzes

Loading thumbnail…

Exercise 4(c)

This example shows a circle-packing visualization of a hierarchical dataset, where the size of each circle represents the summed value of its leaf nodes. The code uses `d3.pack()` with a padding of 20 to create non-overlapping circles within a 300x300 area, rendering them as red, semi-transparent SVG circles with white strokes. Leaf nodes display their names as centered white text, while parent nodes remain unlabeled. The data is a hardcoded JSON object with nested children, and the layout is computed by calling `rootNode.sum()` and `packLayout(rootNode)`.

Jan 31, 2021
Loading thumbnail…

Exercise 2.1 (b)

This example compares five treemap layout algorithms by rendering the same hierarchical dataset with each one side by side. The page displays five separate SVG charts, one for each D3 layout mode: treemapBinary, treemapDice, treemapSlice, treemapSliceDice, and treemapSquarify. Each SVG uses d3.hierarchy and d3.treemap to compute node positions, with rectangles styled in dark blue and semi-transparent. The layout names appear above each chart, while leaf nodes show their data labels inside the colored rectangles.

Jan 31, 2021
Loading thumbnail…

Treemap layout (with labels)

A treemap layout visualizes a small hierarchical dataset, with nested rectangles representing the root node A1, its children B1 and B2, and the grandchildren C1, C2, and C3. Each rectangle is colored cadetblue, and labels show the node names. The example uses the `d3.treemap` layout with `d3.hierarchy` and `rootNode.sum` to compute sizes, then renders the result as SVG rectangles and text elements via data joins on `g` nodes.

Jan 31, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that renders the text "Hello HTML" in the browser, centered with a very large font size. It also includes a JavaScript snippet that logs "Hello JavaScript!" to the console. The page uses basic CSS styling within a `<style>` tag to control the text alignment and font size, and a `<script>` tag to execute the JavaScript. The code serves as a bare-bones starter template highlighting fundamental web technologies.

Jan 29, 2021
Loading thumbnail…

Fork of Fork of Coravirus Deaths Over Time by Country by Voronoi whit labels

A multi-line chart displays cumulative COVID-19 deaths over time for each country, sourced from the CSSEGISandData GitHub repository. The rendering uses React with D3 v5, employing `scaleLog` for the y-axis and `scaleTime` for the x-axis. A Voronoi overlay, built with `d3.Delaunay`, enables hover interactions that highlight the active country’s line and display a tooltip with its name, death count, and date. SVG paths render all series, with gridlines and axis labels from `d3.axisBottom` and `d3.axisLeft`.

Jan 29, 2021
Loading thumbnail…

CS171 - Health &amp; Wealth of Nations

A scatterplot shows the relationship between national income and average life expectancy across countries, with bubble size representing population and color indicating world region. The visualization loads data from a CSV file and renders circles in an SVG using D3 v5, applying logarithmic and linear scales to map income and life expectancy. Animated transitions are not present, but the chart includes axis labels and a legend-less ordinal color scale for categorical region data.

Jan 28, 2021
Loading thumbnail…

Fork of Melting Data for Multiple Lines

This visualization shows population over time by region, with multiple lines tracking changes from 1950 to 2100. A color legend identifies each region, and the chart displays population values on a logarithmic scale with a title and axis labels. The code uses d3.csv to load UN population estimates and medium variant data, d3.nest to group by region, and d3.line with curveBasis for smooth paths. The colorLegend export creates a custom legend, while d3.axisLeft and d3.axisBottom render the axes.

Jan 28, 2021
Loading thumbnail…

Lab submission

This example displays the text “Hello HTML” in large, centered type on a plain page, serving as a minimal demonstration of web fundamentals. It uses a simple CSS `body` style rule for layout and typography, while an inline JavaScript `console.log` statement outputs “Hello JavaScript!” to the browser’s developer console. The page is a bare-bones HTML document, with no external libraries or frameworks, illustrating the core structure of an HTML file, CSS styling, and client-side scripting in a single, self-contained file.

Jan 28, 2021