Helen-Luwei-Zhang

@Helen-Luwei-Zhang·7 public vizzes

EDAV7_1_axes

Animated bar chart compares reported crimes against women in India across four categories—female/no, female/yes, male/no, male/yes—over multiple years. Six sequential stages animate bar heights and colors, using d3.axisBottom for the x-axis and d3.scaleBand and d3.scaleLinear to map categories and values. The transition API with specified durations and delays animates rect attribute changes, while the SVG background highlights the plot area. Data comes from a GitHub-hosted CSV file.

Dec 13, 2021

Loading thumbnail…

EDAV_interactive

Four animated bar charts display the reported rate of crimes against women in India across successive years, with categories for female/male and yes/no responses to a survey question. The visualization sequentially transitions between five years of data using D3 v7 transitions that update bar heights, positions, and fill colors. Each staged transition delays two seconds before updating the y-scale domain and rendering new values. The charts render as SVG rectangles with axes, drawing from a CSV dataset about crimes against Indian women.

Dec 13, 2021

Loading thumbnail…

EDAV7_1_axes

This example animates a bar chart of crime data against Indian women, showing values for female and male respondents with yes/no categories across multiple years. The bars transition through six sequential datasets, each with a two-second duration and two-second delay, alternating between cornflower blue and forest green. Built with D3 v7, the visualization uses `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `transition` with duration and delay parameters to update bar heights. The data comes from a CSV file referenced in the README, and the SVG rendering includes a light blue background and axis labels.

Dec 13, 2021

Loading thumbnail…

Vertical Bar Chart

This visualization presents a vertical bar chart initially displaying six pink bars with varying widths. The chart then animates, transitioning the bars to new width values over two seconds using D3’s transition system, with the `transition.attr` API handling the smooth dimension changes. The SVG rendering is implemented using `d3.select` and `append` to create the rectangles, while the data appears as static arrays within the code. The animation showcases how D3 can alter existing SVG elements dynamically, though the source data is not externally linked.

Dec 12, 2021

Loading thumbnail…

Fork of Untitled

This visualization displays uptime data in hours for five dates in January 2017, using a bar chart rendered as SVG. The bars use a steelblue fill that turns brown on hover, with axes styled to remove the x-axis path. The code leverages d3.v4, using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate the axes. Data is embedded in the script, converted from seconds to hours, and plotted with a y-axis labeled “Frequency.”

Dec 12, 2021

Loading thumbnail…

Untitled

This example shows a bar chart of server uptime in hours across five dates in January 2017, with hover highlighting on each bar. The visualization uses D3 v4 to bind the dataset, scales it from seconds to hours, and renders the bars as SVG rectangles with axes. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the ticks. The bars change color on mouseover via CSS, while the data comes from an embedded inline array rather than an external file.

Dec 12, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple bar chart visualization created with D3.js, displaying data from a CSV file loaded from a GitHub repository. The code uses `d3.select` to append a paragraph to the page and `d3.csv` to fetch the dataset, then renders axes with `d3.axisBottom` and `d3.axisLeft`. The chart includes dollar-formatted tick labels on the y-axis and uses a height-based translation for proper positioning. The implementation relies on D3 v5, imported via ES6 modules, with the page structure defined in an HTML file and styling in a linked CSS stylesheet.

Dec 12, 2021